@headless-adminapp/app 0.0.17-alpha.40 → 0.0.17-alpha.42

package/board/BoardColumnDataResolver.d.ts

@@ -0,0 +1 @@
+export declare function DataResolver(): null;

package/board/BoardColumnDataResolver.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataResolver = DataResolver;
+const react_1 = require("react");
+const hooks_1 = require("../hooks");
+const mutable_1 = require("../mutable");
+const useRetriveRecords_1 = require("../transport/hooks/useRetriveRecords");
+const context_1 = require("./context");
+const useBoardColumnConfig_1 = require("./hooks/useBoardColumnConfig");
+const useBoardConfig_1 = require("./hooks/useBoardConfig");
+const useSearchText_1 = require("./hooks/useSearchText");
+const MAX_RECORDS = 10000;
+function DataResolver() {
+    const { schema, sorting, projection: { columns, expand }, } = (0, useBoardConfig_1.useBoardConfig)();
+    const [searchText] = (0, useSearchText_1.useSearchText)();
+    const { filter, maxRecords = MAX_RECORDS } = (0, useBoardColumnConfig_1.useBoardColumnConfig)();
+    const setState = (0, mutable_1.useContextSetValue)(context_1.BoardColumnContext);
+    const [search] = (0, hooks_1.useDebouncedValue)(searchText, 500);
+    const queryKey = (0, useRetriveRecords_1.useRetrieveRecordsKey)({
+        columns,
+        expand,
+        filter,
+        maxRecords,
+        schema,
+        search,
+        sorting,
+    });
+    (0, useRetriveRecords_1.useClearDataExceptFirstPage)(queryKey);
+    const { fetchNextPage, data, hasNextPage, isFetching, isFetchingNextPage } = (0, useRetriveRecords_1.useRetriveRecords)(queryKey, {
+        columns,
+        expand,
+        filter,
+        maxRecords,
+        schema,
+        search,
+        sorting,
+    });
+    (0, react_1.useEffect)(() => {
+        setState({
+            fetchNextPage: fetchNextPage,
+        });
+    }, [fetchNextPage, setState]);
+    (0, react_1.useEffect)(() => {
+        if (!data) {
+            setState({
+                data: null,
+            });
+            return;
+        }
+        setState({
+            data,
+        });
+    }, [data, setState, schema.idAttribute]);
+    (0, react_1.useEffect)(() => {
+        setState({
+            dataState: {
+                isFetching,
+                hasNextPage,
+                isFetchingNextPage,
+            },
+        });
+    }, [hasNextPage, isFetching, isFetchingNextPage, setState]);
+    return null;
+}

package/board/BoardColumnProvider.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+import { BoardColumnConfig } from './types';
+export declare function invertValueMapping(value: Record<string, string[]>): Record<string, string[]>;
+export interface BoardColumnProviderProps {
+    config: BoardColumnConfig;
+}
+export declare function BoardColumnProvider(props: PropsWithChildren<BoardColumnProviderProps>): import("react/jsx-runtime").JSX.Element;

package/board/BoardColumnProvider.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.invertValueMapping = invertValueMapping;
+exports.BoardColumnProvider = BoardColumnProvider;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const mutable_1 = require("../mutable");
+const BoardColumnDataResolver_1 = require("./BoardColumnDataResolver");
+const context_1 = require("./context");
+const useBoardConfig_1 = require("./hooks/useBoardConfig");
+function invertValueMapping(value) {
+    return Object.keys(value).reduce((acc, key) => {
+        const toKeys = value[key];
+        toKeys.forEach((toKey) => {
+            acc[toKey] = [...(acc[toKey] || []), key];
+        });
+        return acc;
+    }, {});
+}
+function BoardColumnProvider(props) {
+    const { schema } = (0, useBoardConfig_1.useBoardConfig)();
+    const contextValue = (0, mutable_1.useCreateContextStore)({
+        config: props.config,
+        data: {
+            logicalName: schema.logicalName,
+            records: [],
+            count: 0,
+        },
+        dataState: {
+            hasNextPage: false,
+            isFetching: false,
+            isFetchingNextPage: false,
+        },
+        fetchNextPage: () => { },
+    });
+    return ((0, jsx_runtime_1.jsxs)(context_1.BoardColumnContext.Provider, { value: contextValue, children: [(0, jsx_runtime_1.jsx)(BoardColumnDataResolver_1.DataResolver, {}), props.children] }));
+}

