@react-fabric/data 1.0.0-beta.9 → 1.0.2

package/src/checklist/CheckList.tsx

@@ -21,32 +21,19 @@
  * 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 { Badge, EmptyContent, Icon } from "@react-fabric/core";
+import type { BadgeType } from "@react-fabric/core/dist/types/components/badge/Badge";
+import { type TestProps } from "@react-fabric/core/dist/types/types";
+import { Fragment, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import {
-  useSelectableList,
-  type SelectableProps,
-} from "../hooks/useSelectableList";
+import { useSelectableList, type SelectableProps } from "../hooks/useSelectableList";
 
-export interface CheckListItem extends KeyValue {
+export interface CheckListItem {
   id: string;
   label: string;
-  icon?: string;
+  icon?: string | React.ReactElement;
   badge?: BadgeType;
-  isDisabled?: boolean;
+  disabled?: boolean;
 }
 
 export interface CheckListProps extends SelectableProps, TestProps {
@@ -70,43 +57,34 @@ export interface CheckListProps extends SelectableProps, TestProps {
   sortItems?: boolean;
 }
 
-const CheckItem: FC<
-  Omit<CheckListItem, "selected"> & {
-    selected?: number;
-    allowNegative?: boolean;
-  }
-> = ({
+function CheckItem({
   id,
   allowNegative,
   selected,
   icon,
   label,
-  isDisabled,
+  disabled,
   onClick,
   badge,
-  ...aria
 }: Omit<CheckListItem, "selected"> & {
+  onClick: (id: string, isNegative: boolean) => void;
   selected?: number;
   allowNegative?: boolean;
-}) => {
+}) {
   return (
     <div
       role="none"
       className="ax-checkList__item"
-      data-disabled={isDisabled}
+      data-disabled={disabled}
       onClick={() => onClick(id, false)}
-      onContextMenu={(e) => [
-        allowNegative && onClick(id, true),
-        e.preventDefault(),
-      ]}
-      {...aria}
+      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}
+          icon={selected ? "icon-[mdi--checkbox-marked]" : "icon-[mdi--checkbox-blank-outline]"}
         />
       )}
       {allowNegative && (
@@ -116,40 +94,66 @@ const CheckItem: FC<
             className="ax-checkList__checkbox"
             icon={
               selected === 1
-                ? CoreIcons.expand
+                ? "icon-[mdi--plus-box-outline]"
                 : selected === -1
-                  ? CoreIcons.collapse
-                  : CoreIcons.checkboxOff
+                  ? "icon-[mdi--minus-box-outline]"
+                  : "icon-[mdi--checkbox-blank-outline]"
             }
             data-selected={selected}
           />
           <div className="ax-checkList__checkbox">
-            <Icon
-              data-type="positive"
+            <button
+              type="button"
+              className="size-fit leading-0 cursor-pointer"
               onClick={(e) => [(onClick(id, false), e.stopPropagation())]}
-              icon={selected === 1 ? CoreIcons.expandActive : CoreIcons.expand}
-              data-selected={selected === 1}
-            />
-            <Icon
-              data-type="negative"
+            >
+              <Icon
+                data-type="positive"
+                icon={selected === 1 ? "icon-[mdi--plus-box]" : "icon-[mdi--plus-box-outline]"}
+                data-selected={selected === 1}
+              />
+            </button>
+            <button
+              type="button"
+              className="size-fit leading-0 cursor-pointer"
               onClick={(e) => [(onClick(id, true), e.stopPropagation())]}
-              icon={
-                selected === -1 ? CoreIcons.collapseActive : CoreIcons.collapse
-              }
-              data-selected={selected === -1}
-            />
+            >
+              <Icon
+                data-type="negative"
+                icon={selected === -1 ? "icon-[mdi--minus-box]" : "icon-[mdi--minus-box-outline]"}
+                data-selected={selected === -1}
+              />
+            </button>
           </div>
         </Fragment>
       )}
-      {isValidElement(icon) && icon}
-      {isString(icon) && <Icon icon={icon} />}
+      {icon && <Icon icon={icon} />}
       <label>{label}</label>
-      <Badge {...badge} />
+      {badge && <Badge {...(badge as KeyValue)} />}
     </div>
   );
-};
+}
 
-export const CheckList: FC<CheckListProps> = ({
+/**
+ * CheckList component to display a list of selectable items with checkboxes.
+ * It supports selection, deselection, and allows for negative selections.
+ *
+ * @example
+ * ```jsx
+ * <CheckList
+ *   items={[
+ *     { id: "1", label: "Item 1", icon: "icon1" },
+ *     { id: "2", label: "Item 2", icon: "icon2", badge: { text: "New" } },
+ *   ]}
+ *   maxCount={5}
+ *   allowNegative={true}
+ *   emptyMessage="No items available"
+ *   onChange={(selectedItems) => console.log(selectedItems)}
+ *   onClick={(itemId, isNegative) => console.log(itemId, isNegative)}
+ * />
+ * ```
+ */
+export function CheckList({
   items = [],
   maxCount = 0,
   allowNegative,
@@ -160,7 +164,7 @@ export const CheckList: FC<CheckListProps> = ({
   onChange,
   onClick,
   ...aria
-}: CheckListProps) => {
+}: CheckListProps) {
   const { t } = useTranslation("data");
   const { selection, toggleSelection } = useSelectableList({
     items,
@@ -172,6 +176,7 @@ export const CheckList: FC<CheckListProps> = ({
   const [showMore, setShowMore] = useState(false);
 
   useEffect(() => {
+    // eslint-disable-next-line @eslint-react/set-state-in-effect
     setShowMore(false);
   }, [items]);
 
@@ -193,8 +198,9 @@ export const CheckList: FC<CheckListProps> = ({
     <div {...aria}>
       {listItems.map((item, index) => (
         <CheckItem
-          {...item}
+          // eslint-disable-next-line @eslint-react/no-array-index-key
           key={index}
+          {...item}
           onClick={toggleSelection}
           allowNegative={allowNegative}
           selected={selection[item.id]}
@@ -202,21 +208,12 @@ export const CheckList: FC<CheckListProps> = ({
       ))}
       {maxCount > 0 && items.length > maxCount && (
         <div className="ax-moreLink">
-          <span
-            role="none"
-            className="link"
-            onClick={() => setShowMore(!showMore)}
-          >
+          <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")}
-        />
-      )}
+      {listItems.length === 0 && <EmptyContent className="text-sm" message={emptyMessage ?? t("checkList.empty")} />}
     </div>
   );
-};
+}

package/src/histogram/Histogram.tsx

@@ -21,23 +21,12 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import {
-  ActionLabel,
-  Button,
-  CoreIcons,
-  EmptyContent,
-  Icon,
-} from "@react-fabric/core";
-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";
+import { ActionLabel, Button, EmptyContent, Icon } from "@react-fabric/core";
+import type { CustomColors, TestProps } from "@react-fabric/core/dist/types/types";
+import { cn, compareValues, Format } from "@react-fabric/utilities";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import classes from "./Histogram.module.css";
+import { getColor } from "../utils/getColor";
 
 const emptyIcon =
   "M20.84 22.73L11.11 13H3V11H9.11L6.11 8H3V6H4.11L1.11 3L2.39 1.73L22.11 21.46L20.84 22.73M15 11H14.2L15 11.8V11M21 8V6H9.2L11.2 8H21M3 18H9V16H3V18Z";
@@ -62,7 +51,7 @@ export interface HistogramProps extends TestProps {
   /**
    * histogram bar color
    */
-  color?: ColorType | PaletteType;
+  color?: CustomColors;
   /**
    * sorted list
    */
@@ -70,27 +59,49 @@ export interface HistogramProps extends TestProps {
   /**
    * title when histo list is empty
    */
-  emptyTitle?: string | JSX.Element;
+  emptyTitle?: string | React.ReactElement;
   /**
    * message when histo list is empty
    */
-  emptyMessage?: string | JSX.Element;
+  emptyMessage?: string | React.ReactElement;
   /**
    * handle histo click
    */
   onClick?: (id: string, negative?: true) => void;
 }
 
-export const Histogram = ({
+/**
+ * Histogram component displays a bar chart of items with counts.
+ * It allows users to visualize the distribution of counts across different items.
+ * The component supports sorting, custom colors, and click handling for each item.
+ * It also provides an empty state when there are no items to display.
+ *
+ * @example
+ * ```jsx
+ * <Histogram
+ *   items={[
+ *     { id: "1", label: "Item 1", count: 10 },
+ *     { id: "2", label: "Item 2", count: 20 },
+ *     { id: "3", label: "Item 3", count: 5, disabled: true },
+ *   ]}
+ *   total={30}
+ *   color="primary-500"
+ *   sortBy="count"
+ *   emptyTitle="No Data Available"
+ *   emptyMessage="Please check back later."
+ *   onClick={(id, negative) => console.log(`Clicked on ${id}`, negative ? "Negative" : "Positive")}
+ * />
+ * ```
+ */
+export function Histogram({
   items = [],
   total,
-  color = "primary",
+  color = "primary-500",
   sortBy = "count",
   emptyTitle,
   emptyMessage,
   onClick,
-  ...aria
-}: HistogramProps) => {
+}: HistogramProps) {
   const { t } = useTranslation("data");
   const maxTotal = useMemo(() => {
     if (total) return total;
@@ -98,19 +109,16 @@ export const Histogram = ({
   }, [total, items]);
 
   const sorted = useMemo(() => {
-    return items.sort(
-      compareValues(sortBy === "label" ? "asc" : "desc", sortBy),
-    );
+    return items.sort(compareValues(sortBy === "label" ? "asc" : "desc", sortBy));
   }, [items, sortBy]);
 
   return (
     <div
-      className={classes.histogram}
-      {...aria}
+      className={"fabric-histogram from-0% to-100%"}
       style={
         {
-          "--color": `var(--${color})`,
-        } as AnyObject
+          "--color": getColor(color),
+        } as React.CSSProperties
       }
     >
       {sorted.length === 0 && (
@@ -125,20 +133,16 @@ export const Histogram = ({
           role="none"
           key={item.id}
           data-disabled={item.count === 0 || item.disabled}
-          className={classNames(
+          className={cn(
             "relative cursor-pointer flex flex-nowrap items-center select-none overflow-hidden min-h-6 my-px",
-            classes.histoLabel,
-            ((item.total ?? item.count) === 0 || item.disabled) &&
-              "pointer-events-none",
+            "fabric-histoLabel",
+            ((item.total ?? item.count) === 0 || item.disabled) && "pointer-events-none",
           )}
           data-testid={item.id}
           onClick={(e) => [onClick?.(item.id), e.stopPropagation()]}
         >
           <div
-            className={classNames(
-              "absolute z-0 inset-0 opacity-50 min-w-2 ltr:bg-gradient-to-r rtl:bg-gradient-to-l from-0% to-100%",
-              classes.histoBar,
-            )}
+            className={cn("absolute z-0 inset-0 opacity-50 min-w-2 ltr:bg-linear-to-r rtl:bg-linear-to-l", "fabric-histoBar")}
             style={{
               width: `${Math.min(item.count / maxTotal, 1) * 100}%`,
             }}
@@ -150,32 +154,27 @@ export const Histogram = ({
                 key="negative"
                 color="danger"
                 size="sm"
-                icon={CoreIcons.funnelMinus}
+                icon="icon-[mdi--filter-minus]"
                 aria-label="Filter Negative"
-                onClick={() => onClick?.(item.id, true)}
+                onClick={(e) => (e?.stopPropagation(), onClick?.(item.id, true))}
               />,
               <Button
                 key="positive"
                 color="primary"
                 size="sm"
-                icon={CoreIcons.funnelPlus}
+                icon="icon-[mdi--filter-plus]"
                 aria-label="Filter"
-                onClick={() => onClick?.(item.id)}
+                onClick={(e) => (e?.stopPropagation(), onClick?.(item.id))}
               />,
             ]}
           >
             {item.label}
           </ActionLabel>
-          <span
-            className={classNames(
-              "z-1 rounded-full text-xs font-medium px-2 py-1 leading-none",
-              classes.histoBadge,
-            )}
-          >
+          <span className={cn("z-1 rounded-full text-xs font-medium px-2 py-1 leading-none", "fabric-histoBadge")}>
             {Format.number(item.count)}
           </span>
         </div>
       ))}
     </div>
   );
-};
+}

package/src/hooks/useFilteredList.tsx

@@ -21,26 +21,28 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { isString, matchString } from "@react-fabric/utilities";
-import {
-  useCallback,
-  useDeferredValue,
-  useEffect,
-  useState,
-  useTransition,
-} from "react";
+import { isArray, isString, matchString } from "@react-fabric/utilities";
+import { useCallback, useDeferredValue, useEffect, useState, useTransition } from "react";
 
-const filterList = (
-  items: AnyObject[],
-  query: AnyObject = "",
-  matcher?: AnyObject,
-) => {
-  const newList: AnyObject[] = [];
+function filterList<T extends AnyObject = KeyValue>(
+  items: Array<T & { label?: string }>,
+  query: string | string[] = "",
+  matchAll: boolean = true,
+  matcher?: (option: T, query: string | string[]) => boolean,
+) {
+  const newList: T[] = [];
   items.forEach((item) => {
     if (matcher) {
-      return matcher?.(item, query) && newList.push(item);
+      if (matcher?.(item, query)) return newList.push(item);
     }
-    if (query && isString(query)) {
+    if (query && isArray(query) && query.length > 0) {
+      if (matchAll && query.every((q) => matchString(item.label ?? item.toString(), q))) {
+        return newList.push(item);
+      }
+      if (!matchAll && query.some((q) => matchString(item.label ?? item.toString(), q))) {
+        return newList.push(item);
+      }
+    } else if (query && isString(query)) {
       if (matchString(item.label ?? item.toString(), query)) {
         return newList.push(item);
       }
@@ -49,30 +51,111 @@ const filterList = (
     }
   });
   return newList;
-};
+}
+
+interface RetType<T, Q> {
+  onSearch: (query?: Q) => void;
+  query: Q;
+  filteredList: T[];
+  isSearching: boolean;
+}
+
+/**
+ * Custom hook to filter a list of items based on a query.
+ * It provides a way to search through the items and returns the filtered list.
+ * The hook uses a deferred value to optimize performance during transitions.
+ * It also allows for a custom matcher function to define how items should be matched against the query.
+ *
+ * @param items - The list of items to filter.
+ * @param matchAll - Match all phrases in the query list against the items.
+ * @returns An object containing the search function, current query, filtered list, and a boolean indicating if a search is in progress.
+ *
+ * @example
+ * ```jsx
+ * useFilteredList(items, (item, query) => {
+ *   return item.name.includes(query);
+ * });
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/data-usefilteredlist--docs}
+ */
+export function useFilteredList<T extends AnyObject = KeyValue, Q extends AnyObject = string>(
+  items: T[],
+  matchAll?: boolean,
+): RetType<T, Q>;
+
+/**
+ * Custom hook to filter a list of items based on a query.
+ * It provides a way to search through the items and returns the filtered list.
+ * The hook uses a deferred value to optimize performance during transitions.
+ * It also allows for a custom matcher function to define how items should be matched against the query.
+ *
+ * @param items - The list of items to filter.
+ * @param matcher - An optional function to match items against the query.
+ * @returns An object containing the search function, current query, filtered list, and a boolean indicating if a search is in progress.
+ *
+ * @example
+ * ```jsx
+ * useFilteredList(items, (item, query) => {
+ *   return item.name.includes(query);
+ * });
+ * ```
+ */
+export function useFilteredList<T extends AnyObject = KeyValue, Q extends AnyObject = string>(
+  items: T[],
+  matcher?: (item: T, query: Q) => boolean,
+): RetType<T, Q>;
+
+/**
+ * Custom hook to filter a list of items based on a query.
+ * It provides a way to search through the items and returns the filtered list.
+ * The hook uses a deferred value to optimize performance during transitions.
+ * It also allows for a custom matcher function to define how items should be matched against the query.
+ *
+ * @param items - The list of items to filter.
+ * @param matchAll - Match all phrases in the query list against the items.
+ * @param matcher - An optional function to match items against the query.
+ * @returns An object containing the search function, current query, filtered list, and a boolean indicating if a search is in progress.
+ *
+ * @example
+ * ```jsx
+ * useFilteredList(items, (item, query) => {
+ *   return item.name.includes(query);
+ * });
+ * ```
+ */
+export function useFilteredList<T extends AnyObject = KeyValue, Q extends AnyObject = string>(
+  items: T[],
+  matchAll?: boolean,
+  matcher?: (item: T, query: Q) => boolean,
+): RetType<T, Q>;
 
-export const useFilteredList = <
-  T extends AnyObject = KeyValue,
-  Q extends AnyObject = string,
->(
+export function useFilteredList<T extends AnyObject = KeyValue, Q extends AnyObject = string>(
   items: T[],
+  matchAll?: boolean | ((item: T, query: Q) => boolean),
   matcher?: (item: T, query: Q) => boolean,
-) => {
+) {
   const [query, setQuery] = useState<Q>();
   const _items = useDeferredValue(items ?? []);
-  const [filteredList, setFilteredList] = useState<T[]>([]);
+  const [filteredList, setFilteredList] = useState<T[]>(() => []);
   const [isSearching, startTransition] = useTransition();
 
+  const matchingAll = typeof matchAll === "boolean" ? matchAll : true;
+  const matcherFn = typeof matchAll === "function" ? matchAll : matcher;
+
   const filterItems = useCallback(
-    (items: T[], query?: Q) =>
-      startTransition(() => setFilteredList(filterList(items, query, matcher))),
+    (items: T[], query?: Q, matchingAll?: boolean) =>
+      // eslint-disable-next-line @eslint-react/set-state-in-effect
+      startTransition(() => setFilteredList(filterList(items as never, query as never, matchingAll, matcherFn as never))),
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
     [],
   );
 
   useEffect(() => {
-    if (query) filterItems(_items, query);
+    if (query) filterItems(_items, query, matchingAll);
+    // eslint-disable-next-line @eslint-react/set-state-in-effect
     else setFilteredList(items);
-  }, [query, _items]);
+  }, [query, matchingAll, _items, filterItems, items]);
 
   return { onSearch: setQuery, query, filteredList, isSearching };
-};
+}