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

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>
+  );
+};

package/src/histogram/Histogram.tsx

@@ -31,6 +31,7 @@ import {
 import {
   type ColorType,
   type PaletteType,
+  type TestProps,
 } from "@react-fabric/core/dist/types/types";
 import { compareValues, Format } from "@react-fabric/utilities";
 import classNames from "classnames";
@@ -49,7 +50,7 @@ interface HistogramItem {
   disabled?: boolean;
 }
 
-export interface HistogramProps {
+export interface HistogramProps extends TestProps {
   /**
    * histogram items list
    */
@@ -88,6 +89,7 @@ export const Histogram = ({
   emptyTitle,
   emptyMessage,
   onClick,
+  ...aria
 }: HistogramProps) => {
   const { t } = useTranslation("data");
   const maxTotal = useMemo(() => {
@@ -104,6 +106,7 @@ export const Histogram = ({
   return (
     <div
       className={classes.histogram}
+      {...aria}
       style={
         {
           "--color": `var(--${color})`,
@@ -125,8 +128,10 @@ export const Histogram = ({
           className={classNames(
             "relative cursor-pointer flex flex-nowrap items-center select-none overflow-hidden min-h-6 my-px",
             classes.histoLabel,
-            (item.count === 0 || item.disabled) && "pointer-events-none",
+            ((item.total ?? item.count) === 0 || item.disabled) &&
+              "pointer-events-none",
           )}
+          data-testid={item.id}
           onClick={(e) => [onClick?.(item.id), e.stopPropagation()]}
         >
           <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 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";
 

package/src/table/AddColumn.tsx

@@ -0,0 +1,55 @@
+/*
+ * 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 { CoreIcons, Dropdown, Icon, Menu, MenuItem } from "@react-fabric/core";
+import { type TableColumn } from "./types";
+
+export const AddColumn = ({
+  columns,
+  onClick,
+}: {
+  columns: TableColumn[];
+  onClick: (id: string) => void;
+}) => {
+  return (
+    <div className="group font-medium w-6 flex flex-nowrap text-start items-end">
+      <Dropdown placement="bottom-end">
+        <Icon
+          icon={CoreIcons.insert}
+          className="p-1 rounded-t rounded-b-none hover:outline"
+        />
+        <Menu className="text-sm" onClick={onClick}>
+          {columns.map((col) => (
+            <MenuItem
+              key={String(col.id)}
+              id={String(col.id)}
+              data-dropdown-dismiss="false"
+              label={`${col.label ?? String(col.id)}`}
+              icon={!col.hidden ? CoreIcons.tick : ""}
+            />
+          ))}
+        </Menu>
+      </Dropdown>
+    </div>
+  );
+};

package/src/table/BodyCell.tsx

@@ -21,23 +21,64 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+import { DateDisplay } from "@react-fabric/date";
+import { Format, getByPath, isTrue } from "@react-fabric/utilities";
 import classNames from "classnames";
-import { type ColumnType } from "./types";
+import { useMemo } from "react";
+import { useTableContext } from "./Context";
+import {
+  COL_DEFAULT_WIDTH,
+  COL_MAX_WIDTH,
+  COL_MIN_WIDTH,
+  type TableColumn,
+} from "./types";
 
 export const BodyCell = ({
   column,
   item,
+  index,
 }: {
-  column: ColumnType;
+  column: TableColumn;
   item: KeyValue;
+  index: number;
 }) => {
+  const { widths } = useTableContext();
+
+  const width = useMemo(
+    () => widths.get(column.id.toString()) ?? column.width,
+    [widths, column],
+  );
+
+  const content = useMemo(() => {
+    const value = getByPath(item, column.id.toString());
+    if (column.renderer != null) {
+      return column.renderer(item[column.id], item, index);
+    }
+    if (column.dataType === "boolean") {
+      const map = column.valueMap ?? { true: "Yes", false: "no" };
+      return map[`${isTrue(value) ? "true" : "false"}`];
+    }
+    if (column.valueMap != null) {
+      if (column.dataType === "string" && value in column.valueMap) {
+        return column.valueMap[value];
+      }
+    }
+    if (column.dataType === "date") {
+      return <DateDisplay date={value} format={column.format} />;
+    }
+    if (column.dataType === "number") {
+      return Format.number(value, column.format);
+    }
+    return value ?? "";
+  }, [item, column]);
+
   return (
     <div
       className="overflow-hidden bg-inherit start-0"
       style={{
-        width: column.width ?? "12rem",
-        minWidth: column.minWidth ?? "2rem",
-        maxWidth: column.maxWidth ?? "32rem",
+        width: width ?? COL_DEFAULT_WIDTH,
+        minWidth: column.minWidth ?? COL_MIN_WIDTH,
+        maxWidth: column.maxWidth ?? COL_MAX_WIDTH,
       }}
     >
       <div
@@ -47,7 +88,7 @@ export const BodyCell = ({
           column.align === "end" && "text-end",
         )}
       >
-        {column.renderer?.(item[column.id], item) ?? item[column.id]}
+        {content}
       </div>
     </div>
   );

package/src/table/BodyRow.tsx

@@ -0,0 +1,142 @@
+/*
+ * 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 classNames from "classnames";
+import { BodyCell } from "./BodyCell";
+import { CheckboxCell } from "./CheckboxCell";
+import { type TableColumn } from "./types";
+import { CoreIcons, Icon } from "@react-fabric/core";
+
+export 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;
+}) => {
+  return (
+    <div
+      ref={measureElement}
+      data-index={index}
+      className={index % 2 ? "bg-even" : "bg-odd"}
+    >
+      <div
+        role="none"
+        data-row={index}
+        className={classNames(
+          "flex flex-nowrap datatable-row data-[hilight]:outline-1 -outline-offset-1 outline-primary-500",
+          onRowClick && "hover:bg-primary-50 active:bg-primary-100",
+        )}
+        onClick={() =>
+          checkableRows && keyProperty && !onRowClick
+            ? toggleChecked(data[keyProperty])
+            : onRowClick?.(data)
+        }
+      >
+        <div className={wrapperStart}>
+          {!!canExpand && (
+            <div
+              className={classNames(
+                "group font-medium w-6 flex flex-nowrap text-start items-center",
+                !canExpand(data) && "pointer-events-none opacity-35",
+              )}
+            >
+              <Icon
+                className="p-1 text-tint-700 hover:text-primary-600"
+                icon={expanded ? CoreIcons.collapse : CoreIcons.expand}
+                onClick={(e) => [
+                  keyProperty && toggleExpand(data[keyProperty]),
+                  e.stopPropagation(),
+                ]}
+              />
+            </div>
+          )}
+          {checkableRows && keyProperty && (
+            <CheckboxCell
+              onClick={() => toggleChecked(data[keyProperty])}
+              state={checked}
+            />
+          )}
+          {state.start?.map((col, ids) => (
+            <BodyCell
+              key={`${String(rowKey)}:${ids}`}
+              column={col}
+              item={data}
+              index={ids}
+            />
+          ))}
+        </div>
+        {state.cols?.map((col, idc) => (
+          <BodyCell
+            key={`${String(rowKey)}:${idc}`}
+            column={col}
+            item={data}
+            index={idc}
+          />
+        ))}
+        <div className={wrapperEnd}>
+          {state.end?.map((col, ide) => (
+            <BodyCell
+              key={`${String(rowKey)}:${ide}`}
+              column={col}
+              item={data}
+              index={ide}
+            />
+          ))}
+          {hideableColumns && <div className="w-6" />}
+        </div>
+      </div>
+      {expanded && expandRow(data)}
+    </div>
+  );
+};

package/src/table/CheckboxCell.tsx

@@ -0,0 +1,48 @@
+/*
+ * 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 { CoreIcons, Icon } from "@react-fabric/core";
+
+export const CheckboxCell = ({
+  state,
+  onClick,
+}: {
+  state: 0 | 1 | 2;
+  onClick?: () => void;
+}) => {
+  return (
+    <div className="group font-medium border-e w-6 flex flex-nowrap text-start items-center">
+      <Icon
+        icon={
+          state === 2
+            ? CoreIcons.checkboxInt
+            : state === 1
+              ? CoreIcons.checkboxOn
+              : CoreIcons.checkboxOff
+        }
+        className="p-1 text-tint-700 hover:text-primary-600"
+        onClick={(e) => [onClick?.(), e.stopPropagation()]}
+      />
+    </div>
+  );
+};