package/board/context.d.ts

@@ -0,0 +1,19 @@
+import { InferredSchemaType, SchemaAttributes } from '@headless-adminapp/core/schema';
+import { RetriveRecordsResult } from '@headless-adminapp/core/transport';
+import { BoardColumnConfig, BoardConfig } from './types';
+export interface BoardContextState<S extends SchemaAttributes = SchemaAttributes> {
+    config: BoardConfig<S>;
+    searchText: string;
+}
+export interface BoardColumnContextState<S extends SchemaAttributes = SchemaAttributes> {
+    config: BoardColumnConfig;
+    data: RetriveRecordsResult<InferredSchemaType<S>> | null;
+    dataState: {
+        isFetching: boolean;
+        hasNextPage: boolean;
+        isFetchingNextPage: boolean;
+    };
+    fetchNextPage: () => void;
+}
+export declare const BoardContext: import("react").Context<import("../mutable").ContextValue<BoardContextState<SchemaAttributes>>>;
+export declare const BoardColumnContext: import("react").Context<import("../mutable").ContextValue<BoardColumnContextState<SchemaAttributes>>>;

package/board/context.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BoardColumnContext = exports.BoardContext = void 0;
+const mutable_1 = require("../mutable");
+exports.BoardContext = (0, mutable_1.createContext)();
+exports.BoardColumnContext = (0, mutable_1.createContext)();

package/board/hooks/index.d.ts

@@ -0,0 +1,6 @@
+export { useBoardColumnConfig } from './useBoardColumnConfig';
+export { useBoardColumnData } from './useBoardColumnData';
+export { useBoardColumnDataState } from './useBoardColumnDataState';
+export { useBoardConfig } from './useBoardConfig';
+export { useBoardSchema } from './useBoardSchema';
+export { useSearchText } from './useSearchText';

package/board/hooks/index.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSearchText = exports.useBoardSchema = exports.useBoardConfig = exports.useBoardColumnDataState = exports.useBoardColumnData = exports.useBoardColumnConfig = void 0;
+var useBoardColumnConfig_1 = require("./useBoardColumnConfig");
+Object.defineProperty(exports, "useBoardColumnConfig", { enumerable: true, get: function () { return useBoardColumnConfig_1.useBoardColumnConfig; } });
+var useBoardColumnData_1 = require("./useBoardColumnData");
+Object.defineProperty(exports, "useBoardColumnData", { enumerable: true, get: function () { return useBoardColumnData_1.useBoardColumnData; } });
+var useBoardColumnDataState_1 = require("./useBoardColumnDataState");
+Object.defineProperty(exports, "useBoardColumnDataState", { enumerable: true, get: function () { return useBoardColumnDataState_1.useBoardColumnDataState; } });
+var useBoardConfig_1 = require("./useBoardConfig");
+Object.defineProperty(exports, "useBoardConfig", { enumerable: true, get: function () { return useBoardConfig_1.useBoardConfig; } });
+var useBoardSchema_1 = require("./useBoardSchema");
+Object.defineProperty(exports, "useBoardSchema", { enumerable: true, get: function () { return useBoardSchema_1.useBoardSchema; } });
+var useSearchText_1 = require("./useSearchText");
+Object.defineProperty(exports, "useSearchText", { enumerable: true, get: function () { return useSearchText_1.useSearchText; } });

package/board/hooks/useBoardColumnConfig.d.ts

@@ -0,0 +1,2 @@
+import { BoardColumnConfig } from '../types';
+export declare function useBoardColumnConfig(): BoardColumnConfig;

package/board/hooks/useBoardColumnConfig.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBoardColumnConfig = useBoardColumnConfig;
+const context_1 = require("@headless-adminapp/app/mutable/context");
+const context_2 = require("../context");
+function useBoardColumnConfig() {
+    return (0, context_1.useContextSelector)(context_2.BoardColumnContext, (context) => context.config);
+}

package/board/hooks/useBoardColumnData.d.ts

