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

package/dist/cjs/checklist/CheckList.js

@@ -0,0 +1,134 @@
+'use strict';
+
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var core = require('@react-fabric/core');
+var utilities = require('@react-fabric/utilities');
+var react = require('react');
+var reactI18next = require('react-i18next');
+var useSelectableList = require('../hooks/useSelectableList.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+var _excluded = ["items", "maxCount", "allowNegative", "emptyMessage", "sortItems"];
+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 CheckItem = /*#__PURE__*/react.memo(function (_ref) {
+  var id = _ref.id,
+    allowNegative = _ref.allowNegative,
+    selected = _ref.selected,
+    icon = _ref.icon,
+    label = _ref.label,
+    isDisabled = _ref.isDisabled,
+    _onClick = _ref.onClick,
+    badge = _ref.badge;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    role: "none",
+    className: "ax-checkList__item",
+    "data-disabled": isDisabled,
+    onClick: function onClick() {
+      return _onClick(id, false);
+    },
+    onContextMenu: function onContextMenu(e) {
+      return [allowNegative && _onClick(id, true), e.preventDefault()];
+    },
+    children: [!allowNegative && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+      "data-type": "checkbox",
+      className: "ax-checkList__checkbox",
+      "data-selected": selected === 1,
+      icon: selected ? core.CoreIcons.checkboxInt : core.CoreIcons.checkboxOff
+    }), allowNegative && /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+        "data-type": "multiple",
+        className: "ax-checkList__checkbox",
+        icon: selected === 1 ? core.CoreIcons.expand : selected === -1 ? core.CoreIcons.collapse : core.CoreIcons.checkboxOff,
+        "data-selected": selected
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "ax-checkList__checkbox",
+        children: [/*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+          "data-type": "positive",
+          onClick: function onClick(e) {
+            return [(_onClick(id, false), e.stopPropagation())];
+          },
+          icon: selected === 1 ? core.CoreIcons.expandActive : core.CoreIcons.expand,
+          "data-selected": selected === 1
+        }), /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+          "data-type": "negative",
+          onClick: function onClick(e) {
+            return [(_onClick(id, true), e.stopPropagation())];
+          },
+          icon: selected === -1 ? core.CoreIcons.collapseActive : core.CoreIcons.collapse,
+          "data-selected": selected === -1
+        })]
+      })]
+    }), /*#__PURE__*/react.isValidElement(icon) && icon, utilities.isString(icon) && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+      icon: icon
+    }), /*#__PURE__*/jsxRuntime.jsx("label", {
+      children: label
+    }), /*#__PURE__*/jsxRuntime.jsx(core.Badge, _objectSpread({}, badge))]
+  });
+});
+CheckItem.displayName = "CheckItem";
+var CheckList = function CheckList(_ref2) {
+  var _ref2$items = _ref2.items,
+    items = _ref2$items === void 0 ? [] : _ref2$items,
+    _ref2$maxCount = _ref2.maxCount,
+    maxCount = _ref2$maxCount === void 0 ? 0 : _ref2$maxCount,
+    allowNegative = _ref2.allowNegative,
+    emptyMessage = _ref2.emptyMessage,
+    _ref2$sortItems = _ref2.sortItems,
+    sortItems = _ref2$sortItems === void 0 ? true : _ref2$sortItems,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  var _useTranslation = reactI18next.useTranslation("data"),
+    t = _useTranslation.t;
+  var _useSelectableList = useSelectableList.useSelectableList(_objectSpread({
+      items: items
+    }, props)),
+    selection = _useSelectableList.selection,
+    toggleSelection = _useSelectableList.toggleSelection;
+  var _useState = react.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showMore = _useState2[0],
+    setShowMore = _useState2[1];
+  react.useEffect(function () {
+    setShowMore(false);
+  }, [items]);
+  var listItems = react.useMemo(function () {
+    return _toConsumableArray(items).sort(function (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 /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "ax-checkList",
+    children: [listItems.map(function (item, index) {
+      return /*#__PURE__*/react.createElement(CheckItem, _objectSpread(_objectSpread({}, item), {}, {
+        key: index,
+        onClick: toggleSelection,
+        allowNegative: allowNegative,
+        selected: selection[item.id]
+      }));
+    }), maxCount > 0 && items.length > maxCount && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "ax-moreLink",
+      children: /*#__PURE__*/jsxRuntime.jsxs("span", {
+        role: "none",
+        className: "link",
+        onClick: function onClick() {
+          return setShowMore(!showMore);
+        },
+        children: ["...", t("core:action.".concat(showMore ? "less" : "more"))]
+      })
+    }), listItems.length === 0 && /*#__PURE__*/jsxRuntime.jsx(core.EmptyContent, {
+      className: "text-sm",
+      message: emptyMessage !== null && emptyMessage !== void 0 ? emptyMessage : t("checkList.empty")
+    })]
+  });
+};
+
+exports.CheckList = CheckList;

