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

package/dist/esm/virtual/List.js

@@ -1,6 +1,8 @@
 'use client';
 
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useDebounce, Skeleton } from '@react-fabric/core';
 import { debounce } from '@react-fabric/utilities';
 import { useVirtualizer } from '@tanstack/react-virtual';
@@ -10,6 +12,9 @@ import { useDeferredValue, useMemo, useRef, useEffect, useCallback, useState, us
 import { Scroller } from './Scroller.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
+var _excluded = ["items", "children", "fullWidth", "padding", "orientation", "defaultHeight", "defaultWidth", "hideScroller", "initialScroll", "loading", "onLoadMore", "onScroll", "listRef"];
+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 createItemList = memoizeOne(function (items) {
   return items;
 });
@@ -31,7 +36,8 @@ var _VirtualList = function _VirtualList(_ref) {
     loading = _ref.loading,
     onLoadMore = _ref.onLoadMore,
     onScroll = _ref.onScroll,
-    listRef = _ref.listRef;
+    listRef = _ref.listRef,
+    aria = _objectWithoutProperties(_ref, _excluded);
   var count = useDeferredValue(items.length);
   var extraSize = useMemo(function () {
     return onLoadMore ? 64 : 0;
@@ -154,10 +160,11 @@ var _VirtualList = function _VirtualList(_ref) {
       }
     };
   }, [virtualizer]);
-  return /*#__PURE__*/jsx("div", {
+  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
     ref: scrollerRef,
     onScroll: handleScroll,
-    className: classNames("area-content bg-base overflow-auto contain-strict"),
+    className: classNames("area-content bg-base overflow-auto contain-strict")
+  }, aria), {}, {
     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", {
@@ -209,7 +216,7 @@ var _VirtualList = function _VirtualList(_ref) {
         })
       })]
     })
-  });
+  }));
 };
 _VirtualList.displayName = "VirtualList";
 var GenericMemo = memo;

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

