@bigbinary/neeto-commons-frontend 2.0.65 → 2.0.66

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-commons-frontend",
-  "version": "2.0.65",
+  "version": "2.0.66",
   "description": "A package encapsulating common code across neeto projects including initializers, utility functions, common components and hooks and so on.",
   "repository": "git@github.com:bigbinary/neeto-commons-frontend.git",
   "author": "Amaljith K <amaljith.k@bigbinary.com>",

package/react-utils.d.ts

@@ -1,139 +1,309 @@
-import dayjs from "dayjs";
 import React from "react";
-export function resetAuthTokens(): void;
+import { RouteProps } from "react-router-dom";
+import { Notice } from "@honeybadger-io/js/dist/server/types/core/types";
+import { History } from "history";
+import { StoreApi, UseBoundStore } from "zustand";
 /**
  *
- * Curried: true
+ * ErrorBoundary which reports frontend errors to HoneyBadger
  *
- * It is a curried function that accepts a function as the first parameter and an
+ * This component will wrap its children with the error boundary provided by
  *
- * event as the second, and executes the given function with event.target.value
+ * @honeybadger-io/react package. In this component, we will create a honeybadger
  *
- * Usage:
+ * configuration object using the API key, environment and project version which we
+ *
+ * obtained from the globalProps and pass the created object to error boundary
+ *
+ * provided by honeybadger. We are also filtering the false-positive errors using
+ *
+ * beforeNotify method.
+ *
+ * For global error handling, we need to wrap the Main component with this
+ *
+ * HoneybadgerErrorBoundary component as shown below.
  *
  * @example 
  *
- * const onChange = val => console.log(`Value = ${val}`);
- * 
- * <input onChange={withEventTargetValue(onChange)} />;
- * 
- * // For example, in this case when user types "1" in the input field, "Value = 1" will be printed in the console.
+ * <HoneybadgerErrorBoundary
+ *   ErrorComponent={ErrorComponent}
+ *   filterErrors={notice => !/IgnorableError/.test(notice.message)}
+ * >
+ *   <Main />
+ * </HoneybadgerErrorBoundary>
  * @endexample
+ * ErrorComponent is the component which will be rendered when an error is thrown
+ *
+ * during rendering. This is an optional prop and if this prop is not provided then
+ *
+ * honeybadger will use DefaultErrorComponent for fallback UI.
+ *
+ * filterErrors is a function which takes the honeybadger notice as argument and
+ *
+ * returns a boolean. It should return true if the error is to be reported and
+ *
+ * false if not.
+ *
 */
-export function withEventTargetValue(func: (value: string) => void, event: React.ChangeEventHandler<HTMLInputElement>): void;
+export const HoneybadgerErrorBoundary: React.FC<{
+  ErrorComponent?: React.ReactNode | React.ComponentType<any>;
+  filterErrors?: (error: Notice) => boolean;
+}>;
 /**
  *
- * Curried: true
+ * A route that will restrict access to it based on a specified condition.
  *
- * It is a curried function that accepts a function as the first parameter and an
+ * If the given condition is true, it acts identical to a normal route. Otherwise
  *
- * event as the second, and executes the given function with event.target.value
+ * we have two options: it can either redirect user to a different path or it can
  *
- * Usage:
+ * render a supplied error page instead of the actual component in that route.
+ *
+ * If condition is not specified, it will assume the value of
+ *
+ * globalProps.authenticated by default.
+ *
+ * Here are some example use cases:
+ *
+*/
+export function PrivateRoute(props: {
+  condition?: boolean;
+  redirectRoute?: string;
+  errorPage?: React.ReactNode;
+} & RouteProps): JSX.Element;
+type OptionsType = {
+  root?: Element | null;
+  rootMargin?: String;
+  threshold?: Number | Number[];
+};
+/**
+ *
+ * This hook allows you to detect when a target element intersects with an ancestor
+ *
+ * element. In simple words, it lets us know whether the target element is visible
+ *
+ * on the screen.
+ *
+ * This hook will accept two arguments an element and an options object. Passing an
+ *
+ * element using ref requires you to pass ref.current as an argument or pass an
+ *
+ * element that you accessed via getElementById/querySelector etc. Since it uses
+ *
+ * Intersection Observer API you can pass observer options such as root,
+ *
+ * rootMargin, threshold, etc as the second argument. You can read more about
+ *
+ * Intersection Observer API and the supported options from
+ *
+ * MDN Intersection Observer API.
  *
  * @example 
  *
- * const onChange = val => console.log(`Value = ${val}`);
- * 
- * <input onChange={withEventTargetValue(onChange)} />;
+ * const ref = useRef(null);
+ * const isHeadingWrapperVisible = useIsElementVisibleInDom(ref.current, {
+ *   threshold: 0.5,
+ * });
  * 
- * // For example, in this case when user types "1" in the input field, "Value = 1" will be printed in the console.
+ * return (
+ *   <div>
+ *     <div style={{ height: "100vh" }}>
+ *       <h1>Scroll down to next section</h1>
+ *     </div>
+ *     <div ref={ref}>
+ *       {isHeadingWrapperVisible && <h1>Hello I'm on the screen</h1>}
+ *     </div>
+ *   </div>
+ * );
  * @endexample
 */