package/dist/cjs/hooks/useSelectableList.js

@@ -0,0 +1,54 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var react = require('react');
+
+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 useSelectableList = function useSelectableList(_ref) {
+  var items = _ref.items,
+    selected = _ref.selected,
+    nonselected = _ref.nonselected,
+    onChange = _ref.onChange,
+    onClick = _ref.onClick;
+  var selectionRef = react.useRef({});
+  var _useState = react.useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    selection = _useState2[0],
+    setSelection = _useState2[1];
+  var _useTransition = react.useTransition(),
+    _useTransition2 = _slicedToArray(_useTransition, 2),
+    startTransition = _useTransition2[1];
+  react.useEffect(function () {
+    selectionRef.current = items.reduce(function (ret, _ref2) {
+      var _selected$includes, _nonselected$includes;
+      var id = _ref2.id;
+      return _objectSpread(_objectSpread({}, ret), {}, _defineProperty({}, id, selected !== null && selected !== void 0 && (_selected$includes = selected.includes) !== null && _selected$includes !== void 0 && _selected$includes.call(selected, id) ? 1 : nonselected !== null && nonselected !== void 0 && (_nonselected$includes = nonselected.includes) !== null && _nonselected$includes !== void 0 && _nonselected$includes.call(nonselected, id) ? -1 : 0));
+    }, {});
+    setSelection(_objectSpread({}, selectionRef.current));
+  }, [items, selected, nonselected]);
+  var toggleSelection = react.useCallback(function (id) {
+    var isNegative = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var check = isNegative ? -1 : 1;
+    if (selectionRef.current[id] !== check) selectionRef.current[id] = check;else if (selectionRef.current[id] === check) selectionRef.current[id] = 0;
+    var change = [[], []];
+    Object.entries(selectionRef.current).forEach(function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+        id = _ref4[0],
+        select = _ref4[1];
+      return select === 1 ? change[0].push(id) : select === -1 ? change[1].push(id) : undefined;
+    });
+    setSelection(_objectSpread({}, selectionRef.current));
+    startTransition(function () {
+      onClick === null || onClick === void 0 || onClick(id, isNegative);
+      onChange === null || onChange === void 0 || onChange(change[0], change[1]);
+    });
+  }, []);
+  return {
+    selection: selection,
+    toggleSelection: toggleSelection
+  };
+};
+
+exports.useSelectableList = useSelectableList;

package/dist/cjs/index.js

@@ -1,6 +1,7 @@
 'use strict';
 
 require('./i18n/index.js');
+var CheckList = require('./checklist/CheckList.js');
 var Histogram = require('./histogram/Histogram.js');
 var JsonViewer = require('./json/JsonViewer.js');
 var Pagination = require('./pagination/Pagination.js');
@@ -13,6 +14,7 @@ var usePagination = require('./hooks/usePagination.js');
 
 
 
+exports.CheckList = CheckList.CheckList;
 exports.Histogram = Histogram.Histogram;
 exports.JsonViewer = JsonViewer.JsonViewer;
 exports.Pagination = Pagination.Pagination;

package/dist/cjs/table/Table.js

