@wavemaker-ai/react-runtime 1.0.0-next.27766

package/components/data/list/components/LoadMoreButton.js

@@ -0,0 +1,39 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import { WmAppIcon } from "../../../common/WmAppIcon";
+const LoadMoreButton = ({
+  paginationclass,
+  isLoadingMore,
+  loadingicon,
+  loadingiconurl,
+  loadingdatamsg,
+  ondemandmessage,
+  onLoadMore,
+  prefabName
+}) => /* @__PURE__ */ jsx(Box, { component: "div", className: "panel-footer wm-load-more-footer wm-text-center", children: /* @__PURE__ */ jsx(
+  Button,
+  {
+    className: clsx("app-button btn", paginationclass),
+    variant: "contained",
+    onClick: onLoadMore,
+    disabled: isLoadingMore,
+    children: isLoadingMore ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        WmAppIcon,
+        {
+          iconclass: loadingicon ? `${loadingicon} fa-spin` : "fa fa-circle-o-notch fa-spin",
+          iconurl: loadingiconurl,
+          prefabName,
+          defaultClasses: clsx("app-icon", "me-2"),
+          alt: ""
+        }
+      ),
+      loadingdatamsg
+    ] }) : ondemandmessage
+  }
+) });
+export {
+  LoadMoreButton
+};

package/components/data/list/components/NoDataMessage.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { NoDataMessageProps } from "./props";
+/**
+ * No data message component
+ */
+export declare const NoDataMessage: React.FC<NoDataMessageProps>;

package/components/data/list/components/NoDataMessage.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import Typography from "@mui/material/Typography";
+const NoDataMessage = ({
+  message,
+  className = "no-data-message"
+}) => /* @__PURE__ */ jsx(Typography, { className, variant: "body2", children: message });
+export {
+  NoDataMessage
+};

package/components/data/list/components/StandardListItems.d.ts

@@ -0,0 +1,6 @@
+import { ListItemData } from "../props";
+import { StandardListItemsProps } from "./props";
+/**
+ * Standard list items renderer for non-grouped lists
+ */
+export declare const StandardListItems: <T extends ListItemData = ListItemData>({ items, currentPageItems, direction, enablereorder, disableitem, itemclass, itemsPerRowClass, name, tabIndex, activeItems, renderItem, itemTemplate, nodatamessage, onItemClick, onItemDoubleClick, onItemMouseEnter, onItemMouseLeave, onDragEnd, itemAttrs, standalone, }: StandardListItemsProps<T>) => import("react/jsx-runtime").JSX.Element;

package/components/data/list/components/StandardListItems.js

@@ -0,0 +1,82 @@
+import { jsx } from "react/jsx-runtime";
+import { getItemId } from "./ListDND";
+import { ListItemWithTemplate } from "./ListItemWithTemplate";
+import { ListContainer } from "./ListContainer";
+import { NoDataMessage } from "./NoDataMessage";
+import some from "lodash-es/some";
+const StandardListItems = ({
+  items,
+  currentPageItems,
+  direction,
+  enablereorder,
+  disableitem,
+  itemclass,
+  itemsPerRowClass,
+  name,
+  tabIndex,
+  activeItems,
+  renderItem,
+  itemTemplate,
+  nodatamessage,
+  onItemClick,
+  onItemDoubleClick,
+  onItemMouseEnter,
+  onItemMouseLeave,
+  onDragEnd,
+  itemAttrs,
+  standalone = false
+}) => {
+  if (!items || !Array.isArray(items) || items.length === 0) {
+    return /* @__PURE__ */ jsx(NoDataMessage, { message: nodatamessage });
+  }
+  const { currentItems, startIndex } = currentPageItems;
+  const listItems = currentItems.map((item, index) => {
+    const globalIndex = startIndex + index;
+    const itemId = getItemId(item, globalIndex);
+    const isFirst = index === 0;
+    const isLast = index === currentItems.length - 1;
+    const isActive = (Array.isArray(activeItems) || activeItems instanceof Set) && some(Array.from(activeItems), (active) => active._wmListItemId && item._wmListItemId && active._wmListItemId === item._wmListItemId);
+    return /* @__PURE__ */ jsx(
+      ListItemWithTemplate,
+      {
+        item,
+        index,
+        globalIndex,
+        itemId,
+        isFirst,
+        isLast,
+        disableitem,
+        itemclass,
+        itemsPerRowClass,
+        name,
+        tabIndex,
+        isActive,
+        enablereorder,
+        direction,
+        renderItem,
+        itemTemplate,
+        onItemClick,
+        onItemDoubleClick,
+        onItemMouseEnter,
+        onItemMouseLeave,
+        itemAttrs,
+        standalone
+      },
+      itemId
+    );
+  });
+  return /* @__PURE__ */ jsx(
+    ListContainer,
+    {
+      direction,
+      enablereorder,
+      items: currentItems,
+      startIndex,
+      onDragEnd,
+      children: listItems
+    }
+  );
+};
+export {
+  StandardListItems
+};

package/components/data/list/components/index.d.ts

@@ -0,0 +1,12 @@
+export { ListHeader } from "./ListHeader";
+export { ListPagination } from "./ListPagination";
+export { ListItems } from "./ListItems";
+export { getItemId, DndWrapper, SortableItem, dragStyles, useDragAndDrop } from "./ListDND";
+export { ListItemContext, WmListItem } from "./ListItem";
+export { NoDataMessage } from "./NoDataMessage";
+export { LoadMoreButton } from "./LoadMoreButton";
+export { GroupHeader } from "./GroupHeader";
+export { ListContainer } from "./ListContainer";
+export { ListItemWithTemplate } from "./ListItemWithTemplate";
+export { StandardListItems } from "./StandardListItems";
+export { GroupedListItems } from "./GroupedListItems";

package/components/data/list/components/index.js

@@ -0,0 +1,31 @@
+import { ListHeader } from "./ListHeader";
+import { ListPagination } from "./ListPagination";
+import { ListItems } from "./ListItems";
+import { getItemId, DndWrapper, SortableItem, dragStyles, useDragAndDrop } from "./ListDND";
+import { ListItemContext, WmListItem } from "./ListItem";
+import { NoDataMessage } from "./NoDataMessage";
+import { LoadMoreButton } from "./LoadMoreButton";
+import { GroupHeader } from "./GroupHeader";
+import { ListContainer } from "./ListContainer";
+import { ListItemWithTemplate } from "./ListItemWithTemplate";
+import { StandardListItems } from "./StandardListItems";
+import { GroupedListItems } from "./GroupedListItems";
+export {
+  DndWrapper,
+  GroupHeader,
+  GroupedListItems,
+  ListContainer,
+  ListHeader,
+  ListItemContext,
+  ListItemWithTemplate,
+  ListItems,
+  ListPagination,
+  LoadMoreButton,
+  NoDataMessage,
+  SortableItem,
+  StandardListItems,
+  WmListItem,
+  dragStyles,
+  getItemId,
+  useDragAndDrop
+};

package/components/data/list/components/props.d.ts

@@ -0,0 +1,251 @@
+import React from "react";
+import { GroupedDataItem } from "../hooks";
+import { INavigation, IDirection, IAlignment, DisableItemProp, ListItemData, ListPaginationChangeHandler, ListSetRecordHandler, ListBeforeDataRenderHandler } from "../props";
+import { DragEndEvent } from "@dnd-kit/core";
+export type DefaultEventHandler<T = ListItemData> = (event: React.MouseEvent, item: T) => void;
+export interface ListPaginationProps {
+    name: string;
+    navigation: INavigation;
+    orderedDataset: ListItemData[];
+    pagesize: number;
+    currentPage?: number;
+    navigationalign: IAlignment;
+    showrecordcount: boolean;
+    maxsize: number;
+    boundarylinks: boolean;
+    paginationclass: string;
+    allowpagesizechange?: boolean;
+    pagesizeoptions?: string;
+    widgetInstance?: unknown;
+    onPaginationChange: ListPaginationChangeHandler;
+    onSetRecord: ListSetRecordHandler<ListItemData>;
+    onPageSizeChange?: (pageSize: number) => void;
+    listener: any;
+    paginationMeta?: IPaginationMeta;
+    totalItems?: number;
+    datasource?: any;
+    isLoadingMore?: boolean;
+    setIsLoadingMore?: (loading: boolean) => void;
+    isServerSidePagination?: boolean;
+    /** List direction: "row" | "horizontal" for horizontal scroll (load more on scroll right); vertical/column use sentinel */
+    listDirection?: string;
+    /** Ref to list scroll container (for Scroll + row: observer root) */
+    scrollContainerRef?: React.RefObject<HTMLElement | null>;
+    /** Ref for scroll sentinel (pagination sets for both vertical and horizontal) */
+    sentinelRef?: React.RefObject<HTMLElement | null>;
+    /** Called when pagination has new accumulated data (Scroll/On-Demand); list uses this to preserve old + new data */
+    onDataUpdate?: (data: ListItemData[]) => void;
+}
+export interface IPaginationMeta {
+    totalPages: number;
+    totalElements: number;
+    last: boolean;
+    sort: Array<any>;
+    numberOfElements: number;
+    first: boolean;
+    size: number;
+    number: number;
+    empty: boolean;
+}
+export interface ListItemsProps<T = ListItemData> {
+    items: T[];
+    groupedData?: GroupedDataItem<T>[];
+    groupby?: string;
+    navigation: INavigation;
+    currentPage: number;
+    pagesize: number;
+    visibleItems: number;
+    orderby?: string;
+    startIndex?: number;
+    endIndex?: number;
+    disableitem: DisableItemProp<T>;
+    itemclass: string | ((item: T) => string | null | undefined);
+    itemsPerRowClass: string;
+    direction: IDirection;
+    enablereorder: boolean;
+    activeItems: Set<T>;
+    name: string;
+    tabIndex?: number;
+    renderItem?: (item: T, index: number) => React.ReactNode;
+    itemTemplate?: React.ReactNode;
+    nodatamessage: string;
+    ondemandmessage: string;
+    loadingicon: string;
+    loadingiconurl?: string;
+    loadingdatamsg: string;
+    paginationclass: string;
+    isLoadingMore: boolean;
+    prefabName?: string;
+    collapsible: boolean;
+    showcount: boolean;
+    groupCollapsed: Record<string, boolean>;
+    handleListItemClick: DefaultEventHandler;
+    handleListItemDoubleClick: DefaultEventHandler;
+    handleListItemMouseEnter: DefaultEventHandler;
+    handleListItemMouseLeave: DefaultEventHandler;
+    handleDragEnd: (event: DragEndEvent) => void;
+    handleLoadMore: () => void;
+    handleHeaderClick: (groupKey: string) => void;
+    onBeforedatarender?: ListBeforeDataRenderHandler<T>;
+    onRender?: ListBeforeDataRenderHandler<T>;
+    widgetInstance?: unknown;
+    rawDataset?: T[];
+    datasource?: any;
+    totalItems?: number;
+    isServerSidePagination?: boolean;
+    showNavigation?: boolean;
+    itemAttrs?: (item: ListItemData, index: number) => Record<string, unknown>;
+    /** Angular `[class.list-group-autolayout]` parity for grouped inner `<ul>`s */
+    hasListGroupAutoLayout?: boolean;
+    /** When true, child rows skip page WidgetProvider proxy (standalone list). */
+    standalone?: boolean;
+}
+export interface ListHeaderProps {
+    title?: string;
+    subheading?: string;
+    iconclass?: string;
+    iconurl?: string;
+    prefabName?: string;
+}
+export interface ListTemplateProps {
+    children: React.ReactNode;
+    layout?: string;
+    name?: string;
+}
+export interface DndWrapperProps<T = ListItemData> {
+    items: T[];
+    direction: IDirection;
+    startIndex: number;
+    onDragEnd: (event: DragEndEvent) => void;
+    children: React.ReactNode;
+}
+export interface SortableItemProps {
+    id: string;
+    index: number;
+    children: React.ReactNode;
+}
+export interface NoDataMessageProps {
+    message: string;
+    className?: string;
+}
+export interface LoadMoreButtonProps {
+    paginationclass: string;
+    isLoadingMore: boolean;
+    loadingicon: string;
+    loadingiconurl?: string;
+    loadingdatamsg: string;
+    ondemandmessage: string;
+    onLoadMore: () => void;
+    prefabName?: string;
+}
+export interface GroupHeaderProps {
+    groupKey: string;
+    displayCount: number;
+    isCollapsed: boolean;
+    collapsible: boolean;
+    showcount: boolean;
+    onHeaderClick: (groupKey: string) => void;
+}
+export interface ListContainerProps<T extends ListItemData = ListItemData> {
+    direction: string;
+    enablereorder: boolean;
+    items: T[];
+    startIndex: number;
+    children: React.ReactNode;
+    onDragEnd: (event: DragEndEvent) => void;
+}
+export interface ListItemWithTemplateProps<T extends ListItemData = ListItemData> {
+    item: T;
+    index: number;
+    globalIndex?: number;
+    itemId: string;
+    isFirst: boolean;
+    isLast: boolean;
+    disableitem: DisableItemProp<T>;
+    itemclass: string | ((item: T, index?: number) => string | null | undefined);
+    itemsPerRowClass: string;
+    name: string;
+    tabIndex?: number;
+    isActive: boolean;
+    enablereorder?: boolean;
+    direction?: string;
+    renderItem?: (item: T, index: number, list?: T[], currentItemWidgets?: Record<string, any>) => React.ReactNode;
+    itemTemplate?: React.ReactNode;
+    onItemClick: DefaultEventHandler;
+    onItemDoubleClick: DefaultEventHandler;
+    onItemMouseEnter: DefaultEventHandler;
+    onItemMouseLeave: DefaultEventHandler;
+    itemAttrs?: (item: ListItemData, index: number) => Record<string, unknown>;
+    standalone?: boolean;
+}
+export interface StandardListItemsProps<T extends ListItemData = ListItemData> {
+    items: T[];
+    currentPageItems: CurrentPageItemsResult<T>;
+    direction: string;
+    enablereorder: boolean;
+    disableitem: DisableItemProp<T>;
+    itemclass: string | ((item: T, index?: number) => string | null | undefined);
+    itemsPerRowClass: string;
+    name: string;
+    tabIndex?: number;
+    activeItems: Set<T>;
+    renderItem?: (item: T, index: number) => React.ReactNode;
+    itemTemplate?: React.ReactNode;
+    nodatamessage: string;
+    onItemClick: DefaultEventHandler;
+    onItemDoubleClick: DefaultEventHandler;
+    onItemMouseEnter: DefaultEventHandler;
+    onItemMouseLeave: DefaultEventHandler;
+    onDragEnd: (event: DragEndEvent) => void;
+    itemAttrs?: (item: ListItemData, index: number) => Record<string, unknown>;
+    standalone?: boolean;
+}
+export interface GroupedListItemsProps<T extends ListItemData = ListItemData> {
+    groupedData: GroupedDataItem<T>[];
+    paginatedGroupedData: PaginatedGroupedDataItem<T>[];
+    direction: string;
+    disableitem: DisableItemProp<T>;
+    itemclass: string | ((item: T, index?: number) => string | null | undefined);
+    itemsPerRowClass: string;
+    name: string;
+    tabIndex?: number;
+    activeItems: Set<T>;
+    collapsible: boolean;
+    showcount: boolean;
+    groupCollapsed: Record<string, boolean>;
+    renderItem?: (item: T, index: number) => React.ReactNode;
+    itemTemplate?: React.ReactNode;
+    nodatamessage: string;
+    onItemClick: DefaultEventHandler;
+    onItemDoubleClick: DefaultEventHandler;
+    onItemMouseEnter: DefaultEventHandler;
+    onItemMouseLeave: DefaultEventHandler;
+    onHeaderClick: (groupKey: string) => void;
+    itemAttrs?: (item: ListItemData, index: number) => Record<string, unknown>;
+    hasListGroupAutoLayout?: boolean;
+    standalone?: boolean;
+}
+export interface UseCurrentPageItemsProps<T extends ListItemData = ListItemData> {
+    items: T[];
+    navigation: string;
+    currentPage: number;
+    pagesize: number;
+    visibleItems: number;
+    isServerPaginated?: boolean;
+}
+export interface CurrentPageItemsResult<T extends ListItemData = ListItemData> {
+    currentItems: T[];
+    startIndex: number;
+    endIndex: number;
+}
+export interface UsePaginatedGroupedDataProps<T extends ListItemData = ListItemData> {
+    groupedData: GroupedDataItem<T>[];
+    navigation: string;
+    currentPage: number;
+    pagesize: number;
+    visibleItems: number;
+    isServerSidePagination?: boolean;
+}
+export interface PaginatedGroupedDataItem<T extends ListItemData = ListItemData> extends GroupedDataItem<T> {
+    startIndexInGroup: number;
+}

package/components/data/list/hooks/index.d.ts

@@ -0,0 +1,11 @@
+export { useListData } from "./useListData";
+export { useListState } from "./useListState";
+export { useGroupedData } from "./useGroupedData";
+export { useListEventHandlers } from "./useListEventHandlers";
+export { useListPagination } from "./useListPagination";
+export { useCurrentPageItems } from "./useCurrentPageItems";
+export { usePaginatedGroupedData } from "./usePaginatedGroupedData";
+export { useListEffects } from "./useListEffects";
+export { useDataSourceSubscription } from "../../../../hooks/useDataSourceSubscription";
+export { useListStateManager } from "./useListStateManager";
+export { type GroupedDataItem, type UseListDataProps, type ListEventHandlers, type ListPaginationState, type UseListEventHandlersProps, type UseListPaginationProps, } from "./props";

package/components/data/list/hooks/index.js

@@ -0,0 +1,22 @@
+import { useListData } from "./useListData";
+import { useListState } from "./useListState";
+import { useGroupedData } from "./useGroupedData";
+import { useListEventHandlers } from "./useListEventHandlers";
+import { useListPagination } from "./useListPagination";
+import { useCurrentPageItems } from "./useCurrentPageItems";
+import { usePaginatedGroupedData } from "./usePaginatedGroupedData";
+import { useListEffects } from "./useListEffects";
+import { useDataSourceSubscription } from "../../../../hooks/useDataSourceSubscription";
+import { useListStateManager } from "./useListStateManager";
+export {
+  useCurrentPageItems,
+  useDataSourceSubscription,
+  useGroupedData,
+  useListData,
+  useListEffects,
+  useListEventHandlers,
+  useListPagination,
+  useListState,
+  useListStateManager,
+  usePaginatedGroupedData
+};

package/components/data/list/hooks/props.d.ts

@@ -0,0 +1,89 @@
+import React from "react";
+import { DefaultEventHandler, IPaginationMeta } from "../components/props";
+import { WmListProps, DisableItemProp, ListItemData, ListPaginationChangeHandler, ListSetRecordHandler, ListItemEventHandler, ListSelectHandler } from "../props";
+export interface GroupedDataItem<T = ListItemData> {
+    key: string;
+    data: T[];
+    originalDataLength?: number;
+    startIndexInGroup?: number;
+}
+export type UseListDataProps<T = ListItemData> = Pick<WmListProps<T>, "datafield" | "displayfield" | "displaylabel" | "getDisplayExpression" | "orderby" | "groupby">;
+export interface UseListEventHandlersProps<T extends ListItemData = ListItemData> {
+    items: T[];
+    multiselect: boolean;
+    disableitem: DisableItemProp<T>;
+    selectionlimit: number;
+    collapsible: boolean;
+    selectedItems: T[];
+    setSelectedItems: (items: T[]) => void;
+    activeItems: Set<T>;
+    setActiveItems: (items: Set<T>) => void;
+    firstSelectedItem: T | null;
+    setFirstSelectedItem: (item: T | null) => void;
+    groupCollapsed: Record<string, boolean>;
+    setGroupCollapsed: (collapsed: Record<string, boolean>) => void;
+    currentPage: number;
+    setCurrentPage: (page: number) => void;
+    visibleItems: number;
+    setVisibleItems: (count: number) => void;
+    isLoadingMore: boolean;
+    setIsLoadingMore: (loading: boolean) => void;
+    onClick?: ListItemEventHandler;
+    onDblclick?: ListItemEventHandler;
+    onMouseEnter?: ListItemEventHandler;
+    onMouseLeave?: ListItemEventHandler;
+    onSelect?: ListSelectHandler<T>;
+    onSelectionlimitexceed?: (event: React.MouseEvent | null, widget: unknown) => void;
+    onPaginationchange?: (event: React.MouseEvent | null, widget: unknown, index: number) => void;
+    onPageChange?: (event: React.MouseEvent | null, page: number) => void;
+    onSetrecord?: (event: React.MouseEvent | null, widget: unknown, index: number, data: T) => void;
+    userInitiatedSelectionRef?: React.RefObject<boolean>;
+    datasource?: any;
+    pagesize?: number;
+    navigation?: string;
+    onDemandCurrentPage?: number;
+    setOnDemandCurrentPage?: (page: number) => void;
+    isServerSidePagination?: boolean;
+    name?: string;
+    listener?: any;
+    standalone?: boolean;
+}
+export interface ListEventHandlers<T extends ListItemData = ListItemData> {
+    handleListItemClick: DefaultEventHandler<T>;
+    handleListItemDoubleClick: DefaultEventHandler<T>;
+    handleListItemMouseEnter: DefaultEventHandler<T>;
+    handleListItemMouseLeave: DefaultEventHandler<T>;
+    handleHeaderClick: (groupKey: string) => void;
+    handlePaginationChange: ListPaginationChangeHandler;
+    handleSetRecord: ListSetRecordHandler<T>;
+    handlePageChange: (page: number) => void;
+    handleLoadMore: () => void;
+}
+export interface UseListPaginationProps<T extends ListItemData = ListItemData> {
+    items: T[];
+    groupedData?: GroupedDataItem<T>[];
+    groupby?: string;
+    pagesize: number;
+    allowpagesizechange: boolean;
+    pagesizeoptions: string;
+    navigation: string;
+    initialPage?: number;
+    datasource?: any;
+}
+export interface ListPaginationState<T extends ListItemData = ListItemData> {
+    currentPage: number;
+    setCurrentPage: (page: number) => void;
+    currentPageSize: number;
+    setCurrentPageSize: (size: number) => void;
+    totalPages: number;
+    visibleItems: number;
+    setVisibleItems: (count: number) => void;
+    currentPageItems: {
+        currentItems: T[];
+        startIndex: number;
+        endIndex: number;
+    };
+    effectiveTotalPages: number;
+    totalItems: number;
+    paginationMeta?: IPaginationMeta;
+}