-export function withEventTargetValue(func: (value: string) => void): (event: React.ChangeEventHandler<HTMLInputElement>) => void;
+export function useIsElementVisibleInDom(target: Element | null, options?: OptionsType): Boolean;
 /**
  *
- * Curried: false
+ * Wrap this hook around a frequently updating state to get the previous value
  *
- * This function returns the subdomain of the current URL.
+ * until the updates are stopped. We can use this to limit the number of API calls
  *
- * Usage:
+ * triggered from a user input like search box.
+ *
+ * This hook accepts a value and a delay as an argument. The value returned by the
+ *
+ * hook will only reflect the latest value when the hook has not been called for
+ *
+ * the specified time period delay.
  *
  * @example 
  *
- * // Let the current url be "https://spinkart.example.com".
- * getSubdomain();
+ * const [searchKey, setSearchKey] = useState("");
+ * const debouncedSearchKey = useDebounce(searchKey, 300);
  * 
- * // output: spinkart
+ * useEffect(() => {
+ *   // will be triggered with the latest value of input
+ *   // only after 300ms after the user stops typing
+ * }, [debouncedSearchKey]);
+ * 
+ * // component
+ * <Input onChange={e => setSearchKey(e.target.value)} />;
  * @endexample
 */
-export function getSubdomain(): string;
+export function useDebounce<T>(value: T, delay?: number): T;
 /**
  *
- * Curried: false
- *
- * Returns the specified hardcoded data after some delay for simulating an API
+ * Similar to useDebounce but this hook accepts a function as an argument. That
  *
- * call.
+ * function will be executed only when the dependencies stops changing for a while.
  *
- * This function will simulate an API call and retrieve the hardcoded success/error
+ * This hook accepts a function as an argument. It will return a debounced version
  *
- * responses after some delay based on the given error probability. This function
+ * of that function. The debounced function comes with a cancel method which can
  *
- * is helpful when we are building the frontend before the backend is ready.
+ * be used to cancel the delayed function invocation.
  *
  * @example 
  *
- * simulateApiCall(hardCodedResponseData, hardCodedErrorResponse);
+ * const searchForProducts = useFuncDebounce(async key => {
+ *   // this function will be triggered once after user stops typing for 300ms
+ *   const products = await productsApi.fetch(key);
+ *   // do something with the products
+ * }, 300);
+ * 
+ * // component
+ * <Input onChange={e => searchForProducts(e.target.value)} />;
+ * <Button onClick={() => searchForProducts.cancel()}>Cancel search</Button>;
  * @endexample
 */