@@ -142,13 +142,13 @@ var Table = function Table(_ref) {
             "data-row": index,
             className: classNames("flex flex-nowrap datatable-row data-[hilight]:outline-1 -outline-offset-1 outline-primary-500", index % 2 ? "bg-even" : "bg-odd", onRowClick && "hover:bg-primary-50 active:bg-primary-100"),
             onClick: function onClick() {
-              return checkableRows && !onRowClick ? toggleChecked(data[keyProperty]) : onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(data);
+              return checkableRows && keyProperty && !onRowClick ? toggleChecked(data[keyProperty]) : onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(data);
             },
             "data-index": index,
             ref: measureElement,
             children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
               className: wrapperStart,
-              children: [checkableRows && /*#__PURE__*/jsxRuntime.jsx(CheckboxCell.CheckboxCell, {
+              children: [checkableRows && keyProperty && /*#__PURE__*/jsxRuntime.jsx(CheckboxCell.CheckboxCell, {
                 onClick: function onClick() {
                   return toggleChecked(data[keyProperty]);
                 },

package/dist/cjs/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/checklist/CheckList.js

@@ -0,0 +1,134 @@
+'use client';
+
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { Icon, CoreIcons, Badge, EmptyContent } from '@react-fabric/core';
+import { isString } from '@react-fabric/utilities';
+import { memo, Fragment, isValidElement, useState, useEffect, useMemo, createElement } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSelectableList } from '../hooks/useSelectableList.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var _excluded = ["items", "maxCount", "allowNegative", "emptyMessage", "sortItems"];
+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 CheckItem = /*#__PURE__*/memo(function (_ref) {
+  var id = _ref.id,
+    allowNegative = _ref.allowNegative,
+    selected = _ref.selected,
+    icon = _ref.icon,
+    label = _ref.label,
+    isDisabled = _ref.isDisabled,
+    _onClick = _ref.onClick,
+    badge = _ref.badge;
+  return /*#__PURE__*/jsxs("div", {
+    role: "none",
+    className: "ax-checkList__item",
+    "data-disabled": isDisabled,
+    onClick: function onClick() {
+      return _onClick(id, false);
+    },
+    onContextMenu: function onContextMenu(e) {
+      return [allowNegative && _onClick(id, true), e.preventDefault()];
+    },
+    children: [!allowNegative && /*#__PURE__*/jsx(Icon, {
+      "data-type": "checkbox",
+      className: "ax-checkList__checkbox",
+      "data-selected": selected === 1,
+      icon: selected ? CoreIcons.checkboxInt : CoreIcons.checkboxOff
+    }), allowNegative && /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx(Icon, {
+        "data-type": "multiple",
+        className: "ax-checkList__checkbox",
+        icon: selected === 1 ? CoreIcons.expand : selected === -1 ? CoreIcons.collapse : CoreIcons.checkboxOff,
+        "data-selected": selected
+      }), /*#__PURE__*/jsxs("div", {
+        className: "ax-checkList__checkbox",
+        children: [/*#__PURE__*/jsx(Icon, {
+          "data-type": "positive",
+          onClick: function onClick(e) {
+            return [(_onClick(id, false), e.stopPropagation())];
+          },
+          icon: selected === 1 ? CoreIcons.expandActive : CoreIcons.expand,
+          "data-selected": selected === 1
+        }), /*#__PURE__*/jsx(Icon, {
+          "data-type": "negative",
+          onClick: function onClick(e) {
+            return [(_onClick(id, true), e.stopPropagation())];
+          },
+          icon: selected === -1 ? CoreIcons.collapseActive : CoreIcons.collapse,
+          "data-selected": selected === -1
+        })]
+      })]
+    }), /*#__PURE__*/isValidElement(icon) && icon, isString(icon) && /*#__PURE__*/jsx(Icon, {
+      icon: icon
+    }), /*#__PURE__*/jsx("label", {
+      children: label
+    }), /*#__PURE__*/jsx(Badge, _objectSpread({}, badge))]
+  });
+});
+CheckItem.displayName = "CheckItem";
+var CheckList = function CheckList(_ref2) {
+  var _ref2$items = _ref2.items,
+    items = _ref2$items === void 0 ? [] : _ref2$items,
+    _ref2$maxCount = _ref2.maxCount,
+    maxCount = _ref2$maxCount === void 0 ? 0 : _ref2$maxCount,
+    allowNegative = _ref2.allowNegative,
+    emptyMessage = _ref2.emptyMessage,
+    _ref2$sortItems = _ref2.sortItems,
+    sortItems = _ref2$sortItems === void 0 ? true : _ref2$sortItems,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  var _useTranslation = useTranslation("data"),
+    t = _useTranslation.t;
+  var _useSelectableList = useSelectableList(_objectSpread({
+      items: items
+    }, props)),
+    selection = _useSelectableList.selection,
+    toggleSelection = _useSelectableList.toggleSelection;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showMore = _useState2[0],
+    setShowMore = _useState2[1];
+  useEffect(function () {
+    setShowMore(false);
+  }, [items]);
+  var listItems = useMemo(function () {
+    return _toConsumableArray(items).sort(function (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 /*#__PURE__*/jsxs("div", {
+    className: "ax-checkList",
+    children: [listItems.map(function (item, index) {
+      return /*#__PURE__*/createElement(CheckItem, _objectSpread(_objectSpread({}, item), {}, {
+        key: index,
+        onClick: toggleSelection,
+        allowNegative: allowNegative,
+        selected: selection[item.id]
+      }));
+    }), maxCount > 0 && items.length > maxCount && /*#__PURE__*/jsx("div", {
+      className: "ax-moreLink",
+      children: /*#__PURE__*/jsxs("span", {
+        role: "none",
+        className: "link",
+        onClick: function onClick() {
+          return setShowMore(!showMore);
+        },
+        children: ["...", t("core:action.".concat(showMore ? "less" : "more"))]
+      })
+    }), listItems.length === 0 && /*#__PURE__*/jsx(EmptyContent, {
+      className: "text-sm",
+      message: emptyMessage !== null && emptyMessage !== void 0 ? emptyMessage : t("checkList.empty")
+    })]
+  });
+};
+
+export { CheckList };

package/dist/esm/hooks/useSelectableList.js

@@ -0,0 +1,54 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useRef, useState, useTransition, useEffect, useCallback } from 'react';
+
+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 useSelectableList = function useSelectableList(_ref) {
+  var items = _ref.items,
+    selected = _ref.selected,
+    nonselected = _ref.nonselected,
+    onChange = _ref.onChange,
+    onClick = _ref.onClick;
+  var selectionRef = useRef({});
+  var _useState = useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    selection = _useState2[0],
+    setSelection = _useState2[1];
+  var _useTransition = useTransition(),
+    _useTransition2 = _slicedToArray(_useTransition, 2),
+    startTransition = _useTransition2[1];
+  useEffect(function () {
+    selectionRef.current = items.reduce(function (ret, _ref2) {
+      var _selected$includes, _nonselected$includes;
+      var id = _ref2.id;
+      return _objectSpread(_objectSpread({}, ret), {}, _defineProperty({}, id, selected !== null && selected !== void 0 && (_selected$includes = selected.includes) !== null && _selected$includes !== void 0 && _selected$includes.call(selected, id) ? 1 : nonselected !== null && nonselected !== void 0 && (_nonselected$includes = nonselected.includes) !== null && _nonselected$includes !== void 0 && _nonselected$includes.call(nonselected, id) ? -1 : 0));
+    }, {});
+    setSelection(_objectSpread({}, selectionRef.current));
+  }, [items, selected, nonselected]);
+  var toggleSelection = useCallback(function (id) {
+    var isNegative = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var check = isNegative ? -1 : 1;
+    if (selectionRef.current[id] !== check) selectionRef.current[id] = check;else if (selectionRef.current[id] === check) selectionRef.current[id] = 0;
+    var change = [[], []];
+    Object.entries(selectionRef.current).forEach(function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+        id = _ref4[0],
+        select = _ref4[1];
+      return select === 1 ? change[0].push(id) : select === -1 ? change[1].push(id) : undefined;
+    });
+    setSelection(_objectSpread({}, selectionRef.current));
+    startTransition(function () {
+      onClick === null || onClick === void 0 || onClick(id, isNegative);
+      onChange === null || onChange === void 0 || onChange(change[0], change[1]);
+    });
+  }, []);
+  return {
+    selection: selection,
+    toggleSelection: toggleSelection
+  };
+};
+
+export { useSelectableList };

package/dist/esm/index.js

@@ -1,6 +1,7 @@
 'use client';
 
 import './i18n/index.js';
+export { CheckList } from './checklist/CheckList.js';
 export { Histogram } from './histogram/Histogram.js';
 export { JsonViewer } from './json/JsonViewer.js';
 export { Pagination } from './pagination/Pagination.js';

package/dist/esm/table/Table.js

@@ -142,13 +142,13 @@ var Table = function Table(_ref) {
             "data-row": index,
             className: classNames("flex flex-nowrap datatable-row data-[hilight]:outline-1 -outline-offset-1 outline-primary-500", index % 2 ? "bg-even" : "bg-odd", onRowClick && "hover:bg-primary-50 active:bg-primary-100"),
             onClick: function onClick() {
-              return checkableRows && !onRowClick ? toggleChecked(data[keyProperty]) : onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(data);
+              return checkableRows && keyProperty && !onRowClick ? toggleChecked(data[keyProperty]) : onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(data);
             },
             "data-index": index,
             ref: measureElement,
             children: [/*#__PURE__*/jsxs("div", {
               className: wrapperStart,
-              children: [checkableRows && /*#__PURE__*/jsx(CheckboxCell, {
+              children: [checkableRows && keyProperty && /*#__PURE__*/jsx(CheckboxCell, {
                 onClick: function onClick() {
                   return toggleChecked(data[keyProperty]);
                 },

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/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,4 +1,5 @@
 import "./i18n";
+export { CheckList } from "./checklist/CheckList";
 export { Histogram } from "./histogram/Histogram";
 export { JsonViewer } from "./json/JsonViewer";
 export { Pagination } from "./pagination/Pagination";

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

@@ -4,7 +4,7 @@ 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";
@@ -30,7 +30,7 @@ export interface TableRef {
 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/data",
-  "version": "1.0.0-beta.3",
+  "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.3",
-    "@react-fabric/form": "^1.0.0-beta.3",
-    "@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": "2ce2a968f48d6ffc338f5da3a0cf67232d0c6864"
+  "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,6 +23,7 @@
 
 import "./i18n";
 
+export { CheckList } from "./checklist/CheckList";
 export { Histogram } from "./histogram/Histogram";
 export { JsonViewer } from "./json/JsonViewer";
 export { Pagination } from "./pagination/Pagination";

package/src/table/Table.tsx

@@ -160,7 +160,7 @@ export const Table = <T extends KeyValue = KeyValue>({
                     onRowClick && "hover:bg-primary-50 active:bg-primary-100",
                   )}
                   onClick={() =>
-                    checkableRows && !onRowClick
+                    checkableRows && keyProperty && !onRowClick
                       ? toggleChecked(data[keyProperty])
                       : onRowClick?.(data)
                   }
@@ -168,7 +168,7 @@ export const Table = <T extends KeyValue = KeyValue>({
                   ref={measureElement}
                 >
                   <div className={wrapperStart}>
-                    {checkableRows && (
+                    {checkableRows && keyProperty && (
                       <CheckboxCell
                         onClick={() => toggleChecked(data[keyProperty])}
                         state={

package/src/table/types.ts

@@ -37,7 +37,7 @@ export interface ColumnType<T = KeyValue>
   extends CssProp,
     IconProps,
     TestProps {
-  id: keyof T;
+  id: keyof T | string;
   label?: string;
   actions?: ReactElement;
   align?: "start" | "center" | "end";
@@ -72,7 +72,7 @@ export interface TableRef {
 export interface TableProps<T = KeyValue> extends RefProp<TableRef> {
   columns: Array<ColumnType<T>>;
   data: T[];
-  keyProperty: keyof T;
+  keyProperty?: keyof T;
   /**
    * checkable rows
    */

package/src/table/useVirtualTable.ts

@@ -33,8 +33,8 @@ type DataAction = { type: "check"; key: Key } | { type: "checkall" };
 
 export const useVirtualTable = (
   data: KeyValue[],
-  keyProperty: Key,
-  onCheckChanged: (checked: Key[]) => void,
+  keyProperty?: Key,
+  onCheckChanged?: (checked: Key[]) => void,
 ) => {
   // TODO: refactor data into item list, apply grouping if groupColumn provided
   // TODO: when grouping maintain map of group with children, {___GROUP___:true, label, items, open}
@@ -56,11 +56,11 @@ export const useVirtualTable = (
       if (action.type === "checkall") {
         if (state.allChecked !== 0) {
           state.checked = [];
-        } else {
+        } else if (keyProperty) {
           state.checked = data.map((item) => item[keyProperty]);
         }
       }
-      onCheckChanged(state.checked);
+      onCheckChanged?.(state.checked);
       return {
         ...state,
         allChecked: