@firecms/core 3.0.0-alpha.64 → 3.0.0-alpha.65

package/dist/types/collections.d.ts

@@ -67,7 +67,7 @@ export interface EntityCollection<M extends Record<string, any> = any, UserType
     properties: PropertiesOrBuilders<M>;
     /**
      * Can this collection be edited by the end user.
-     * Defaults to `false`.
+     * Defaults to `true`.
      * Keep in mind that you can also set this prop to individual properties.
      */
     editable?: boolean;

package/dist/types/datasource.d.ts

@@ -156,7 +156,7 @@ export type SaveEntityDelegateProps<M extends Record<string, any> = any> = Omit<
 export type FetchCollectionDelegateProps<M extends Record<string, any> = any> = Omit<FetchCollectionProps<M>, "collection"> & {
     isCollectionGroup?: boolean;
 };
-export type ListenCollectionDelegateProps<M extends Record<string, any> = any> = Omit<ListenCollectionProps<M>, "collection"> & {
+export type ListenCollectionDelegateProps<M extends Record<string, any> = any> = ListenCollectionProps<M> & {
     isCollectionGroup?: boolean;
 };
 export interface DataSourceDelegate {

package/dist/types/dialogs_controller.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 /**
  * Controller to open the side dialog
  * @group Hooks and utilities
@@ -26,5 +27,6 @@ export interface DialogControllerEntryProps {
      */
     Component: React.ComponentType<{
         open: boolean;
+        closeDialog: () => void;
     }>;
 }

package/dist/types/entity_actions.d.ts

@@ -7,9 +7,11 @@ import { SideEntityController } from "./side_entity_controller";
 export type EntityAction<M extends object = any, UserType extends User = User> = {
     name: string;
     icon?: React.ReactElement;
-    onClick: (props: EntityActionClickProps<M, UserType>) => Promise<void>;
+    onClick: (props: EntityActionClickProps<M, UserType>) => Promise<void> | void;
     /**
-     * Show this action in the menu, defaults to true
+     * Show this action collapsed in the menu of the collection view.
+     * Defaults to true
+     * If false, the action will be shown in the menu
      */
     collapsed?: boolean;
     /**

package/dist/types/plugins.d.ts

@@ -97,6 +97,16 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollec
         };
     };
     collectionView?: {
+        showTextSearchBar?: (props: {
+            context: FireCMSContext;
+            path: string;
+            collection: EC;
+        }) => boolean;
+        onTextSearchClick?: (props: {
+            context: FireCMSContext;
+            path: string;
+            collection: EC;
+        }) => Promise<boolean>;
         /**
          * Use this method to inject widgets to the entity collections header
          * @param props

package/dist/util/index.d.ts

@@ -8,7 +8,6 @@ export * from "./paths";
 export * from "./regexp";
 export * from "./navigation_utils";
 export * from "./useDebounce";
-export * from "./useDebounceValue";
 export * from "./property_utils";
 export * from "./resolutions";
 export * from "./permissions";

package/dist/util/navigation_utils.d.ts

@@ -1,5 +1,4 @@
 import { EntityCollection } from "../types";
-export declare function unslugify(slug: string): string;
 export declare function removeInitialAndTrailingSlashes(s: string): string;
 export declare function removeInitialSlash(s: string): string;
 export declare function removeTrailingSlash(s: string): string;

package/dist/util/strings.d.ts

@@ -3,3 +3,4 @@ export declare const toSnakeCase: (str: string) => string;
 export declare function randomString(strLength?: number): string;
 export declare function randomColor(): string;
 export declare function slugify(text?: string, separator?: string, lowercase?: boolean): string;
+export declare function unslugify(slug: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@firecms/core",
-  "version": "3.0.0-alpha.64",
+  "version": "3.0.0-alpha.65",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -45,7 +45,7 @@
     "generateIcons": "ts-node --esm src/icons/generateIcons.ts"
   },
   "dependencies": {
-    "@firecms/ui": "^3.0.0-alpha.64",
+    "@firecms/ui": "^3.0.0-alpha.65",
     "@fontsource/ibm-plex-mono": "^5.0.8",
     "@fontsource/roboto": "^5.0.8",
     "@hello-pangea/dnd": "^16.5.0",
@@ -116,7 +116,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "da6a7aca05fc7b09614f9d67409881e0cefd27f2",
+  "gitHead": "36de2bb0fb9e1baa20262d3c520830389e688f91",
   "publishConfig": {
     "access": "public"
   }

package/src/components/EntityCollectionTable/EntityCollectionTable.tsx

@@ -5,7 +5,6 @@ import {
     AdditionalFieldDelegate,
     CollectionSize,
     Entity,
-    EntityCollection,
     FilterValues,
     FireCMSContext,
     ResolvedProperty,
@@ -111,7 +110,9 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
          AdditionalHeaderWidget,
          additionalIDHeaderWidget,
          emptyComponent,
-         getIdColumnWidth
+         getIdColumnWidth,
+         onTextSearchClick,
+         textSearchLoading
      }: EntityCollectionTableProps<M>) {
 
         const largeLayout = useLargeLayout();
@@ -394,6 +395,8 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
                         forceFilter={disabledFilterChange}
                         filterIsSet={filterIsSet}
                         onTextSearch={textSearchEnabled ? onTextSearch : undefined}
+                        textSearchLoading={textSearchLoading}
+                        onTextSearchClick={textSearchEnabled ? onTextSearchClick : undefined}
                         clearFilter={clearFilter}
                         size={size}
                         onSizeChanged={updateSize}
@@ -515,4 +518,3 @@ function filterableProperty(property: ResolvedProperty, partOfArray = false): bo
     }
     return ["string", "number", "boolean", "date", "reference", "array"].includes(property.dataType);
 }
-

package/src/components/EntityCollectionTable/EntityCollectionTableProps.tsx

@@ -132,6 +132,10 @@ export type EntityCollectionTableProps<M extends Record<string, any>,
     emptyComponent?: React.ReactNode;
 
     getIdColumnWidth?: () => number;
+
+    onTextSearchClick?: () => void;
+
+    textSearchLoading?: boolean;
 }
 
 export type GetPropertyForProps<M extends Record<string, any>> = {

package/src/components/EntityCollectionTable/internal/CollectionTableToolbar.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 
 import {
     Button,
@@ -21,15 +21,27 @@ interface CollectionTableToolbarProps {
     actionsStart?: React.ReactNode;
     actions?: React.ReactNode;
     title?: React.ReactNode,
+    onTextSearchClick?: () => void;
     onTextSearch?: (searchString?: string) => void;
     onSizeChanged: (size: CollectionSize) => void;
     clearFilter?: () => void;
+    textSearchLoading?: boolean;
 }
 
 export function CollectionTableToolbar(props: CollectionTableToolbarProps) {
 
+    const searchInputRef = React.useRef<HTMLInputElement>(null);
     const largeLayout = useLargeLayout();
 
+    const searchLoading = React.useRef<boolean>(false);
+
+    useEffect(() => {
+        if (searchInputRef.current && searchLoading.current && !props.textSearchLoading) {
+            searchInputRef.current.focus();
+        }
+        searchLoading.current = props.textSearchLoading ?? false;
+    }, [props.textSearchLoading]);
+
     const clearFilterButton = !props.forceFilter && props.filterIsSet && props.clearFilter &&
         <Button
             variant={"outlined"}
@@ -82,12 +94,15 @@ export function CollectionTableToolbar(props: CollectionTableToolbarProps) {
                         <CircularProgress size={"small"}/>}
                 </div>}
 
-                {props.onTextSearch &&
+                {(props.onTextSearch || props.onTextSearchClick) &&
                     <SearchBar
                         key={"search-bar"}
-                        onTextSearch={props.onTextSearch}
-                        expandable={true}/>
-                }
+                        inputRef={searchInputRef}
+                        loading={props.textSearchLoading}
+                        disabled={Boolean(props.onTextSearchClick)}
+                        onClick={props.onTextSearchClick}
+                        onTextSearch={props.onTextSearchClick ? undefined : props.onTextSearch}
+                        expandable={true}/>}
 
                 {props.actions}
 

package/src/components/EntityCollectionTable/useEntityCollectionTableController.tsx

@@ -1,8 +1,16 @@
-import React, { useCallback, useMemo } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 
-import { useCollectionFetch, useDataSource, useNavigationController } from "../../hooks";
+import { useDataSource, useFireCMSContext, useNavigationController } from "../../hooks";
 import { useDataOrder } from "../../hooks/data/useDataOrder";
-import { Entity, EntityCollection, FilterValues, SelectedCellProps, TableController, User } from "../../types";
+import {
+    Entity,
+    EntityCollection,
+    FilterValues,
+    FireCMSContext,
+    SelectedCellProps,
+    TableController,
+    User
+} from "../../types";
 import { useDebouncedData } from "./useDebouncedData";
 
 const DEFAULT_PAGE_SIZE = 50;
@@ -44,7 +52,6 @@ export function useEntityCollectionTableController<M extends Record<string, any>
     } = collection;
 
     const [popupCell, setPopupCell] = React.useState<SelectedCellProps<M> | undefined>(undefined);
-
     const navigation = useNavigationController();
     const dataSource = useDataSource();
     const resolvedPath = useMemo(() => navigation.resolveAliasesFrom(fullPath), [fullPath, navigation.resolveAliasesFrom]);
@@ -56,6 +63,28 @@ export function useEntityCollectionTableController<M extends Record<string, any>
     const [searchString, setSearchString] = React.useState<string | undefined>();
     const [itemCount, setItemCount] = React.useState<number | undefined>(paginationEnabled ? pageSize : undefined);
 
+    const initialSortInternal = useMemo(() => {
+        if (initialSort && forceFilter && !checkFilterCombination(forceFilter, initialSort)) {
+            console.warn("Initial sort is not compatible with the force filter. Ignoring initial sort");
+            return undefined;
+        }
+        return initialSort;
+    }, [initialSort, forceFilter]);
+
+    const [filterValues, setFilterValues] = React.useState<FilterValues<Extract<keyof M, string>> | undefined>(forceFilter ?? initialFilter ?? undefined);
+    const [sortBy, setSortBy] = React.useState<[Extract<keyof M, string>, "asc" | "desc"] | undefined>(initialSortInternal);
+
+    const sortByProperty = sortBy ? sortBy[0] : undefined;
+    const currentSort = sortBy ? sortBy[1] : undefined;
+
+    const context: FireCMSContext<UserType> = useFireCMSContext();
+
+    const [rawData, setRawData] = useState<Entity<M>[]>([]);
+
+    const [dataLoading, setDataLoading] = useState<boolean>(false);
+    const [dataLoadingError, setDataLoadingError] = useState<Error | undefined>();
+    const [noMoreToLoad, setNoMoreToLoad] = useState<boolean>(false);
+
     const checkFilterCombination = useCallback((filterValues: FilterValues<any>,
                                                 sortBy?: [string, "asc" | "desc"]) => {
         if (!dataSource.isFilterCombinationValid)
@@ -68,17 +97,6 @@ export function useEntityCollectionTableController<M extends Record<string, any>
         })
     }, []);
 
-    const initialSortInternal = useMemo(() => {
-        if (initialSort && forceFilter && !checkFilterCombination(forceFilter, initialSort)) {
-            console.warn("Initial sort is not compatible with the force filter. Ignoring initial sort");
-            return undefined;
-        }
-        return initialSort;
-    }, [initialSort, forceFilter]);
-
-    const [filterValues, setFilterValues] = React.useState<FilterValues<Extract<keyof M, string>> | undefined>(forceFilter ?? initialFilter ?? undefined);
-    const [sortBy, setSortBy] = React.useState<[Extract<keyof M, string>, "asc" | "desc"] | undefined>(initialSortInternal);
-
     const clearFilter = useCallback(() => setFilterValues(forceFilter ?? undefined), [forceFilter]);
 
     const updateFilterValues = useCallback((updatedFilter: FilterValues<Extract<keyof M, string>> | undefined) => {
@@ -93,19 +111,71 @@ export function useEntityCollectionTableController<M extends Record<string, any>
         }
     }, [forceFilter]);
 
-    const {
-        data: rawData,
-        dataLoading,
-        noMoreToLoad,
-        dataLoadingError
-    } = useCollectionFetch<M, UserType>({
-        path: fullPath,
-        collection,
-        filterValues,
-        sortBy,
-        searchString,
-        itemCount
-    });
+    useEffect(() => {
+
+        setDataLoading(true);
+
+        const onEntitiesUpdate = async (entities: Entity<M>[]) => {
+            if (collection.callbacks?.onFetch) {
+                try {
+                    entities = await Promise.all(
+                        entities.map((entity) =>
+                            collection.callbacks!.onFetch!({
+                                collection,
+                                path: resolvedPath,
+                                entity,
+                                context
+                            })));
+                } catch (e: any) {
+                    console.error(e);
+                }
+            }
+            setDataLoading(false);
+            setDataLoadingError(undefined);
+            setRawData(entities.map(e => ({
+                ...e,
+                // values: sanitizeData(e.values, resolvedCollection.properties)
+            })));
+            setNoMoreToLoad(!itemCount || entities.length < itemCount);
+        };
+
+        const onError = (error: Error) => {
+            console.error("ERROR", error);
+            setDataLoading(false);
+            setRawData([]);
+            setDataLoadingError(error);
+        };
+
+        if (dataSource.listenCollection) {
+            return dataSource.listenCollection<M>({
+                path: resolvedPath,
+                collection,
+                onUpdate: onEntitiesUpdate,
+                onError,
+                searchString,
+                filter: filterValues,
+                limit: itemCount,
+                startAfter: undefined,
+                orderBy: sortByProperty,
+                order: currentSort
+            });
+        } else {
+            dataSource.fetchCollection<M>({
+                path: resolvedPath,
+                collection,
+                searchString,
+                filter: filterValues,
+                limit: itemCount,
+                startAfter: undefined,
+                orderBy: sortByProperty,
+                order: currentSort
+            })
+                .then(onEntitiesUpdate)
+                .catch(onError);
+            return () => {
+            };
+        }
+    }, [resolvedPath, itemCount, currentSort, sortByProperty, filterValues, searchString]);
 
     const orderedData = useDataOrder({
         data: rawData,

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -137,6 +137,7 @@ export const EntityCollectionView = React.memo(
         const [selectedNavigationEntity, setSelectedNavigationEntity] = useState<Entity<M> | undefined>(undefined);
         const [deleteEntityClicked, setDeleteEntityClicked] = React.useState<Entity<M> | Entity<M>[] | undefined>(undefined);
 
+        const [textSearchLoading, setTextSearchLoading] = useState<boolean>(false);
         const [lastDeleteTimestamp, setLastDeleteTimestamp] = React.useState<number>(0);
 
         // number of entities in the collection
@@ -299,7 +300,7 @@ export const EntityCollectionView = React.memo(
                                                                 propertyKey,
                                                                 onValueUpdated,
                                                                 setError,
-                                                                entity
+                                                                entity,
                                                             }) => {
 
             const updatedValues = setIn({ ...entity.values }, propertyKey, value);
@@ -426,7 +427,10 @@ export const EntityCollectionView = React.memo(
 
         const largeLayout = useLargeLayout();
 
-        const getActionsForEntity = useCallback(({ entity, customEntityActions }: { entity?: Entity<M>, customEntityActions?: EntityAction[] }): EntityAction[] => {
+        const getActionsForEntity = useCallback(({ entity, customEntityActions }: {
+            entity?: Entity<M>,
+            customEntityActions?: EntityAction[]
+        }): EntityAction[] => {
             const deleteEnabled = entity ? canDeleteEntity(collection, authController, fullPathToCollectionSegments(fullPath), entity) : true;
             const actions: EntityAction[] = [editEntityAction];
             if (createEnabled)
@@ -555,6 +559,35 @@ export const EntityCollectionView = React.memo(
             }
             : undefined;
 
+        const [textSearchInitialised, setTextSearchInitialised] = useState<boolean>(false);
+        let onTextSearchClick: (() => void) | undefined;
+        let textSearchEnabled = Boolean(collection.textSearchEnabled);
+        if (context?.plugins) {
+            const addTextSearchClickListener = context.plugins?.find(p => Boolean(p.collectionView?.onTextSearchClick));
+
+            onTextSearchClick = addTextSearchClickListener
+                ? () => {
+                    setTextSearchLoading(true);
+                    Promise.all(context.plugins?.map(p => {
+                        if (p.collectionView?.onTextSearchClick)
+                            return p.collectionView.onTextSearchClick({ context, path: resolvedFullPath, collection });
+                        return Promise.resolve(true);
+                    }) as Promise<boolean>[])
+                        .then((res) => {
+                            if (res.every(Boolean)) setTextSearchInitialised(true);
+                        })
+                        .finally(() => setTextSearchLoading(false));
+                }
+                : undefined;
+
+            context.plugins?.forEach(p => {
+                if (!textSearchEnabled)
+                    if (p.collectionView?.showTextSearchBar) {
+                        textSearchEnabled = p.collectionView.showTextSearchBar({ context, path: resolvedFullPath, collection });
+                    }
+            })
+        }
+
         return (
             <div className={cn("overflow-hidden h-full w-full", className)}
                  ref={containerRef}>
@@ -575,6 +608,9 @@ export const EntityCollectionView = React.memo(
                     defaultSize={collection.defaultSize}
                     properties={resolvedCollection.properties}
                     getPropertyFor={getPropertyFor}
+                    onTextSearchClick={textSearchInitialised ? undefined : onTextSearchClick}
+                    textSearchLoading={textSearchLoading}
+                    textSearchEnabled={textSearchEnabled}
                     actions={<EntityCollectionViewActions
                         parentCollectionIds={parentCollectionIds ?? []}
                         collection={collection}

package/src/components/EntityCollectionView/EntityCollectionViewActions.tsx

@@ -48,7 +48,6 @@ export function EntityCollectionViewActions<M extends Record<string, any>>({
                 id={`add_entity_${path}`}
                 onClick={onNewClick}
                 startIcon={<AddIcon/>}
-                size="large"
                 variant="filled"
                 color="primary">
                 Add {collection.singularName ?? collection.name}

package/src/components/ErrorView.tsx

@@ -26,7 +26,7 @@ export function ErrorView({
                               tooltip
                           }: ErrorViewProps): React.ReactElement {
     const component = error instanceof Error ? error.message : error;
-    console.log("ErrorView", error)
+    console.error("ErrorView", error)
 
     const body = (
         <div

package/src/components/HomePage/DefaultHomePage.tsx

@@ -133,6 +133,7 @@ export function DefaultHomePage({
                     <SearchBar onTextSearch={updateSearchResults}
                                placeholder={"Search collections"}
                                large={false}
+                               innerClassName={"w-full"}
                                className={"w-full flex-grow"}/>
                     {additionalActions}
                 </div>

package/src/contexts/DialogsProvider.tsx

@@ -44,7 +44,9 @@ export const DialogsProvider: React.FC<PropsWithChildren<{}>> = ({ children }) =
             {children}
             {dialogEntries.map((entry, i) => <entry.Component
                 key={`dialog_${i}`}
-                open={true}/>)}
+                open={true}
+                closeDialog={close}
+            />)}
         </DialogsControllerContext.Provider>
     );
 };

package/src/internal/useBuildDataSource.ts

@@ -121,7 +121,8 @@ export function useBuildDataSource({
                     order,
                     onUpdate,
                     onError,
-                    isCollectionGroup
+                    isCollectionGroup,
+                    collection
                 });
             }, [delegate, navigationController.getCollection])
             : undefined,

package/src/types/collections.ts

@@ -78,7 +78,7 @@ export interface EntityCollection<M extends Record<string, any> = any, UserType
 
     /**
      * Can this collection be edited by the end user.
-     * Defaults to `false`.
+     * Defaults to `true`.
      * Keep in mind that you can also set this prop to individual properties.
      */
     editable?: boolean;

package/src/types/datasource.ts

@@ -234,9 +234,9 @@ export type FetchCollectionDelegateProps<M extends Record<string, any> = any> =
 };
 
 export type ListenCollectionDelegateProps<M extends Record<string, any> = any> =
-    Omit<ListenCollectionProps<M>, "collection">
+    ListenCollectionProps<M>
     & {
-    isCollectionGroup?: boolean
+    isCollectionGroup?: boolean;
 };
 
 export interface DataSourceDelegate {

package/src/types/dialogs_controller.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+
 /**
  * Controller to open the side dialog
  * @group Hooks and utilities
@@ -26,6 +28,6 @@ export interface DialogControllerEntryProps {
     /**
      * The component type that will be rendered
      */
-    Component: React.ComponentType<{ open: boolean }>;
+    Component: React.ComponentType<{ open: boolean, closeDialog: () => void }>;
 
 }

package/src/types/entity_actions.tsx

@@ -8,9 +8,12 @@ import { SideEntityController } from "./side_entity_controller";
 export type EntityAction<M extends object = any, UserType extends User = User> = {
     name: string;
     icon?: React.ReactElement;
-    onClick: (props: EntityActionClickProps<M, UserType>) => Promise<void>;
+    onClick: (props: EntityActionClickProps<M, UserType>) => Promise<void> | void;
+
     /**
-     * Show this action in the menu, defaults to true
+     * Show this action collapsed in the menu of the collection view.
+     * Defaults to true
+     * If false, the action will be shown in the menu
      */
     collapsed?: boolean;
 

package/src/types/plugins.tsx

@@ -121,6 +121,19 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollec
     }
 
     collectionView?: {
+
+        showTextSearchBar?: (props: {
+            context: FireCMSContext,
+            path: string,
+            collection: EC
+        }) => boolean;
+
+        onTextSearchClick?: (props: {
+            context: FireCMSContext,
+            path: string,
+            collection: EC
+        }) => Promise<boolean>;
+
         /**
          * Use this method to inject widgets to the entity collections header
          * @param props

package/src/util/index.ts

@@ -8,7 +8,6 @@ export * from "./paths";
 export * from "./regexp";
 export * from "./navigation_utils";
 export * from "./useDebounce";
-export * from "./useDebounceValue";
 export * from "./property_utils";
 export * from "./resolutions";
 export * from "./permissions";

package/src/util/join_collections.ts

@@ -118,9 +118,11 @@ export function mergeCollection(target: EntityCollection,
     return resultCollection
 }
 
-function mergePropertyOrBuilder(target: Property, source: PropertyOrBuilder): PropertyOrBuilder {
+function mergePropertyOrBuilder(target: PropertyOrBuilder, source: PropertyOrBuilder): PropertyOrBuilder {
     if (isPropertyBuilder(source)) {
         return source;
+    } else if (isPropertyBuilder(target)) {
+        return target;
     } else {
         const mergedProperty = mergeDeep(target, source);
         const targetEditable = Boolean(target.editable);

package/src/util/navigation_utils.ts

@@ -1,20 +1,5 @@
 import { EntityCollection } from "../types";
 
-export function unslugify(slug: string): string {
-    if (slug.includes("-") || slug.includes("_") || !slug.includes(" ")) {
-        const result = slug.replace(/[-_]/g, " ");
-        return result.replace(/\w\S*/g, function (txt) {
-            return txt.charAt(0).toUpperCase() + txt.substr(1);
-        });
-    } else {
-        return slug;
-        // const unCamelCased = slug.replace(/([a-z])([A-Z])/g, "$1 $2");
-        // return unCamelCased.replace(/\b\w/g, function (l) {
-        //     return l.toUpperCase()
-        // });
-    }
-}
-
 export function removeInitialAndTrailingSlashes(s: string): string {
     return removeInitialSlash(removeTrailingSlash(s));
 }