@@ -0,0 +1 @@
+export declare function useBoardColumnData(): import("@headless-adminapp/core/transport").RetriveRecordsResult<import("@headless-adminapp/core/schema").InferredSchemaType<import("@headless-adminapp/core/schema").SchemaAttributes>> | null;

package/board/hooks/useBoardColumnData.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBoardColumnData = useBoardColumnData;
+const context_1 = require("@headless-adminapp/app/mutable/context");
+const context_2 = require("../context");
+function useBoardColumnData() {
+    const data = (0, context_1.useContextSelector)(context_2.BoardColumnContext, (state) => state.data);
+    return data;
+}

package/board/hooks/useBoardColumnDataState.d.ts

@@ -0,0 +1,5 @@
+export declare function useBoardColumnDataState(): {
+    isFetching: boolean;
+    hasNextPage: boolean;
+    isFetchingNextPage: boolean;
+};

package/board/hooks/useBoardColumnDataState.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBoardColumnDataState = useBoardColumnDataState;
+const context_1 = require("@headless-adminapp/app/mutable/context");
+const context_2 = require("../context");
+function useBoardColumnDataState() {
+    const data = (0, context_1.useContextSelector)(context_2.BoardColumnContext, (state) => state.dataState);
+    return data;
+}

package/board/hooks/useBoardConfig.d.ts

@@ -0,0 +1,3 @@
+import { SchemaAttributes } from '@headless-adminapp/core/schema';
+import { BoardConfig } from '../types';
+export declare function useBoardConfig<S extends SchemaAttributes = SchemaAttributes>(): BoardConfig<S>;

package/board/hooks/useBoardConfig.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBoardConfig = useBoardConfig;
+const context_1 = require("@headless-adminapp/app/mutable/context");
+const context_2 = require("../context");
+function useBoardConfig() {
+    return (0, context_1.useContextSelector)(context_2.BoardContext, (context) => context.config);
+}

package/board/hooks/useBoardSchema.d.ts

@@ -0,0 +1,2 @@
+import { SchemaAttributes } from '@headless-adminapp/core/schema';
+export declare function useBoardSchema<S extends SchemaAttributes = SchemaAttributes>(): import("@headless-adminapp/core/schema").Schema<S>;

package/board/hooks/useBoardSchema.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBoardSchema = useBoardSchema;
+const useBoardConfig_1 = require("./useBoardConfig");
+function useBoardSchema() {
+    return (0, useBoardConfig_1.useBoardConfig)().schema;
+}

package/board/hooks/useSearchText.d.ts

@@ -0,0 +1 @@
+export declare function useSearchText(): readonly [string, (value: string) => void];

package/board/hooks/useSearchText.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSearchText = useSearchText;
+const react_1 = require("react");
+const context_1 = require("../context");
+const context_2 = require("@headless-adminapp/app/mutable/context");
+function useSearchText() {
+    const searchText = (0, context_2.useContextSelector)(context_1.BoardContext, (context) => context.searchText);
+    const setValue = (0, context_2.useContextSetValue)(context_1.BoardContext);
+    const setSearchText = (0, react_1.useCallback)((value) => {
+        setValue({ searchText: value });
+    }, [setValue]);
+    return [searchText, setSearchText];
+}

package/board/types.d.ts

@@ -0,0 +1,47 @@
+import { CommandContextBase } from '@headless-adminapp/core/experience/command';
+import { SortingState, View } from '@headless-adminapp/core/experience/view';
+import { Schema, SchemaAttributes } from '@headless-adminapp/core/schema';
+import { Filter } from '@headless-adminapp/core/transport';
+import { FC } from 'react';
+import { UtilityContextState } from '../command';
+export interface ItemUpdateContext extends CommandContextBase {
+    primaryControl: {
+        logicalName: string;
+        id: string;
+        schema: Schema;
+    };
+    utility: UtilityContextState;
+}
+export interface Column {
+    view: View<SchemaAttributes>;
+    accept: string[];
+    update?: (context: ItemUpdateContext) => Promise<void>;
+}
+export type BoardColumnCardPreviewFC = FC<{
+    record: any;
+}>;
+export interface DragItem {
+    id: string;
+    columnId: string;
+    record: any;
+}
+export interface BoardColumnConfig {
+    columnId: string;
+    title: string;
+    maxRecords?: number;
+    filter: Filter;
+    acceptSourceIds: string[];
+    updateFn: (context: ItemUpdateContext) => Promise<void>;
+}
+export interface BoardConfig<S extends SchemaAttributes = SchemaAttributes> {
+    title: string;
+    description: string;
+    schema: Schema<S>;
+    sorting: SortingState<S>;
+    projection: {
+        columns: Array<keyof S>;
+        expand?: Partial<Record<keyof S, string[]>>;
+    };
+    columnConfigs: BoardColumnConfig[];
+    PreviewComponent: BoardColumnCardPreviewFC;
+}