-export function simulateApiCall<T>(result: T, error?: any, errorProbability?: number, delayMs?: number): Promise<T>;
+export function useFuncDebounce<F extends Function>(func: F, delay?: number): F & {
+  cancel: () => void;
+};
 /**
  *
- * Curried: false
+ * This hook can be used to sync state to local storage so that it persists through
  *
- * Copies the given string to clipboard and shows a success toaster message.
+ * a page refresh.
  *
- * This function accepts a string as an argument and copies it to the clipboard.
+ * Note: use this hook only if you need the component to re-render while
  *
- * Also, it accepts two optional arguments: a boolean flag to indicate whether a
+ * updating the local storage value. If all you need is plain read and write
  *
- * toaster should be shown and a message to be shown in the toaster. By default the
+ * operations on the localStorage, prefer the vanilla localStorage API functions.
  *
- * show toaster flag is set to true and the toaster message is set to "Copied to
+ * This hook is very similar to useState. The only difference is that you must
  *
- * clipboard!". You can override these defaults by passing the appropriate values
+ * pass the storage key in the 1st parameter so that we can default to that value
  *
- * to the function.
+ * on page load instead of specified initial value.
  *
  * @example 
  *
- * copyToClipboard("https://spinkart.example.com", {
- *   showToastr: true,
- *   message: "URL copied successfully!",
- * });
+ * // here "theme" is the storage key and "light" is the initial value
+ * const [theme, setTheme] = useLocalStorage("theme", "light");
  * 
- * // If the URL is copied to the clipboard, a toaster message will be shown with the message "URL copied successfully!"
+ * return (
+ *   <Select
+ *     options={[
+ *       { label: "light", value: "light" },
+ *       { label: "dark", value: "dark" },
+ *     ]}
+ *     // when we change the theme, the same will be stored in local storage with the key "theme"
+ *     onChange={option => setTheme(option.value)}
+ *   />
+ * );
  * @endexample
+ * To remove the value from local storage we can call the setter method with null
+ *
+ * or undefined.
+ *
 */
-export function copyToClipboard(text: string, configs?: {
-  showToastr?: boolean;
-  message?: string;
-}): void;
+export function useLocalStorage<T>(key: string, initialValue?: T): [T, (value: T) => void];
 /**
  *
- * Curried: false
+ * A hook used to detect clicks outside of a specified element.
  *
- * Builds a URL by inflating route like template string (example:
+ * This hook will accept two arguments: a ref and a handler. The ref is a reference
  *
- * /products/:productId/variants/:id) using the given params. Any extra
+ * to the element for which we want to detect outside clicks and handler is the
  *
- * properties in the params will be attached as query parameters to the URL.
+ * action we want to perform when we click outside the element.
  *
  * @example 
  *
- * buildUrl("/products/:id", { id: "123" }); // output "/products/123"
- * buildUrl("/products", { search: "abc" }); // output "/products?search=abc"
- * buildUrl("/products/:productId/variants/:variantId/attributes", {
- *   productId: "123",
- *   variantId: "456",
- *   search: "abc",
- *   page: 1,
- *   per_page: 10,
- * }); // output "/products/123/variants/456/attributes?page=1&per_page=10&search=abc"
+ * const ref = useRef();
+ * const [isModalOpen, setIsModalOpen] = useState(false);
+ * 
+ * useOnClickOutside(ref, () => setIsModalOpen(false));
+ * 
+ * return (
+ *   <>
+ *     { When we click inside of this modal, it won't close. But when we click outside, it'll close! }
+ *     {isModalOpen && (
+ *       <div ref={ref}>
+ *         <p>Hello from Modal!</p>
+ *       </div>
+ *     )}
+ *     <button onClick={() => setIsModalOpen(true)}>Open Modal</button>
+ *   </>
+ * );
  * @endexample
 */