package/components/data/list/hooks/useCurrentPageItems.d.ts

@@ -0,0 +1,6 @@
+import { ListItemData } from "../props";
+import { UseCurrentPageItemsProps, CurrentPageItemsResult } from "../components/props";
+/**
+ * Hook for calculating current page items based on navigation type and pagination
+ */
+export declare const useCurrentPageItems: <T extends ListItemData = ListItemData>({ items, navigation, currentPage, pagesize, visibleItems, isServerPaginated, }: UseCurrentPageItemsProps<T>) => CurrentPageItemsResult<T>;

package/components/data/list/hooks/useCurrentPageItems.js

@@ -0,0 +1,30 @@
+import { useMemo } from "react";
+import { LIST_NAVIGATION_TYPES } from "../utils/constants";
+const useCurrentPageItems = ({
+  items,
+  navigation,
+  currentPage,
+  pagesize,
+  visibleItems,
+  isServerPaginated = false
+}) => {
+  return useMemo(() => {
+    if (!items || !Array.isArray(items) || items.length === 0) {
+      return { currentItems: [], startIndex: 0, endIndex: 0 };
+    }
+    if (isServerPaginated) {
+      return {
+        currentItems: items,
+        startIndex: 0,
+        endIndex: items.length
+      };
+    }
+    const startIndex = navigation === LIST_NAVIGATION_TYPES.ON_DEMAND ? 0 : (currentPage - 1) * pagesize;
+    const endIndex = navigation === LIST_NAVIGATION_TYPES.ON_DEMAND ? visibleItems : currentPage * pagesize;
+    const currentItems = items.slice(startIndex, endIndex);
+    return { currentItems, startIndex, endIndex };
+  }, [items, navigation, currentPage, pagesize, visibleItems, isServerPaginated]);
+};
+export {
+  useCurrentPageItems
+};

package/components/data/list/hooks/useGroupedData.d.ts

@@ -0,0 +1,9 @@
+import { GroupedDataItem } from "./index";
+import { ListItemData } from "../props";
+/**
+ * Custom hook for grouping data
+ * @param orderedDataset - The dataset to group
+ * @param groupby - The field to group by (supports dot notation for nested properties)
+ * @returns Grouped data array
+ */
+export declare const useGroupedData: <T extends ListItemData = ListItemData>(orderedDataset: T[], groupby?: string) => GroupedDataItem<T>[];

package/components/data/list/hooks/useGroupedData.js

@@ -0,0 +1,23 @@
+import { useMemo } from "react";
+import { groupBy, get, sortBy, map } from "lodash-es";
+const useGroupedData = (orderedDataset, groupby) => {
+  return useMemo(() => {
+    const validDataset = Array.isArray(orderedDataset) ? orderedDataset : [];
+    if (!groupby || !validDataset.length) return [];
+    const grouped = groupBy(validDataset, (item) => {
+      const value = get(item, groupby);
+      return value !== void 0 ? String(value || "None") : "Others";
+    });
+    return sortBy(
+      map(grouped, (data, key) => ({
+        key,
+        data,
+        originalDataLength: data.length
+      })),
+      "key"
+    );
+  }, [orderedDataset, groupby]);
+};
+export {
+  useGroupedData
+};

package/components/data/list/hooks/useListData.d.ts

@@ -0,0 +1,9 @@
+import { UseListDataProps } from "./props";
+import { ListItemData } from "../props";
+/**
+ * Custom hook for processing and ordering list data
+ * @param dataset - The dataset to process
+ * @param config - Configuration options for data processing
+ * @returns Processed and ordered dataset
+ */
+export declare const useListData: <T extends ListItemData = ListItemData>(dataset: T[], config: UseListDataProps<T>) => T[];