package/board/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/board/utils.d.ts

@@ -0,0 +1,3 @@
+import { SchemaAttributes } from '@headless-adminapp/core/schema';
+import { BoardConfig } from './types';
+export declare function defineBoardConfig<S extends SchemaAttributes = SchemaAttributes>(config: BoardConfig<S>): BoardConfig<S>;

package/board/utils.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defineBoardConfig = defineBoardConfig;
+function defineBoardConfig(config) {
+    return config;
+}

package/components/ScrollbarWithMoreDataRequest/index.d.ts

@@ -0,0 +1,9 @@
+import { FC, PropsWithChildren } from 'react';
+interface ScrollbarWithMoreDataRequest {
+    data: any;
+    hasMore: boolean;
+    onRequestMore: () => void;
+    rtl?: boolean;
+}
+export declare const ScrollbarWithMoreDataRequest: FC<PropsWithChildren<ScrollbarWithMoreDataRequest>>;
+export {};

package/components/ScrollbarWithMoreDataRequest/index.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollbarWithMoreDataRequest = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ScrollView_1 = require("../ScrollView");
+function getReaminingSpace(div) {
+    return div.scrollHeight - div.scrollTop - div.clientHeight;
+}
+const ScrollbarWithMoreDataRequest = ({ data, onRequestMore, hasMore, children, rtl }) => {
+    const divRef = (0, react_1.useRef)(null);
+    const onRequestMoreRef = (0, react_1.useRef)(onRequestMore);
+    onRequestMoreRef.current = onRequestMore;
+    (0, react_1.useEffect)(() => {
+        var _a;
+        const div = (_a = divRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+        if (!div) {
+            return;
+        }
+        const remainingSpace = getReaminingSpace(div);
+        if (remainingSpace <= 0 && hasMore) {
+            onRequestMoreRef.current();
+        }
+    }, [data, hasMore]);
+    return ((0, jsx_runtime_1.jsx)(ScrollView_1.ScrollView, { autoHide: true, rtl: rtl, onScroll: (e) => {
+            const div = e.target;
+            const remainingSpace = getReaminingSpace(div);
+            if (remainingSpace <= 0 && hasMore) {
+                onRequestMoreRef.current();
+            }
+        }, children: (0, jsx_runtime_1.jsx)("div", { ref: divRef, children: children }) }));
+};
+exports.ScrollbarWithMoreDataRequest = ScrollbarWithMoreDataRequest;

package/datagrid/DataGridProvider/DataResolver.js

@@ -1,31 +1,19 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataResolver = DataResolver;
-const react_query_1 = require("@tanstack/react-query");
+const useRetriveRecords_1 = require("@headless-adminapp/app/transport/hooks/useRetriveRecords");
 const react_1 = require("react");
 const useDebouncedValue_1 = require("../../hooks/useDebouncedValue");
 const useMetadata_1 = require("../../metadata/hooks/useMetadata");
 const context_1 = require("../../mutable/context");
-const transport_1 = require("../../transport");
 const context_2 = require("../context");
 const hooks_1 = require("../hooks");
 const utils_1 = require("./utils");
-const ROWS_PER_PAGE = 100;
 const MAX_RECORDS = 10000;
 function DataResolver() {
     var _a;
     const schema = (0, hooks_1.useDataGridSchema)();
     const view = (0, hooks_1.useSelectedView)();
-    const dataService = (0, transport_1.useDataService)();
     const [sorting] = (0, hooks_1.useGridSorting)();
     const [searchText] = (0, hooks_1.useSearchText)();
     const extraFilter = (0, hooks_1.useGridExtraFilter)();
@@ -43,93 +31,27 @@ function DataResolver() {
         schema.primaryAttribute,
     ])), [gridColumns, schema.primaryAttribute]);
     const expand = (0, react_1.useMemo)(() => (0, utils_1.collectExpandedKeys)(gridColumns), [gridColumns]);