-export function buildUrl(route: string, params: object): string;
+export function useOnClickOutside<T>(ref: React.MutableRefObject<T>, handler: (event: MouseEvent | TouchEvent) => any);
+/**
+ *
+ * A hook that returns the previous value of a variable before the last update.
+ *
+ * In the below example, when count is updated to 10, previousCount will be 0.
+ *
+ * If count is again updated to 20, previousCount will be 10.
+ *
+ * @example 
+ *
+ * const [count, setCount] = useState(0);
+ * const previousCount = usePrevious(count);
+ * @endexample
+*/
+export function usePrevious<T>(value: T): T;
+/**
+ *
+ * A hook very similar to useEffect. The only difference is that it will not
+ *
+ * execute the callback in the initial mount. The callback will be triggered only
+ *
+ * if the dependencies change.
+ *
+*/
+export function useUpdateEffect(effect: () => void, deps: any[]): void;
+/**
+ *
+ * This hook will return true if any API request fails with 404 or 403 status.
+ *
+ * Until any such API response is received, it will return false. It can be used
+ *
+ * to render ErrorPage conditionally. Refer:
+ *
+ * axios error response handler
+ *
+ * for more details.
+ *
+*/
+export function useDisplayErrorPage(): boolean;
+/**
+ *
+ * A zustand store containing the status code of the latest API failed with 403 or
+ *
+ * 404 status (statusCode) and a boolean flag (showErrorPage) stating whether
+ *
+ * the error page should be rendered or not.
+ *
+ * This store is automatically managed by neeto-commons-frontend using its axios
+ *
+ * interceptors. You can also use this store if you need to display an error page
+ *
+ * from your frontend logic.
+ *
+*/
+export const useErrorDisplayStore: UseBoundStore<StoreApi<{
+  showErrorPage: boolean;
+  statusCode: number;
+}>>;
 type TimerType = {
   lastUpdated: number;
   interval: number;
@@ -176,168 +346,263 @@ type TimerType = {
  * @endexample
 */
 export function useTimer(interval: number): TimerType;
-type DateTimeType = string | number | dayjs.Dayjs | Date | null | undefined;
-export const timeFormat: {
-  fromNow: (time: DateTimeType) => string;
-  time: (time: DateTimeType) => string;
-  date: (time: DateTimeType) => string;
-  dateWeek: (time: DateTimeType) => string;
-  dateWeekWithoutYear: (time: DateTimeType) => string;
-  dateTime: (time: DateTimeType) => string;
-  dateWeekTime: (time: DateTimeType) => string;
-  extended: (time: DateTimeType) => string;
-};
-export const dateFormat: typeof timeFormat;
+type ZustandConfigType = (set: (data: any) => void, get: () => any, api: any) => any;
 /**
  *
- * Curried: false
+ * A zustand middleware function that prevents the actions from getting
+ *
+ * overwritten.
+ *
+ * Usage:
+ *
+ * @example 
+ *
+ * const useStore = create(
+ *   withImmutableActions(set => ({
+ *     value: 10,
+ *     // other properties ...
+ *     setValue: ({ value }) => set({ value }),
+ *     setGlobalState: set,
+ *     // other actions ...
+ *   }))
+ * );
+ * @endexample
+ * In the above example, usages like this will throw an error, because, actions
+ *
+ * should not be overwritten:
  *
- * Converts the given number to a locale string (converts to a comma separated
+ * @example 
  *
- * string). It automatically identifies the locale using globalProps. If a valid
+ * setGlobalState({ value: 0, setValue: () => {} });
+ * @endexample
+ * Actions can be assigned its own value. This is to ensure that curried ramda
  *
- * value isn't present in globalProps, it will rely on the current browser's
+ * functions can be used in conjunction with zustand action. For example, this
  *
- * locale.
+ * usage will not throw any error:
  *
- * The function also accepts options, which will be forwarded to
+ * @example 
  *
- * Number.prototype.toLocaleString, which can be used for additional
+ * setGlobalState(state => ({ value: 0, setValue: state.setValue }));
+ * @endexample
+ * The 2nd parameter to overwrite the entire state will be ignored. Both of the
  *
- * configurations like rounding, currency, units etc.
+ * following lines of code work identical to each other:
  *
  * @example 
  *
- * toLocale(1000000); // "1,000,000" when locale is "en-US"
- * toLocale(1000000); // "10,00,000" when locale is "en-IN"
- * toLocale(1000000.987, { maximumFractionDigits: 2 }); // "1,000,000.99"
- * toLocale(1000000.987, {
- *   currencyDisplay: "narrowSymbol",
- *   style: "currency",
- *   currency: "INR",
- * }); // "₹1,000,000.99"
+ * setGlobalState(state => ({ value: 0 }), true);
+ * setGlobalState(state => ({ value: 0 }));
  * @endexample
 */
-export function toLocale(number: string | number, options?: Intl.NumberFormatOptions): string;
-type qsOptionsType = {
-  comma?: boolean | undefined;
-  delimiter?: string | RegExp | undefined;
-  depth?: number | false | undefined;
-  decoder?: ((str: string, defaultDecoder: any, charset: string, type: "key" | "value") => any) | undefined;
-  arrayLimit?: number | undefined;
-  parseArrays?: boolean | undefined;
-  allowDots?: boolean | undefined;
-  plainObjects?: boolean | undefined;
-  allowPrototypes?: boolean | undefined;
-  parameterLimit?: number | undefined;
-  strictNullHandling?: boolean | undefined;
-  ignoreQueryPrefix?: boolean | undefined;
-  charset?: "utf-8" | "iso-8859-1" | undefined;
-  charsetSentinel?: boolean | undefined;
-  interpretNumericEntities?: boolean | undefined;
+export function withImmutableActions(config: ZustandConfigType): ZustandConfigType;
+export declare type ZustandStoreHook = {
+  (selector: (state: any) => any, comparator?: (a: any, b: any) => boolean): any;
+  (): any;
 };
-type QueryParamsType = {
-  [key: string]: any;
+/**
+ *
+ * This hook calls onSubmit callback when Enter (aka Return) key is pressed. It
+ *
+ * will not submit when Shift + Enter is pressed. Shift + Enter can be used to
+ *
+ * add new lines to text area in the form.
+ *
+ * The hook accepts a callback, onSubmit, which will be called with no arguments
+ *
+ * when Enter key press is detected.
+ *
+ * The hook returns a ref. This need to be attached to the input element to be
+ *
+ * listened to.
+ *
+ * @example 
+ *
+ * const inputRef = useFieldSubmit(() => {
+ *   const inputValue = inputRef.current.value;
+ *   console.log(inputValue);
+ * });
+ * 
+ * return <textarea ref={inputRef} />;
+ * @endexample
+*/
+export function useFieldSubmit(onSubmit: () => any): {
+  current: HTMLInputElement & HTMLTextAreaElement;
 };
 /**
  *
- * Curried: false
+ * An HOC which sets the browser title with the given value when the wrapped
  *
- * This function returns all the query parameters of the current URL as an object.
+ * component is rendered. If title is not explicitly provided, it will render
  *
- * Usage:
+ * globalProps.appName as the page title.
  *
  * @example 
  *
- * // Let the current url be "https://example.com?search=something&sort=date".
- * getQueryParams();
+ * // assume this code in neetoStore
+ * const ProductsPage = props => <>Your page content here</>;
+ * export default withTitle(ProductsPage, "All products");
+ * // will set the browser title to `All products | neetoStore` when this page is rendered.
+ * @endexample
+*/
+export function withTitle(Component: () => JSX.Element, title?: string): (props) => JSX.Element;
+/**
+ *
+ * A browser push notifications utility function which asks the user permissions to send notifications and then register the browser with the notification service.
+ *
+ * After the user logs in, we need to ask the user permissions to send notifications and then register the browser with the notification service.
+ *
+ * You can use the registerBrowserNotifications utility function to do this. It can be called on any event after login based on the application's logic and requirement.
+ *
+ * Here as an example, we are calling registerBrowserNotifications method inside the Login component after the Authentication API request. This helps to associate the browser for that particular user.
+ *
+ * @example 
+ *
+ * import { registerBrowserNotifications } from "neetocommons/react-utils";
  * 
- * // output: { search: "something", sort: "date" }
+ * const handleLogin = async () => {
+ *   try {
+ *     // Authentication API request
+ *     await registerBrowserNotifications();
+ *     history.push(DASHBOARD_URL);
+ *   } catch {}
+ * };
  * @endexample
+ * The above mentioned feature is currently supported for chromium-based browsers.
+ *
+ * Safari (iOS) is currently  WIP.
+ *
+ * Any other browser which is not mentioned in above will be considered as
+ *
+ * unsupported.
+ *
 */
-export function getQueryParams(options?: qsOptionsType): QueryParamsType;
+export async function registerBrowserNotifications(): Promise<void>;
 /**
  *
- * Curried: false
+ * A browser push notifications utility function which destroys the browser subscriptions from the user's devices. This helps in unsubscribing from browser push notifications.
  *
- * This function joins the given strings with hyphen.
+ * When the browser subscriptions expires for the user's devices or when the user decides to logout,then destroy the generated browser subscription for the user.
  *
- * Usage:
+ * You can use the destroyBrowserSubscription utility function to do this. It can be called on any event before logout based on the application's logic and requirement.
+ *
+ * Here as an example:
+ *
+ * In the Logout component, we are calling destroyBrowserSubscription method before the Logout API request. This helps to destroy the browser subscription from the user's devices.
  *
  * @example 
  *
- * joinHyphenCase("hello", "world"); // output: "hello-world"
+ * import {destroyBrowserSubscription } from "neetocommons/react-utils";
+ * 
+ * const handleLogout = async () => {
+ *   try {
+ *     await destroyBrowserSubscription(); //Before logout request
+ *     // Logout API request
+ *     window.location.href = LOGIN_PATH;
+ *   } catch {}
+ * };
  * @endexample
+ * The above mentioned feature is currently supported for chromium-based browsers.
+ *
+ * Safari (iOS) is currently  WIP.
+ *
+ * Any other browser which is not mentioned in above will be considered as
+ *
+ * unsupported.
+ *
 */
-export function joinHyphenCase(...args: string[]): string;
+export async function destroyBrowserSubscription(): Promise<void>;
 /**
  *
- * Curried: false
+ * Curried: true
+ *
+ * This function can be used to handle onClick actions that redirects to a URL. It opens up the URL in a new tab if ctrl/cmd + click event is recieved. Otherwise, simply redirects to the provided URL in the same tab. URL can be passed as string or a history location object can be passed instead.
+ *
+ * Usage:
  *
- * Creates a debounced function that will execute the given function after the
+ * @example 
  *
- * stated wait time in milliseconds has elapsed since the last time it was invoked.
+ * handleMetaClick(history, "/dashboard", e); //Opens "/dashboard" in a new tab if metaKey/CtrlKey is pressed. Otherwise simply redirects to "/dashboard".
+ * handleMetaClick(history, {pathname: "/dashboard", state: "abc"}, e); //Opens "/dashboard" in a new tab if metaKey/CtrlKey is pressed. Otherwise, redirects to "/dashboard" by preserving the state.
+ * 
+ * @endexample
+*/
+export function handleMetaClick(history: History, params: string | object, event: React.MouseEvent<HTMLElement, MouseEvent>): void;
+/**
  *
- * It accepts the function to be debounced as the first argument, the delay in
+ * Curried: true
  *
- * milliseconds as the second argument.
+ * This function can be used to handle onClick actions that redirects to a URL. It opens up the URL in a new tab if ctrl/cmd + click event is recieved. Otherwise, simply redirects to the provided URL in the same tab. URL can be passed as string or a history location object can be passed instead.
  *
  * Usage:
  *
  * @example 
  *
- * const searchForProducts = debounce(async key => {
- *   // this function will be triggered once after user stops typing for 300ms
- *   const products = await productsApi.fetch(key);
- *   // do something with the products
- * }, 300);
- * <input onChange={e => searchForProducts(e.target.value)} />;
+ * handleMetaClick(history, "/dashboard", e); //Opens "/dashboard" in a new tab if metaKey/CtrlKey is pressed. Otherwise simply redirects to "/dashboard".
+ * handleMetaClick(history, {pathname: "/dashboard", state: "abc"}, e); //Opens "/dashboard" in a new tab if metaKey/CtrlKey is pressed. Otherwise, redirects to "/dashboard" by preserving the state.
+ * 
  * @endexample
 */
-export function debounce<F extends Function>(func: F, delay?: number): F;
+export function handleMetaClick(history: History, params: string | object): (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
 /**
  *
- * Curried: false
+ * Curried: true
  *
- * This function will return true if the current user has the given permission.
+ * This function can be used to handle onClick actions that redirects to a URL. It opens up the URL in a new tab if ctrl/cmd + click event is recieved. Otherwise, simply redirects to the provided URL in the same tab. URL can be passed as string or a history location object can be passed instead.
  *
  * Usage:
  *
  * @example 
  *
- * hasPermission("user.view_settings");
+ * handleMetaClick(history, "/dashboard", e); //Opens "/dashboard" in a new tab if metaKey/CtrlKey is pressed. Otherwise simply redirects to "/dashboard".
+ * handleMetaClick(history, {pathname: "/dashboard", state: "abc"}, e); //Opens "/dashboard" in a new tab if metaKey/CtrlKey is pressed. Otherwise, redirects to "/dashboard" by preserving the state.
+ * 
  * @endexample
 */
-export function hasPermission(permission: string): boolean;
+export function handleMetaClick(history: History): (params: string | object, event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
 /**
  *
  * Curried: false
  *
- * This function will return true if the current user has any of the given
- *
- * permissions.
+ * This function can be used to check whether an onClick event has metaKey or ctrlKey pressed.
  *
  * Usage:
  *
  * @example 
  *
- * hasAnyPermission("user.view_settings", "user.edit_settings");
+ * isMetaKeyPressed(event); //returns true if "event.metaKey || event.ctrlKey" is true, otherwise returns false.
+ * 
  * @endexample
 */
-export function hasAnyPermission(...permissions: string[]): boolean;
+export function isMetaKeyPressed(event: React.MouseEvent<HTMLElement, MouseEvent>): boolean;
+type ConfigType = {
+  mode?: "default" | "global" | "scoped";
+  unbindOnUnmount?: boolean;
+  enabled?: boolean;
+};
 /**
  *
- * Curried: false
+ * This is a configurable hook used for handling hotkeys in an application. We
  *
- * This function will return true if the current user has all of the given
+ * specify a hotkey and handler, whenever the hotkey is pressed by the user the
  *
- * permissions.
+ * corresponding handler will be invoked.
  *
- * Usage:
+ * This hook accepts 3 arguments hotkey, handler & config.
  *
  * @example 
  *
- * hasAllPermissions("user.view_settings", "user.edit_settings");
+ * // openSidebar function will only be called if the user is focused inside the textarea and performs the key combination.
+ * const ref = useHotKeys("command+shift+r", openSidebar, {
+ *   mode: "scoped",
+ * });
+ * 
+ * return (
+ *   <div>
+ *     <div>Hello world</div>
+ *     <textarea ref={ref}></textarea>
+ *   </div>
+ * );
  * @endexample
 */
-export function hasAllPermissions(...permissions: string[]): boolean;
+export function useHotKeys(hotkey: string | string[], handler: (event: React.KeyboardEvent) => void, config?: ConfigType): React.MutableRefObject | null;