@@ -0,0 +1,30 @@
+import { type BadgeType, type TestProps } 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, TestProps {
+    /**
+     * 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/histogram/Histogram.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { type ColorType, type PaletteType } from "@react-fabric/core/dist/types/types";
+import { type ColorType, type PaletteType, type TestProps } from "@react-fabric/core/dist/types/types";
 interface HistogramItem {
     id: string;
     label: string;
@@ -7,7 +7,7 @@ interface HistogramItem {
     total?: number;
     disabled?: boolean;
 }
-export interface HistogramProps {
+export interface HistogramProps extends TestProps {
     /**
      * histogram items list
      */
@@ -37,5 +37,5 @@ export interface HistogramProps {
      */
     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 declare const Histogram: ({ items, total, color, sortBy, emptyTitle, emptyMessage, onClick, ...aria }: HistogramProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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 TableColumn, 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/AddColumn.d.ts

@@ -1,5 +1,5 @@
-import { type ColumnType } from "./types";
+import { type TableColumn } from "./types";
 export declare const AddColumn: ({ columns, onClick, }: {
-    columns: ColumnType[];
+    columns: TableColumn[];
     onClick: (id: string) => void;
 }) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,20 @@
+import { type TableColumn } from "./types";
+export declare const BodyRow: ({ rowKey, index, data, keyProperty, measureElement, state, hideableColumns, wrapperStart, wrapperEnd, onRowClick, checkableRows, checked, toggleChecked, canExpand, expanded, toggleExpand, expandRow, }: {
+    rowKey: Key;
+    index: number;
+    data: KeyValue;
+    keyProperty?: Key;
+    measureElement: AnyObject;
+    state: KeyValue<TableColumn[]>;
+    hideableColumns?: boolean;
+    wrapperStart: string;
+    wrapperEnd: string;
+    checkableRows?: boolean;
+    checked: 0 | 1;
+    onRowClick?: AnyObject;
+    canExpand?: AnyObject;
+    expandRow?: AnyObject;
+    expanded: boolean;
+    toggleExpand: (key: Key) => void;
+    toggleChecked: (key: Key) => void;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +1,2 @@
-import { type ColumnType } from "./types";
-export declare const EmptyCell: ({ id, width: _width, maxWidth, minWidth, }: ColumnType) => import("react/jsx-runtime").JSX.Element;
+import { type TableColumn } from "./types";
+export declare const EmptyCell: ({ id, width: _width, maxWidth, minWidth, }: TableColumn) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +1,2 @@
-import { type ColumnType, type TableProps } from "./types";
-export declare const HeaderCell: ({ id, label, icon, iconBg, iconColor, rtlFlip, actions, locked, sortable, resizable, width: _width, maxWidth, minWidth, sort, onSort, }: ColumnType & Pick<TableProps, "sort" | "onSort">) => import("react/jsx-runtime").JSX.Element;
+import { type TableColumn, type TableProps } from "./types";
+export declare const HeaderCell: ({ id, label, icon, iconBg, iconColor, rtlFlip, actions, locked, tooltip, sortable, resizable, width: _width, maxWidth, minWidth, sort, onSort, }: TableColumn & Pick<TableProps, "sort" | "onSort">) => import("react/jsx-runtime").JSX.Element;

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, initialScroll, hideableColumns, sort, loading, emptyDisplay, canExpand, children, onSort, onScroll, onRowClick, onCheckedChanged, }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,11 +1,12 @@
-import { type CssProp, type IconProps, type TestProps } from "@react-fabric/core/dist/types/types";
+import { type CssProp, type Elements, 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;
+export interface TableColumn<T = KeyValue> extends CssProp, IconProps, TestProps {
+    id: keyof T | string;
     label?: string;
+    tooltip?: string;
     actions?: ReactElement;
     align?: "start" | "center" | "end";
     locked?: "start" | "end";
@@ -20,12 +21,19 @@ export interface ColumnType<T = KeyValue> extends CssProp, IconProps, TestProps
     maxWidth?: string | number;
     dataType?: "string" | "number" | "boolean" | "datetime" | "date" | "time" | "unknown";
     format?: string;
-    renderer?: (value: AnyObject, data: T) => void;
+    valueMap?: KeyValue;
+    renderer?: (value: AnyObject, data: T, index: number) => Elements<AnyObject>;
 }
-export interface TableProps<T = KeyValue> {
-    columns: Array<ColumnType<T>>;
+export interface TableRef {
+    hilight: (row: number) => void;
+    unhilight: () => void;
+    scrollTo: (row: number) => void;
+}
+export interface TableProps<T = KeyValue> extends RefProp<TableRef> {
+    columns: Array<TableColumn<T>>;
     data: T[];
-    keyProperty: keyof T;
+    keyProperty?: keyof T;
+    emptyDisplay?: ReactElement;
     /**
      * checkable rows
      */
@@ -45,4 +53,8 @@ export interface TableProps<T = KeyValue> {
     loading?: boolean;
     hideableColumns?: boolean;
     onRowClick?: (data: T) => void;
+    initialScroll?: number;
+    onScroll?: (firstItem: number) => void;
+    canExpand?: (record: T) => boolean;
+    children?: (record: T) => Elements<AnyObject>;
 }

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

@@ -1,10 +1,10 @@
-import { type ColumnType } from "./types";
-export declare const useTableColumns: (columns: ColumnType[]) => {
+import { type TableColumn } from "./types";
+export declare const useTableColumns: (columns: TableColumn[]) => {
     state: {
-        start: ColumnType<KeyValue<any>>[];
-        end: ColumnType<KeyValue<any>>[];
-        cols: ColumnType<KeyValue<any>>[];
-        columns: ColumnType[];
+        start: TableColumn<KeyValue<any>>[];
+        end: TableColumn<KeyValue<any>>[];
+        cols: TableColumn<KeyValue<any>>[];
+        columns: TableColumn[];
     };
     onHide: (id: string) => void;
 };

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

@@ -1,15 +1,19 @@
 /// <reference types="react" />
 interface DataState {
+    expanded: Key[];
     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;
     getData: (index: number) => KeyValue<any>;
+    virtualizer: import("@tanstack/virtual-core").Virtualizer<HTMLDivElement, Element>;
+    top: number | undefined;
     totalSize: () => number;
     measureElement: (node: Element | null | undefined) => void;
+    toggleExpand: (key: Key) => void;
     toggleChecked: (key: Key) => void;
     toggleAllChecked: () => void;
 };

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/dist/types/virtual/Gallery.d.ts

@@ -1,10 +1,11 @@
+import { type TestProps } from "@react-fabric/core/dist/types/types";
 import { type ReactElement, type Ref } from "react";
 export interface VirtualGalleryRef {
     scrollToItem: (index: number) => void;
     hilight: (index: number) => void;
     unhilight: () => void;
 }
-export interface VirtualGalleryProps<T> {
+export interface VirtualGalleryProps<T> extends TestProps {
     children: (props: {
         data: T;
         index: number;
@@ -50,6 +51,6 @@ export interface VirtualGalleryProps<T> {
     onScroll?: (top: number) => void;
 }
 export declare const VirtualGallery: {
-    <T extends KeyValue<any>>({ items, children, columns, padding, defaultHeight: height, defaultWidth: width, hideScroller, initialScroll, loading, onLoadMore, onScroll, galleryRef, }: VirtualGalleryProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends KeyValue<any>>({ items, children, columns, padding, defaultHeight: height, defaultWidth: width, hideScroller, initialScroll, loading, onLoadMore, onScroll, galleryRef, ...aria }: VirtualGalleryProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/types/virtual/List.d.ts

@@ -1,10 +1,11 @@
+import { type TestProps } from "@react-fabric/core/dist/types/types";
 import { type ReactElement, type Ref } from "react";
 export interface VirtualListRef {
     scrollToItem: (index: number) => void;
     hilight: (index: number) => void;
     unhilight: () => void;
 }
-export interface VirtualListProps<T> {
+export interface VirtualListProps<T> extends TestProps {
     children: (props: {
         data: T;
         index: number;
@@ -54,6 +55,6 @@ export interface VirtualListProps<T> {
     onScroll?: (top: number) => void;
 }
 export declare const VirtualList: {
-    <T extends KeyValue<any>>({ items, children, fullWidth, padding, orientation, defaultHeight: height, defaultWidth: width, hideScroller, initialScroll, loading, onLoadMore, onScroll, listRef, }: VirtualListProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends KeyValue<any>>({ items, children, fullWidth, padding, orientation, defaultHeight: height, defaultWidth: width, hideScroller, initialScroll, loading, onLoadMore, onScroll, listRef, ...aria }: VirtualListProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/data",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.11",
   "description": "RUF: Data package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -33,9 +33,10 @@
     "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.11",
+    "@react-fabric/date": "^1.0.0-beta.11",
+    "@react-fabric/form": "^1.0.0-beta.11",
+    "@react-fabric/utilities": "^1.0.0-beta.11",
     "@tanstack/react-virtual": "^3.8.6",
     "classnames": "^2.5.1",
     "color": "^4.2.3",
@@ -51,5 +52,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "e0712d7ea2c945de876bef813b5d2dcec1218ed7"
+  "gitHead": "c113890832384265335f0572bfad9438e811917f"
 }

package/src/checklist/CheckList.tsx

@@ -0,0 +1,222 @@
+/*
+ * 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,
+  type TestProps,
+} from "@react-fabric/core/dist/types/types";
+import { isString } from "@react-fabric/utilities";
+import {
+  Fragment,
+  isValidElement,
+  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, TestProps {
+  /**
+   * 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;
+  }
+> = ({
+  id,
+  allowNegative,
+  selected,
+  icon,
+  label,
+  isDisabled,
+  onClick,
+  badge,
+  ...aria
+}: 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(),
+      ]}
+      {...aria}
+    >
+      {!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>
+  );
+};
+
+export const CheckList: FC<CheckListProps> = ({
+  items = [],
+  maxCount = 0,
+  allowNegative,
+  emptyMessage,
+  sortItems = true,
+  selected,
+  nonselected,
+  onChange,
+  onClick,
+  ...aria
+}: CheckListProps) => {
+  const { t } = useTranslation("data");
+  const { selection, toggleSelection } = useSelectableList({
+    items,
+    selected,
+    nonselected,
+    onChange,
+    onClick,
+  });
+  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 {...aria}>
+      {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>
+  );
+};