package/src/util/strings.ts

@@ -49,3 +49,14 @@ export function slugify(text?: string, separator = "_", lowercase = true) {
         ? text.toLowerCase() // Convert the string to lowercase letters
         : text;
 }
+
+export function unslugify(slug: string): string {
+    if (slug.includes("-") || slug.includes("_") || !slug.includes(" ")) {
+        const result = slug.replace(/[-_]/g, " ");
+        return result.replace(/\w\S*/g, function (txt) {
+            return txt.charAt(0).toUpperCase() + txt.substr(1);
+        });
+    } else {
+        return slug;
+    }
+}

package/dist/util/useDebounceValue.d.ts

@@ -1 +0,0 @@
-export declare function useDebounceValue<T>(value: T, delay?: number): T;

package/src/util/useDebounceValue.ts

@@ -1,18 +0,0 @@
-import { useEffect, useState } from "react";
-
-export function useDebounceValue<T>(value: T, delay = 300): T {
-    // State and setters for debounced value
-    const [debouncedValue, setDebouncedValue] = useState(value);
-    useEffect(
-        () => {
-            const handler = setTimeout(() => {
-                setDebouncedValue(value);
-            }, delay);
-            return () => {
-                clearTimeout(handler);
-            };
-        },
-        [value, delay] // Only re-call effect if value or delay changes
-    );
-    return debouncedValue;
-}