@react-fabric/data 1.0.0-beta.1 → 1.0.0-beta.4

package/dist/esm/table/useVirtualTable.js

@@ -28,13 +28,13 @@ var useVirtualTable = function useVirtualTable(data, keyProperty, onCheckChanged
       if (action.type === "checkall") {
         if (state.allChecked !== 0) {
           state.checked = [];
-        } else {
+        } else if (keyProperty) {
           state.checked = data.map(function (item) {
             return item[keyProperty];
           });
         }
       }
-      onCheckChanged(state.checked);
+      onCheckChanged === null || onCheckChanged === void 0 || onCheckChanged(state.checked);
       return _objectSpread(_objectSpread({}, state), {}, {
         allChecked: state.checked.length === data.length ? 1 : state.checked.length ? 2 : 0
       });

package/dist/esm/tree/TreePanel.js

@@ -5,18 +5,19 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import { CoreIcons, Section, Header, Icon, ButtonGroup, Button } from '@react-fabric/core';
 import { Search } from '@react-fabric/form';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { useRef, useMemo } from 'react';
+import { useRef, useMemo, useImperativeHandle } from 'react';
 import { TreeNode } from './TreeNode.js';
 import { iconExpandAll, iconCollapseAll } from './types.js';
 import { useTree } from './useTree.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["items", "selected", "checked", "checkable", "noLines", "renderer", "searchable", "selectable", "matcher", "filterPlaceholder", "defaultLeafIcon", "defaultNodeIcon", "expander", "onChecked", "onLoad", "onSelect"];
+var _excluded = ["ref", "items", "selected", "checked", "checkable", "noLines", "renderer", "searchable", "selectable", "matcher", "filterPlaceholder", "defaultLeafIcon", "defaultNodeIcon", "expander", "onChecked", "onLoad", "onSelect"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var TreePanel = function TreePanel(_ref) {
   var _virtualItems$;
-  var items = _ref.items,
+  var ref = _ref.ref,
+    items = _ref.items,
     selected = _ref.selected,
     checked = _ref.checked,
     checkable = _ref.checkable,
@@ -48,6 +49,7 @@ var TreePanel = function TreePanel(_ref) {
     expandAll = _useTree.expandAll,
     collapseAll = _useTree.collapseAll,
     select = _useTree.select,
+    expand = _useTree.expand,
     onFilter = _useTree.onFilter;
   var scrollerRef = useRef(null);
   var virtualizer = useVirtualizer({
@@ -66,6 +68,16 @@ var TreePanel = function TreePanel(_ref) {
     if (expander === "folder") return [CoreIcons.folderClosed, CoreIcons.folderOpen];
     return [CoreIcons.expand, CoreIcons.collapse];
   }, [expander]);
+  useImperativeHandle(ref, function () {
+    return {
+      open: function open(id) {
+        return expand(id);
+      },
+      select: function select(id) {
+        return expand(id);
+      }
+    };
+  }, []);
   return /*#__PURE__*/jsxs(Section, {
     children: [/*#__PURE__*/jsxs(Header, {
       flex: true,

package/dist/esm/tree/useTree.js

@@ -151,6 +151,12 @@ var useTree = function useTree(_ref) {
       id: id
     });
   }, []);
+  var expand = useCallback(function (id) {
+    dispatch({
+      type: "expand",
+      id: id
+    });
+  }, []);
   var expandAll = useCallback(function () {
     dispatch({
       type: "expandAll"
@@ -174,6 +180,7 @@ var useTree = function useTree(_ref) {
     collapseAll: collapseAll,
     toggleCheck: toggleCheck,
     select: select,
+    expand: expand,
     onFilter: onFilter
   };
 };

package/dist/types/checklist/CheckList.d.ts

@@ -0,0 +1,30 @@
+import { type BadgeType } from "@react-fabric/core/dist/types/types";
+import { type FC } from "react";
+import { type SelectableProps } from "../hooks/useSelectableList";
+export interface CheckListItem extends KeyValue {
+    id: string;
+    label: string;
+    icon?: string;
+    badge?: BadgeType;
+    isDisabled?: boolean;
+}
+export interface CheckListProps extends SelectableProps {
+    /**
+     * list items
+     */
+    items: CheckListItem[];
+    /**
+     * allow negative selections
+     */
+    allowNegative?: boolean;
+    /**
+     * max list items
+     */
+    maxCount?: number;
+    /**
+     * message for empty list
+     */
+    emptyMessage?: string;
+    sortItems?: boolean;
+}
+export declare const CheckList: FC<CheckListProps>;

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

@@ -0,0 +1,28 @@
+export interface SelectableProps {
+    /**
+     * list items
+     */
+    items: Array<{
+        label: string;
+    } & KeyValue>;
+    /**
+     * selected item ids
+     */
+    selected?: string[];
+    /**
+     * selected negative item ids
+     */
+    nonselected?: string[];
+    /**
+     * change callback
+     */
+    onChange?: (ids: string[], nonIds?: string[]) => void;
+    /**
+     * item click callback
+     */
+    onClick?: (id: string, isNegative: boolean) => void;
+}
+export declare const useSelectableList: ({ items, selected, nonselected, onChange, onClick, }: SelectableProps) => {
+    selection: KeyValue<number>;
+    toggleSelection: (id: string, isNegative?: boolean) => void;
+};

package/dist/types/index.d.ts

@@ -1,9 +1,12 @@
 import "./i18n";
+export { CheckList } from "./checklist/CheckList";
 export { Histogram } from "./histogram/Histogram";
 export { JsonViewer } from "./json/JsonViewer";
 export { Pagination } from "./pagination/Pagination";
 export { Table } from "./table/Table";
+export { type TableRef } from "./table/types";
 export { TreePanel } from "./tree/TreePanel";
+export { type TreeNodeType as TreeNode } from "./tree/types";
 export { VirtualGallery, type VirtualGalleryRef } from "./virtual/Gallery";
 export { VirtualList, type VirtualListRef } from "./virtual/List";
 export * from "./hooks/useFilteredList";

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

@@ -1,2 +1,2 @@
 import { type TableProps } from "./types";
-export declare const Table: <T extends KeyValue<any> = KeyValue<any>>({ data, columns, keyProperty, checkableRows, hideableColumns, sort, loading, onSort, onRowClick, onCheckedChanged, }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Table: <T extends KeyValue<any> = KeyValue<any>>({ ref, data, columns, keyProperty, checkableRows, hideableColumns, sort, loading, onSort, onRowClick, onCheckedChanged, }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,10 +1,10 @@
-import { type CssProp, type IconProps, type TestProps } from "@react-fabric/core/dist/types/types";
+import { type CssProp, type IconProps, type RefProp, type TestProps } from "@react-fabric/core/dist/types/types";
 import { type ReactElement } from "react";
 export declare const COL_MIN_WIDTH = "3rem";
 export declare const COL_MAX_WIDTH = "64rem";
 export declare const COL_DEFAULT_WIDTH = "12rem";
 export interface ColumnType<T = KeyValue> extends CssProp, IconProps, TestProps {
-    id: keyof T;
+    id: keyof T | string;
     label?: string;
     actions?: ReactElement;
     align?: "start" | "center" | "end";
@@ -22,10 +22,15 @@ export interface ColumnType<T = KeyValue> extends CssProp, IconProps, TestProps
     format?: string;
     renderer?: (value: AnyObject, data: T) => void;
 }
-export interface TableProps<T = KeyValue> {
+export interface TableRef {
+    hilight: (row: number) => void;
+    unhilight: () => void;
+    scrollTo: (row: number) => void;
+}
+export interface TableProps<T = KeyValue> extends RefProp<TableRef> {
     columns: Array<ColumnType<T>>;
     data: T[];
-    keyProperty: keyof T;
+    keyProperty?: keyof T;
     /**
      * checkable rows
      */

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

@@ -3,7 +3,7 @@ interface DataState {
     checked: Key[];
     allChecked: 0 | 1 | 2;
 }
-export declare const useVirtualTable: (data: KeyValue[], keyProperty: Key, onCheckChanged: (checked: Key[]) => void) => {
+export declare const useVirtualTable: (data: KeyValue[], keyProperty?: Key, onCheckChanged?: (checked: Key[]) => void) => {
     scrollerRef: import("react").RefObject<HTMLDivElement>;
     items: import("@tanstack/virtual-core").VirtualItem<Element>[];
     checkState: DataState;

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

@@ -1,2 +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;
+export declare const TreePanel: <T extends KeyValue<any>>({ ref, 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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { type BadgeType, type ChildProp, type CssProp, type Elements, type IconProps, type TestProps } from "@react-fabric/core/dist/types/types";
+import { type BadgeType, type ChildProp, type CssProp, type Elements, type IconProps, type RefProp, type TestProps } from "@react-fabric/core/dist/types/types";
 interface TreeBaseNode<T> extends IconProps, CssProp, TestProps {
     id: string;
     /**
@@ -70,7 +70,11 @@ export interface TreeNodeProps extends ChildProp {
     onSelect: (id: string) => void;
     onChecked: (id: string) => void;
 }
-export interface TreePanelProps<T extends KeyValue = KeyValue> extends TestProps {
+export interface TreeRef {
+    select: (id: string) => void;
+    open: (id: string) => void;
+}
+export interface TreePanelProps<T extends KeyValue = KeyValue> extends TestProps, RefProp<TreeRef> {
     items?: Array<TreeNodeType<T>>;
     /**
      * make tree searchable

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

@@ -13,6 +13,7 @@ export declare const useTree: <T extends KeyValue<any>>({ items, checked, select
     collapseAll: () => void;
     toggleCheck: (id: string) => void;
     select: (id: string) => void;
+    expand: (id: string) => void;
     onFilter: {
         (...args: any): void;
         cancel(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/data",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.4",
   "description": "RUF: Data package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -33,9 +33,9 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@react-fabric/core": "^1.0.0-beta.1",
-    "@react-fabric/form": "^1.0.0-beta.1",
-    "@react-fabric/utilities": "^1.0.0-beta.1",
+    "@react-fabric/core": "^1.0.0-beta.4",
+    "@react-fabric/form": "^1.0.0-beta.4",
+    "@react-fabric/utilities": "^1.0.0-beta.4",
     "@tanstack/react-virtual": "^3.8.6",
     "classnames": "^2.5.1",
     "color": "^4.2.3",
@@ -51,5 +51,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "e0712d7ea2c945de876bef813b5d2dcec1218ed7"
+  "gitHead": "47b0aede19252a3a3ef8df75c08a21caabde8100"
 }

package/src/checklist/CheckList.tsx

@@ -0,0 +1,218 @@
+/*
+ * 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.
+ */
+
+import { Badge, CoreIcons, EmptyContent, Icon } from "@react-fabric/core";
+import { type BadgeType } from "@react-fabric/core/dist/types/types";
+import { isString } from "@react-fabric/utilities";
+import {
+  Fragment,
+  isValidElement,
+  memo,
+  useEffect,
+  useMemo,
+  useState,
+  type FC,
+} from "react";
+import { useTranslation } from "react-i18next";
+import {
+  useSelectableList,
+  type SelectableProps,
+} from "../hooks/useSelectableList";
+
+export interface CheckListItem extends KeyValue {
+  id: string;
+  label: string;
+  icon?: string;
+  badge?: BadgeType;
+  isDisabled?: boolean;
+}
+
+export interface CheckListProps extends SelectableProps {
+  /**
+   * list items
+   */
+  items: CheckListItem[];
+  /**
+   * allow negative selections
+   */
+  allowNegative?: boolean;
+  /**
+   * max list items
+   */
+  maxCount?: number;
+  /**
+   * message for empty list
+   */
+  emptyMessage?: string;
+
+  sortItems?: boolean;
+}
+
+const CheckItem: FC<
+  Omit<CheckListItem, "selected"> & {
+    selected?: number;
+    allowNegative?: boolean;
+  }
+> = memo(
+  ({
+    id,
+    allowNegative,
+    selected,
+    icon,
+    label,
+    isDisabled,
+    onClick,
+    badge,
+  }: Omit<CheckListItem, "selected"> & {
+    selected?: number;
+    allowNegative?: boolean;
+  }) => {
+    return (
+      <div
+        role="none"
+        className="ax-checkList__item"
+        data-disabled={isDisabled}
+        onClick={() => onClick(id, false)}
+        onContextMenu={(e) => [
+          allowNegative && onClick(id, true),
+          e.preventDefault(),
+        ]}
+      >
+        {!allowNegative && (
+          <Icon
+            data-type="checkbox"
+            className="ax-checkList__checkbox"
+            data-selected={selected === 1}
+            icon={selected ? CoreIcons.checkboxInt : CoreIcons.checkboxOff}
+          />
+        )}
+        {allowNegative && (
+          <Fragment>
+            <Icon
+              data-type="multiple"
+              className="ax-checkList__checkbox"
+              icon={
+                selected === 1
+                  ? CoreIcons.expand
+                  : selected === -1
+                    ? CoreIcons.collapse
+                    : CoreIcons.checkboxOff
+              }
+              data-selected={selected}
+            />
+            <div className="ax-checkList__checkbox">
+              <Icon
+                data-type="positive"
+                onClick={(e) => [(onClick(id, false), e.stopPropagation())]}
+                icon={
+                  selected === 1 ? CoreIcons.expandActive : CoreIcons.expand
+                }
+                data-selected={selected === 1}
+              />
+              <Icon
+                data-type="negative"
+                onClick={(e) => [(onClick(id, true), e.stopPropagation())]}
+                icon={
+                  selected === -1
+                    ? CoreIcons.collapseActive
+                    : CoreIcons.collapse
+                }
+                data-selected={selected === -1}
+              />
+            </div>
+          </Fragment>
+        )}
+        {isValidElement(icon) && icon}
+        {isString(icon) && <Icon icon={icon} />}
+        <label>{label}</label>
+        <Badge {...badge} />
+      </div>
+    );
+  },
+);
+CheckItem.displayName = "CheckItem";
+
+export const CheckList: FC<CheckListProps> = ({
+  items = [],
+  maxCount = 0,
+  allowNegative,
+  emptyMessage,
+  sortItems = true,
+  ...props
+}: CheckListProps) => {
+  const { t } = useTranslation("data");
+  const { selection, toggleSelection } = useSelectableList({
+    items,
+    ...props,
+  });
+  const [showMore, setShowMore] = useState(false);
+
+  useEffect(() => {
+    setShowMore(false);
+  }, [items]);
+
+  const listItems = useMemo(() => {
+    return [...items]
+      .sort((a, b) => {
+        if (sortItems && selection[a.id] !== selection[b.id]) {
+          if (selection[a.id] === 1) return -1;
+          if (selection[b.id] === 1) return 1;
+          if (selection[a.id] === -1) return -1;
+          if (selection[b.id] === -1) return 1;
+        }
+        return 0;
+      })
+      .slice(0, !showMore && maxCount > 0 ? maxCount : undefined);
+  }, [items, selection, maxCount, showMore, sortItems]);
+
+  return (
+    <div className="ax-checkList">
+      {listItems.map((item, index) => (
+        <CheckItem
+          {...item}
+          key={index}
+          onClick={toggleSelection}
+          allowNegative={allowNegative}
+          selected={selection[item.id]}
+        />
+      ))}
+      {maxCount > 0 && items.length > maxCount && (
+        <div className="ax-moreLink">
+          <span
+            role="none"
+            className="link"
+            onClick={() => setShowMore(!showMore)}
+          >
+            ...{t(`core:action.${showMore ? "less" : "more"}`)}
+          </span>
+        </div>
+      )}
+      {listItems.length === 0 && (
+        <EmptyContent
+          className="text-sm"
+          message={emptyMessage ?? t("checkList.empty")}
+        />
+      )}
+    </div>
+  );
+};

package/src/hooks/useSelectableList.ts

@@ -0,0 +1,94 @@
+/*
+ * 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.
+ */
+
+import { useCallback, useEffect, useRef, useState, useTransition } from "react";
+
+export interface SelectableProps {
+  /**
+   * list items
+   */
+  items: Array<{ label: string } & KeyValue>;
+  /**
+   * selected item ids
+   */
+  selected?: string[];
+  /**
+   * selected negative item ids
+   */
+  nonselected?: string[];
+  /**
+   * change callback
+   */
+  onChange?: (ids: string[], nonIds?: string[]) => void;
+  /**
+   * item click callback
+   */
+  onClick?: (id: string, isNegative: boolean) => void;
+}
+
+export const useSelectableList = ({
+  items,
+  selected,
+  nonselected,
+  onChange,
+  onClick,
+}: SelectableProps) => {
+  const selectionRef = useRef<KeyValue<number>>({});
+  const [selection, setSelection] = useState<KeyValue<number>>({});
+  const [, startTransition] = useTransition();
+  useEffect(() => {
+    selectionRef.current = items.reduce(
+      (ret, { id }) => ({
+        ...ret,
+        [id]: selected?.includes?.(id)
+          ? 1
+          : nonselected?.includes?.(id)
+            ? -1
+            : 0,
+      }),
+      {},
+    );
+    setSelection({ ...selectionRef.current });
+  }, [items, selected, nonselected]);
+
+  const toggleSelection = useCallback((id: string, isNegative = false) => {
+    const check = isNegative ? -1 : 1;
+    if (selectionRef.current[id] !== check) selectionRef.current[id] = check;
+    else if (selectionRef.current[id] === check) selectionRef.current[id] = 0;
+    const change: string[][] = [[], []];
+    Object.entries(selectionRef.current).forEach(([id, select]) =>
+      select === 1
+        ? change[0].push(id)
+        : select === -1
+          ? change[1].push(id)
+          : undefined,
+    );
+    setSelection({ ...selectionRef.current });
+    startTransition(() => {
+      onClick?.(id, isNegative);
+      onChange?.(change[0], change[1]);
+    });
+  }, []);
+
+  return { selection, toggleSelection };
+};

package/src/index.ts

@@ -23,11 +23,14 @@
 
 import "./i18n";
 
+export { CheckList } from "./checklist/CheckList";
 export { Histogram } from "./histogram/Histogram";
 export { JsonViewer } from "./json/JsonViewer";
 export { Pagination } from "./pagination/Pagination";
 export { Table } from "./table/Table";
+export { type TableRef } from "./table/types";
 export { TreePanel } from "./tree/TreePanel";
+export { type TreeNodeType as TreeNode } from "./tree/types";
 export { VirtualGallery, type VirtualGalleryRef } from "./virtual/Gallery";
 export { VirtualList, type VirtualListRef } from "./virtual/List";