-    const queryKey = (0, react_1.useMemo)(() => [
-        'data',
-        'retriveRecords',
-        schema.logicalName,
-        search,
-        view.experience.filter,
-        extraFilter,
-        sorting,
-        columnFilters,
+    const filter = (0, react_1.useMemo)(() => {
+        return (0, utils_1.mergeConditions)(schema, view.experience.filter, extraFilter, columnFilters, schemaStore);
+    }, [columnFilters, extraFilter, schema, schemaStore, view.experience.filter]);
+    const queryKey = (0, useRetriveRecords_1.useRetrieveRecordsKey)({
         columns,
         expand,
+        filter,
         maxRecords,
-    ], [
-        columnFilters,
+        schema,
+        search,
+        sorting,
+    });
+    (0, useRetriveRecords_1.useClearDataExceptFirstPage)(queryKey);
+    const { fetchNextPage, data, hasNextPage, isFetching, isFetchingNextPage } = (0, useRetriveRecords_1.useRetriveRecords)(queryKey, {
         columns,
         expand,
-        extraFilter,
-        schema.logicalName,
+        filter,
+        maxRecords,
+        schema,
         search,
         sorting,
-        view.experience.filter,
-        maxRecords,
-    ]);
-    const queryClient = (0, react_query_1.useQueryClient)();
-    (0, react_1.useEffect)(() => {
-        return () => {
-            // Clear all pages except the first one when the component is unmounted
-            queryClient.setQueryData(queryKey, (oldData) => {
-                if (!oldData) {
-                    return oldData;
-                }
-                if (!oldData.pageParams.length || !oldData.pages.length) {
-                    return oldData;
-                }
-                return {
-                    pageParams: [oldData.pageParams[0]],
-                    pages: [oldData.pages[0]],
-                };
-            });
-        };
-    }, [queryClient, queryKey]);
-    const { data, isFetching, hasNextPage, fetchNextPage, isFetchingNextPage } = (0, react_query_1.useInfiniteQuery)({
-        queryKey: queryKey,
-        queryFn: (queryContext) => __awaiter(this, void 0, void 0, function* () {
-            var _a;
-            const params = (_a = queryContext.pageParam) !== null && _a !== void 0 ? _a : {
-                pageIndex: 0,
-            };
-            const skip = params.pageIndex * ROWS_PER_PAGE;
-            const limit = Math.min(ROWS_PER_PAGE, Math.max(0, maxRecords - skip));
-            if (limit <= 0) {
-                return {
-                    params: params,
-                    data: {
-                        logicalName: schema.logicalName,
-                        count: 0,
-                        records: [],
-                    },
-                };
-            }
-            const result = yield dataService.retriveRecords({
-                logicalName: schema.logicalName,
-                search,
-                columns: columns,
-                expand,
-                filter: (0, utils_1.mergeConditions)(schema, view.experience.filter, extraFilter, columnFilters, schemaStore),
-                skip,
-                limit,
-                sort: sorting,
-            });
-            return {
-                params: params,
-                data: result,
-            };
-        }),
-        getNextPageParam: (lastPage) => {
-            if (lastPage.data.count <
-                ROWS_PER_PAGE * (lastPage.params.pageIndex + 1)) {
-                return undefined;
-            }
-            return {
-                pageIndex: lastPage.params.pageIndex + 1,
-            };
-        },
-        initialPageParam: {
-            pageIndex: 0,
-        },
     });
     (0, react_1.useEffect)(() => {
         setState({
@@ -137,21 +59,15 @@ function DataResolver() {
         });
     }, [fetchNextPage, setState]);
     (0, react_1.useEffect)(() => {
-        var _a, _b, _c, _d;
-        if (!(data === null || data === void 0 ? void 0 : data.pages.length)) {
+        if (!data) {
             setState({
                 data: null,
             });
             return;
         }
-        const finalData = {
-            logicalName: (_a = data === null || data === void 0 ? void 0 : data.pages) === null || _a === void 0 ? void 0 : _a[0].data.logicalName,
-            count: (_c = (_b = data === null || data === void 0 ? void 0 : data.pages) === null || _b === void 0 ? void 0 : _b[0].data.count) !== null && _c !== void 0 ? _c : 0,
-            records: (_d = data === null || data === void 0 ? void 0 : data.pages.map((x) => x.data.records).flat()) !== null && _d !== void 0 ? _d : [],
-        };
-        const selectedIds = selectedIdsRef.current.filter((x) => finalData.records.some((y) => y[schema.idAttribute] === x));
+        const selectedIds = selectedIdsRef.current.filter((x) => data.records.some((y) => y[schema.idAttribute] === x));
         setState({
-            data: finalData,
+            data,
             selectedIds,
         });
     }, [data, setState, schema.idAttribute]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/app",
-  "version": "0.0.17-alpha.40",
+  "version": "0.0.17-alpha.42",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -39,5 +39,5 @@
     "react-hook-form": "7.52.2",
     "yup": "^1.4.0"
   },
-  "gitHead": "5141e4c378ed0b2aac011927e4d6c10c797624e0"
+  "gitHead": "c5b091139a9d3cf973f69f848b5df0a8ee8c63e7"
 }

package/transport/hooks/useRetriveRecords.d.ts

@@ -0,0 +1,32 @@
+import { SortingState } from '@headless-adminapp/core/experience/view';
+import { InferredSchemaType, Schema, SchemaAttributes } from '@headless-adminapp/core/schema';
+import { Filter } from '@headless-adminapp/core/transport';
+import { QueryKey } from '@tanstack/react-query';
+interface UseRetriveRecordProps<S extends SchemaAttributes = SchemaAttributes> {
+    schema: Schema<S>;
+    search: string;
+    filter: Filter | null;
+    sorting: SortingState<S>;
+    columns: string[];
+    expand?: Partial<Record<string, string[]>>;
+    maxRecords: number;
+}
+export declare function useRetrieveRecordsKey<S extends SchemaAttributes = SchemaAttributes>({ schema, search, filter, sorting, columns, expand, maxRecords, }: UseRetriveRecordProps<S>): (string | number | Filter | SortingState<S> | string[] | Partial<Record<string, string[]>> | null | undefined)[];
+export declare function useClearDataExceptFirstPage(queryKey: QueryKey): void;
+export declare function useRetriveRecords<S extends SchemaAttributes = SchemaAttributes>(queryKey: QueryKey, { columns, expand, filter, maxRecords, schema, search, sorting, }: UseRetriveRecordProps): {
+    data: {
+        logicalName: string;
+        count: number;
+        records: import("@headless-adminapp/core/transport").Data<InferredSchemaType<S>>[];
+    } | null;
+    isFetching: boolean;
+    hasNextPage: boolean;
+    fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<import("@tanstack/react-query").InfiniteData<{
+        params: {
+            pageIndex: number;
+        };
+        data: import("@headless-adminapp/core/transport").RetriveRecordsResult<InferredSchemaType<S>>;
+    }, unknown>, Error>>;
+    isFetchingNextPage: boolean;
+};
+export {};

package/transport/hooks/useRetriveRecords.js

@@ -0,0 +1,120 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRetrieveRecordsKey = useRetrieveRecordsKey;
+exports.useClearDataExceptFirstPage = useClearDataExceptFirstPage;
+exports.useRetriveRecords = useRetriveRecords;
+const transport_1 = require("@headless-adminapp/app/transport");
+const react_query_1 = require("@tanstack/react-query");
+const react_1 = require("react");
+const ROWS_PER_PAGE = 100;
+function useRetrieveRecordsKey({ schema, search, filter, sorting, columns, expand, maxRecords, }) {
+    const queryKey = (0, react_1.useMemo)(() => [
+        'data',
+        'retriveRecords',
+        schema.logicalName,
+        search,
+        filter,
+        sorting,
+        columns,
+        expand,
+        maxRecords,
+    ], [schema.logicalName, search, filter, sorting, columns, expand, maxRecords]);
+    return queryKey;
+}
+function useClearDataExceptFirstPage(queryKey) {
+    const queryClient = (0, react_query_1.useQueryClient)();
+    (0, react_1.useEffect)(() => {
+        return () => {
+            // Clear all pages except the first one when the component is unmounted
+            queryClient.setQueryData(queryKey, (oldData) => {
+                if (!oldData) {
+                    return oldData;
+                }
+                if (!oldData.pageParams.length || !oldData.pages.length) {
+                    return oldData;
+                }
+                return {
+                    pageParams: [oldData.pageParams[0]],
+                    pages: [oldData.pages[0]],
+                };
+            });
+        };
+    }, [queryClient, queryKey]);
+}
+function useRetriveRecords(queryKey, { columns, expand, filter, maxRecords, schema, search, sorting, }) {
+    const dataService = (0, transport_1.useDataService)();
+    const { data, isFetching, hasNextPage, fetchNextPage, isFetchingNextPage } = (0, react_query_1.useInfiniteQuery)({
+        queryKey: queryKey,
+        queryFn: (queryContext) => __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            const params = (_a = queryContext.pageParam) !== null && _a !== void 0 ? _a : {
+                pageIndex: 0,
+            };
+            const skip = params.pageIndex * ROWS_PER_PAGE;
+            const limit = Math.min(ROWS_PER_PAGE, Math.max(0, maxRecords - skip));
+            if (limit <= 0) {
+                return {
+                    params: params,
+                    data: {
+                        logicalName: schema.logicalName,
+                        count: 0,
+                        records: [],
+                    },
+                };
+            }
+            const result = yield dataService.retriveRecords({
+                logicalName: schema.logicalName,
+                search,
+                columns: columns,
+                expand,
+                filter,
+                skip,
+                limit,
+                sort: sorting,
+            });
+            return {
+                params: params,
+                data: result,
+            };
+        }),
+        getNextPageParam: (lastPage) => {
+            if (lastPage.data.count <
+                ROWS_PER_PAGE * (lastPage.params.pageIndex + 1)) {
+                return undefined;
+            }
+            return {
+                pageIndex: lastPage.params.pageIndex + 1,
+            };
+        },
+        initialPageParam: {
+            pageIndex: 0,
+        },
+    });
+    const finalData = (0, react_1.useMemo)(() => {
+        var _a, _b, _c, _d;
+        if (!(data === null || data === void 0 ? void 0 : data.pages.length)) {
+            return null;
+        }
+        return {
+            logicalName: (_a = data === null || data === void 0 ? void 0 : data.pages) === null || _a === void 0 ? void 0 : _a[0].data.logicalName,
+            count: (_c = (_b = data === null || data === void 0 ? void 0 : data.pages) === null || _b === void 0 ? void 0 : _b[0].data.count) !== null && _c !== void 0 ? _c : 0,
+            records: (_d = data === null || data === void 0 ? void 0 : data.pages.map((x) => x.data.records).flat()) !== null && _d !== void 0 ? _d : [],
+        };
+    }, [data]);
+    return {
+        data: finalData,
+        isFetching,
+        hasNextPage,
+        fetchNextPage,
+        isFetchingNextPage,
+    };
+}

package/utils/color.d.ts

@@ -0,0 +1 @@
+export declare function isColorDark(color: string): boolean;

package/utils/color.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isColorDark = isColorDark;
+function isColorDark(color) {
+    if (color.startsWith('#')) {
+        color = color.substring(1);
+    }
+    const rgb = parseInt(color, 16);
+    const r = (rgb >> 16) & 0xff;
+    const g = (rgb >> 8) & 0xff;
+    const b = (rgb >> 0) & 0xff;
+    const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+    return luma < 128;
+}

package/utils/getAttributeFormattedValue.d.ts

@@ -7,6 +7,7 @@ export declare function getAttributeFormattedValue<A extends Attribute = Attribu
     maxCount?: number;
     strings?: AttributeFormattedValueStringsSet;
     dateFormat?: string;
+    timeFormat?: string;
     locale?: string;
     currency?: string;
     currencySign?: 'accounting' | 'standard';

package/utils/getAttributeFormattedValue.js

@@ -14,28 +14,30 @@ const defaultAttributeFormattedValueStrings = {
     no: 'No',
 };
 const defaultDateFormat = 'YYYY-MM-DD';
+const defaultTimeFormat = 'HH:mm';
 const defaultLocale = 'en-US';
 const defaultCurrency = 'USD';
 const defaultCurrencySign = 'accounting';
 const defaultCurrencyDisplay = 'symbol';
 function getAttributeFormattedValue(attribute, value, options) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     if (value === null || value === undefined) {
         return null;
     }
     const strings = (_a = options === null || options === void 0 ? void 0 : options.strings) !== null && _a !== void 0 ? _a : defaultAttributeFormattedValueStrings;
     const dateFormat = (_b = options === null || options === void 0 ? void 0 : options.dateFormat) !== null && _b !== void 0 ? _b : defaultDateFormat;
-    const locale = (_c = options === null || options === void 0 ? void 0 : options.locale) !== null && _c !== void 0 ? _c : defaultLocale;
-    const currency = (_d = options === null || options === void 0 ? void 0 : options.currency) !== null && _d !== void 0 ? _d : defaultCurrency;
-    const currencySign = (_e = options === null || options === void 0 ? void 0 : options.currencySign) !== null && _e !== void 0 ? _e : defaultCurrencySign;
-    const currencyDisplay = (_f = options === null || options === void 0 ? void 0 : options.currencyDisplay) !== null && _f !== void 0 ? _f : defaultCurrencyDisplay;
+    const timeFormat = (_c = options === null || options === void 0 ? void 0 : options.timeFormat) !== null && _c !== void 0 ? _c : defaultTimeFormat;
+    const locale = (_d = options === null || options === void 0 ? void 0 : options.locale) !== null && _d !== void 0 ? _d : defaultLocale;
+    const currency = (_e = options === null || options === void 0 ? void 0 : options.currency) !== null && _e !== void 0 ? _e : defaultCurrency;
+    const currencySign = (_f = options === null || options === void 0 ? void 0 : options.currencySign) !== null && _f !== void 0 ? _f : defaultCurrencySign;
+    const currencyDisplay = (_g = options === null || options === void 0 ? void 0 : options.currencyDisplay) !== null && _g !== void 0 ? _g : defaultCurrencyDisplay;
     switch (attribute.type) {
         case 'boolean':
             return value
-                ? (_g = attribute.trueLabel) !== null && _g !== void 0 ? _g : strings.yes
-                : (_h = attribute.falseLabel) !== null && _h !== void 0 ? _h : strings.no;
+                ? (_h = attribute.trueLabel) !== null && _h !== void 0 ? _h : strings.yes
+                : (_j = attribute.falseLabel) !== null && _j !== void 0 ? _j : strings.no;
         case 'choice':
-            return ((_j = attribute.options.find((option) => option.value === value)) !== null && _j !== void 0 ? _j : {
+            return ((_k = attribute.options.find((option) => option.value === value)) !== null && _k !== void 0 ? _k : {
                 label: '',
             }).label;
         case 'choices':
@@ -48,9 +50,16 @@ function getAttributeFormattedValue(attribute, value, options) {
             })
                 .join(', ');
         case 'date':
-            return (0, dayjs_1.default)(value)
-                .tz(options === null || options === void 0 ? void 0 : options.timezone)
-                .format(dateFormat);
+            if (attribute.format === 'datetime') {
+                return (0, dayjs_1.default)(value)
+                    .tz(options === null || options === void 0 ? void 0 : options.timezone)
+                    .format(dateFormat + ' ' + timeFormat);
+            }
+            else {
+                return (0, dayjs_1.default)(value)
+                    .tz(options === null || options === void 0 ? void 0 : options.timezone)
+                    .format(dateFormat);
+            }
         case 'daterange':
             if (!value)
                 return null;
@@ -92,7 +101,7 @@ function getAttributeFormattedValue(attribute, value, options) {
         case 'number':
             return new Intl.NumberFormat(locale).format(value);
         case 'attachment':
-            return (_k = value === null || value === void 0 ? void 0 : value.url) !== null && _k !== void 0 ? _k : null;
+            return (_l = value === null || value === void 0 ? void 0 : value.url) !== null && _l !== void 0 ? _l : null;
         default:
             return typeof value === 'object'
                 ? JSON.stringify(value)