@elementor/utils 0.3.1 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Change Log
 
+## 0.5.0
+
+### Minor Changes
+
+- e953081: add search in css classes list
+  create useDebounceState in util
+
+## 0.4.0
+
+### Minor Changes
+
+- 571ff75: Add `debounce` util
+
 ## 0.3.1
 
 ### Patch Changes

package/dist/index.d.mts

@@ -1,3 +1,5 @@
+import * as React from 'react';
+
 type ElementorErrorOptions = {
     cause?: Error['cause'];
     context?: Record<string, unknown> | null;
@@ -26,10 +28,29 @@ declare const createError: <T extends ElementorErrorOptions["context"]>({ code,
         cause?: unknown;
     };
     captureStackTrace(targetObject: object, constructorOpt?: Function): void;
-    prepareStackTrace?: ((err: Error, stackTraces: NodeJS.CallSite[]) => any) | undefined;
+    prepareStackTrace(err: Error, stackTraces: NodeJS.CallSite[]): any;
     stackTraceLimit: number;
 };
 
 declare const ensureError: (error: unknown) => Error;
 
-export { type CreateErrorParams, ElementorError, type ElementorErrorOptions, createError, ensureError };
+type UseDebounceStateOptions = {
+    delay?: number;
+    initialValue?: string;
+};
+type UseDebounceStateResult = {
+    debouncedValue: string;
+    inputValue: string;
+    handleChange: (val: string) => void;
+    setInputValue: React.Dispatch<React.SetStateAction<string>>;
+};
+declare function useDebounceState(options?: UseDebounceStateOptions): UseDebounceStateResult;
+
+declare function debounce<TArgs extends any[]>(fn: (...args: TArgs) => void, wait: number): {
+    (...args: TArgs): void;
+    flush: (...args: TArgs) => void;
+    cancel: () => void;
+    pending: () => boolean;
+};
+
+export { type CreateErrorParams, ElementorError, type ElementorErrorOptions, type UseDebounceStateOptions, type UseDebounceStateResult, createError, debounce, ensureError, useDebounceState };

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+import * as React from 'react';
+
 type ElementorErrorOptions = {
     cause?: Error['cause'];
     context?: Record<string, unknown> | null;
@@ -26,10 +28,29 @@ declare const createError: <T extends ElementorErrorOptions["context"]>({ code,
         cause?: unknown;
     };
     captureStackTrace(targetObject: object, constructorOpt?: Function): void;
-    prepareStackTrace?: ((err: Error, stackTraces: NodeJS.CallSite[]) => any) | undefined;
+    prepareStackTrace(err: Error, stackTraces: NodeJS.CallSite[]): any;
     stackTraceLimit: number;
 };
 
 declare const ensureError: (error: unknown) => Error;
 
-export { type CreateErrorParams, ElementorError, type ElementorErrorOptions, createError, ensureError };
+type UseDebounceStateOptions = {
+    delay?: number;
+    initialValue?: string;
+};
+type UseDebounceStateResult = {
+    debouncedValue: string;
+    inputValue: string;
+    handleChange: (val: string) => void;
+    setInputValue: React.Dispatch<React.SetStateAction<string>>;
+};
+declare function useDebounceState(options?: UseDebounceStateOptions): UseDebounceStateResult;
+
+declare function debounce<TArgs extends any[]>(fn: (...args: TArgs) => void, wait: number): {
+    (...args: TArgs): void;
+    flush: (...args: TArgs) => void;
+    cancel: () => void;
+    pending: () => boolean;
+};
+
+export { type CreateErrorParams, ElementorError, type ElementorErrorOptions, type UseDebounceStateOptions, type UseDebounceStateResult, createError, debounce, ensureError, useDebounceState };

package/dist/index.js

@@ -22,7 +22,9 @@ var index_exports = {};
 __export(index_exports, {
   ElementorError: () => ElementorError,
   createError: () => createError,
-  ensureError: () => ensureError
+  debounce: () => debounce,
+  ensureError: () => ensureError,
+  useDebounceState: () => useDebounceState
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -61,10 +63,76 @@ var ensureError = (error) => {
   }
   return new Error(`Unexpected non-error thrown: ${message}`, { cause });
 };
+
+// src/use-debounce-state.ts
+var import_react = require("react");
+
+// src/debounce.ts
+function debounce(fn, wait) {
+  let timer = null;
+  const cancel = () => {
+    if (!timer) {
+      return;
+    }
+    clearTimeout(timer);
+    timer = null;
+  };
+  const flush = (...args) => {
+    cancel();
+    fn(...args);
+  };
+  const run = (...args) => {
+    cancel();
+    timer = setTimeout(() => {
+      fn(...args);
+      timer = null;
+    }, wait);
+  };
+  const pending = () => !!timer;
+  run.flush = flush;
+  run.cancel = cancel;
+  run.pending = pending;
+  return run;
+}
+
+// src/use-debounce-state.ts
+function useDebounceState(options = {}) {
+  const { delay = 300, initialValue = "" } = options;
+  const [debouncedValue, setDebouncedValue] = (0, import_react.useState)(initialValue);
+  const [inputValue, setInputValue] = (0, import_react.useState)(initialValue);
+  const runRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    return () => {
+      runRef.current?.cancel?.();
+    };
+  }, []);
+  const debouncedSetValue = (0, import_react.useCallback)(
+    (val) => {
+      runRef.current?.cancel?.();
+      runRef.current = debounce(() => {
+        setDebouncedValue(val);
+      }, delay);
+      runRef.current();
+    },
+    [delay]
+  );
+  const handleChange = (val) => {
+    setInputValue(val);
+    debouncedSetValue(val);
+  };
+  return {
+    debouncedValue,
+    inputValue,
+    handleChange,
+    setInputValue
+  };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ElementorError,
   createError,
-  ensureError
+  debounce,
+  ensureError,
+  useDebounceState
 });
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/errors/elementor-error.ts","../src/errors/create-error.ts","../src/errors/ensure-error.ts"],"sourcesContent":["export { ElementorError, createError, ensureError } from './errors';\nexport type { ElementorErrorOptions, CreateErrorParams } from './errors';\n","export type ElementorErrorOptions = {\n\tcause?: Error[ 'cause' ];\n\tcontext?: Record< string, unknown > | null;\n\tcode: string;\n};\n\nexport class ElementorError extends Error {\n\treadonly context: ElementorErrorOptions[ 'context' ];\n\treadonly code: ElementorErrorOptions[ 'code' ];\n\n\tconstructor( message: string, { code, context = null, cause = null }: ElementorErrorOptions ) {\n\t\tsuper( message, { cause } );\n\t\tthis.context = context;\n\t\tthis.code = code;\n\t}\n}\n","import { ElementorError, type ElementorErrorOptions } from './elementor-error';\n\nexport type CreateErrorParams = {\n\tcode: ElementorErrorOptions[ 'code' ];\n\tmessage: string;\n};\n\nexport const createError = < T extends ElementorErrorOptions[ 'context' ] >( { code, message }: CreateErrorParams ) => {\n\treturn class extends ElementorError {\n\t\tconstructor( { cause, context }: { cause?: ElementorErrorOptions[ 'cause' ]; context?: T } = {} ) {\n\t\t\tsuper( message, { cause, code, context } );\n\t\t}\n\t};\n};\n","export const ensureError = ( error: unknown ) => {\n\tif ( error instanceof Error ) {\n\t\treturn error;\n\t}\n\n\tlet message: string;\n\tlet cause: unknown = null;\n\n\ttry {\n\t\tmessage = JSON.stringify( error );\n\t} catch ( e ) {\n\t\tcause = e;\n\t\tmessage = 'Unable to stringify the thrown value';\n\t}\n\treturn new Error( `Unexpected non-error thrown: ${ message }`, { cause } );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACMO,IAAM,iBAAN,cAA6B,MAAM;AAAA,EAChC;AAAA,EACA;AAAA,EAET,YAAa,SAAiB,EAAE,MAAM,UAAU,MAAM,QAAQ,KAAK,GAA2B;AAC7F,UAAO,SAAS,EAAE,MAAM,CAAE;AAC1B,SAAK,UAAU;AACf,SAAK,OAAO;AAAA,EACb;AACD;;;ACRO,IAAM,cAAc,CAAkD,EAAE,MAAM,QAAQ,MAA0B;AACtH,SAAO,cAAc,eAAe;AAAA,IACnC,YAAa,EAAE,OAAO,QAAQ,IAA+D,CAAC,GAAI;AACjG,YAAO,SAAS,EAAE,OAAO,MAAM,QAAQ,CAAE;AAAA,IAC1C;AAAA,EACD;AACD;;;ACbO,IAAM,cAAc,CAAE,UAAoB;AAChD,MAAK,iBAAiB,OAAQ;AAC7B,WAAO;AAAA,EACR;AAEA,MAAI;AACJ,MAAI,QAAiB;AAErB,MAAI;AACH,cAAU,KAAK,UAAW,KAAM;AAAA,EACjC,SAAU,GAAI;AACb,YAAQ;AACR,cAAU;AAAA,EACX;AACA,SAAO,IAAI,MAAO,gCAAiC,OAAQ,IAAI,EAAE,MAAM,CAAE;AAC1E;","names":[]}
+{"version":3,"sources":["../src/index.ts","../src/errors/elementor-error.ts","../src/errors/create-error.ts","../src/errors/ensure-error.ts","../src/use-debounce-state.ts","../src/debounce.ts"],"sourcesContent":["export { ElementorError, createError, ensureError } from './errors';\nexport type { ElementorErrorOptions, CreateErrorParams } from './errors';\nexport { useDebounceState, type UseDebounceStateOptions, type UseDebounceStateResult } from './use-debounce-state';\nexport { debounce } from './debounce';\n","export type ElementorErrorOptions = {\n\tcause?: Error[ 'cause' ];\n\tcontext?: Record< string, unknown > | null;\n\tcode: string;\n};\n\nexport class ElementorError extends Error {\n\treadonly context: ElementorErrorOptions[ 'context' ];\n\treadonly code: ElementorErrorOptions[ 'code' ];\n\n\tconstructor( message: string, { code, context = null, cause = null }: ElementorErrorOptions ) {\n\t\tsuper( message, { cause } );\n\t\tthis.context = context;\n\t\tthis.code = code;\n\t}\n}\n","import { ElementorError, type ElementorErrorOptions } from './elementor-error';\n\nexport type CreateErrorParams = {\n\tcode: ElementorErrorOptions[ 'code' ];\n\tmessage: string;\n};\n\nexport const createError = < T extends ElementorErrorOptions[ 'context' ] >( { code, message }: CreateErrorParams ) => {\n\treturn class extends ElementorError {\n\t\tconstructor( { cause, context }: { cause?: ElementorErrorOptions[ 'cause' ]; context?: T } = {} ) {\n\t\t\tsuper( message, { cause, code, context } );\n\t\t}\n\t};\n};\n","export const ensureError = ( error: unknown ) => {\n\tif ( error instanceof Error ) {\n\t\treturn error;\n\t}\n\n\tlet message: string;\n\tlet cause: unknown = null;\n\n\ttry {\n\t\tmessage = JSON.stringify( error );\n\t} catch ( e ) {\n\t\tcause = e;\n\t\tmessage = 'Unable to stringify the thrown value';\n\t}\n\treturn new Error( `Unexpected non-error thrown: ${ message }`, { cause } );\n};\n","import { useCallback, useEffect, useRef, useState } from 'react';\nimport type * as React from 'react';\n\nimport { debounce } from './debounce';\n\nexport type UseDebounceStateOptions = {\n\tdelay?: number;\n\tinitialValue?: string;\n};\n\nexport type UseDebounceStateResult = {\n\tdebouncedValue: string;\n\tinputValue: string;\n\thandleChange: ( val: string ) => void;\n\tsetInputValue: React.Dispatch< React.SetStateAction< string > >;\n};\n\nexport function useDebounceState( options: UseDebounceStateOptions = {} ): UseDebounceStateResult {\n\tconst { delay = 300, initialValue = '' } = options;\n\n\tconst [ debouncedValue, setDebouncedValue ] = useState( initialValue );\n\tconst [ inputValue, setInputValue ] = useState( initialValue );\n\n\tconst runRef = useRef< ReturnType< typeof debounce > | null >( null );\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\trunRef.current?.cancel?.();\n\t\t};\n\t}, [] );\n\n\tconst debouncedSetValue = useCallback(\n\t\t( val: string ) => {\n\t\t\trunRef.current?.cancel?.();\n\t\t\trunRef.current = debounce( () => {\n\t\t\t\tsetDebouncedValue( val );\n\t\t\t}, delay );\n\t\t\trunRef.current();\n\t\t},\n\t\t[ delay ]\n\t);\n\n\tconst handleChange = ( val: string ) => {\n\t\tsetInputValue( val );\n\t\tdebouncedSetValue( val );\n\t};\n\n\treturn {\n\t\tdebouncedValue,\n\t\tinputValue,\n\t\thandleChange,\n\t\tsetInputValue,\n\t};\n}\n","// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function debounce< TArgs extends any[] >( fn: ( ...args: TArgs ) => void, wait: number ) {\n\tlet timer: ReturnType< typeof setTimeout > | null = null;\n\n\tconst cancel = () => {\n\t\tif ( ! timer ) {\n\t\t\treturn;\n\t\t}\n\n\t\tclearTimeout( timer );\n\t\ttimer = null;\n\t};\n\n\tconst flush = ( ...args: TArgs ) => {\n\t\tcancel();\n\n\t\tfn( ...args );\n\t};\n\n\tconst run = ( ...args: TArgs ) => {\n\t\tcancel();\n\n\t\ttimer = setTimeout( () => {\n\t\t\tfn( ...args );\n\n\t\t\ttimer = null;\n\t\t}, wait );\n\t};\n\n\tconst pending = () => !! timer;\n\n\trun.flush = flush;\n\trun.cancel = cancel;\n\trun.pending = pending;\n\n\treturn run;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACMO,IAAM,iBAAN,cAA6B,MAAM;AAAA,EAChC;AAAA,EACA;AAAA,EAET,YAAa,SAAiB,EAAE,MAAM,UAAU,MAAM,QAAQ,KAAK,GAA2B;AAC7F,UAAO,SAAS,EAAE,MAAM,CAAE;AAC1B,SAAK,UAAU;AACf,SAAK,OAAO;AAAA,EACb;AACD;;;ACRO,IAAM,cAAc,CAAkD,EAAE,MAAM,QAAQ,MAA0B;AACtH,SAAO,cAAc,eAAe;AAAA,IACnC,YAAa,EAAE,OAAO,QAAQ,IAA+D,CAAC,GAAI;AACjG,YAAO,SAAS,EAAE,OAAO,MAAM,QAAQ,CAAE;AAAA,IAC1C;AAAA,EACD;AACD;;;ACbO,IAAM,cAAc,CAAE,UAAoB;AAChD,MAAK,iBAAiB,OAAQ;AAC7B,WAAO;AAAA,EACR;AAEA,MAAI;AACJ,MAAI,QAAiB;AAErB,MAAI;AACH,cAAU,KAAK,UAAW,KAAM;AAAA,EACjC,SAAU,GAAI;AACb,YAAQ;AACR,cAAU;AAAA,EACX;AACA,SAAO,IAAI,MAAO,gCAAiC,OAAQ,IAAI,EAAE,MAAM,CAAE;AAC1E;;;ACfA,mBAAyD;;;ACClD,SAAS,SAAiC,IAAgC,MAAe;AAC/F,MAAI,QAAgD;AAEpD,QAAM,SAAS,MAAM;AACpB,QAAK,CAAE,OAAQ;AACd;AAAA,IACD;AAEA,iBAAc,KAAM;AACpB,YAAQ;AAAA,EACT;AAEA,QAAM,QAAQ,IAAK,SAAiB;AACnC,WAAO;AAEP,OAAI,GAAG,IAAK;AAAA,EACb;AAEA,QAAM,MAAM,IAAK,SAAiB;AACjC,WAAO;AAEP,YAAQ,WAAY,MAAM;AACzB,SAAI,GAAG,IAAK;AAEZ,cAAQ;AAAA,IACT,GAAG,IAAK;AAAA,EACT;AAEA,QAAM,UAAU,MAAM,CAAC,CAAE;AAEzB,MAAI,QAAQ;AACZ,MAAI,SAAS;AACb,MAAI,UAAU;AAEd,SAAO;AACR;;;ADnBO,SAAS,iBAAkB,UAAmC,CAAC,GAA4B;AACjG,QAAM,EAAE,QAAQ,KAAK,eAAe,GAAG,IAAI;AAE3C,QAAM,CAAE,gBAAgB,iBAAkB,QAAI,uBAAU,YAAa;AACrE,QAAM,CAAE,YAAY,aAAc,QAAI,uBAAU,YAAa;AAE7D,QAAM,aAAS,qBAAgD,IAAK;AAEpE,8BAAW,MAAM;AAChB,WAAO,MAAM;AACZ,aAAO,SAAS,SAAS;AAAA,IAC1B;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,QAAM,wBAAoB;AAAA,IACzB,CAAE,QAAiB;AAClB,aAAO,SAAS,SAAS;AACzB,aAAO,UAAU,SAAU,MAAM;AAChC,0BAAmB,GAAI;AAAA,MACxB,GAAG,KAAM;AACT,aAAO,QAAQ;AAAA,IAChB;AAAA,IACA,CAAE,KAAM;AAAA,EACT;AAEA,QAAM,eAAe,CAAE,QAAiB;AACvC,kBAAe,GAAI;AACnB,sBAAmB,GAAI;AAAA,EACxB;AAEA,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;","names":[]}

package/dist/index.mjs

@@ -33,9 +33,75 @@ var ensureError = (error) => {
   }
   return new Error(`Unexpected non-error thrown: ${message}`, { cause });
 };
+
+// src/use-debounce-state.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+
+// src/debounce.ts
+function debounce(fn, wait) {
+  let timer = null;
+  const cancel = () => {
+    if (!timer) {
+      return;
+    }
+    clearTimeout(timer);
+    timer = null;
+  };
+  const flush = (...args) => {
+    cancel();
+    fn(...args);
+  };
+  const run = (...args) => {
+    cancel();
+    timer = setTimeout(() => {
+      fn(...args);
+      timer = null;
+    }, wait);
+  };
+  const pending = () => !!timer;
+  run.flush = flush;
+  run.cancel = cancel;
+  run.pending = pending;
+  return run;
+}
+
+// src/use-debounce-state.ts
+function useDebounceState(options = {}) {
+  const { delay = 300, initialValue = "" } = options;
+  const [debouncedValue, setDebouncedValue] = useState(initialValue);
+  const [inputValue, setInputValue] = useState(initialValue);
+  const runRef = useRef(null);
+  useEffect(() => {
+    return () => {
+      runRef.current?.cancel?.();
+    };
+  }, []);
+  const debouncedSetValue = useCallback(
+    (val) => {
+      runRef.current?.cancel?.();
+      runRef.current = debounce(() => {
+        setDebouncedValue(val);
+      }, delay);
+      runRef.current();
+    },
+    [delay]
+  );
+  const handleChange = (val) => {
+    setInputValue(val);
+    debouncedSetValue(val);
+  };
+  return {
+    debouncedValue,
+    inputValue,
+    handleChange,
+    setInputValue
+  };
+}
 export {
   ElementorError,
   createError,
-  ensureError
+  debounce,
+  ensureError,
+  useDebounceState
 };
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/errors/elementor-error.ts","../src/errors/create-error.ts","../src/errors/ensure-error.ts"],"sourcesContent":["export type ElementorErrorOptions = {\n\tcause?: Error[ 'cause' ];\n\tcontext?: Record< string, unknown > | null;\n\tcode: string;\n};\n\nexport class ElementorError extends Error {\n\treadonly context: ElementorErrorOptions[ 'context' ];\n\treadonly code: ElementorErrorOptions[ 'code' ];\n\n\tconstructor( message: string, { code, context = null, cause = null }: ElementorErrorOptions ) {\n\t\tsuper( message, { cause } );\n\t\tthis.context = context;\n\t\tthis.code = code;\n\t}\n}\n","import { ElementorError, type ElementorErrorOptions } from './elementor-error';\n\nexport type CreateErrorParams = {\n\tcode: ElementorErrorOptions[ 'code' ];\n\tmessage: string;\n};\n\nexport const createError = < T extends ElementorErrorOptions[ 'context' ] >( { code, message }: CreateErrorParams ) => {\n\treturn class extends ElementorError {\n\t\tconstructor( { cause, context }: { cause?: ElementorErrorOptions[ 'cause' ]; context?: T } = {} ) {\n\t\t\tsuper( message, { cause, code, context } );\n\t\t}\n\t};\n};\n","export const ensureError = ( error: unknown ) => {\n\tif ( error instanceof Error ) {\n\t\treturn error;\n\t}\n\n\tlet message: string;\n\tlet cause: unknown = null;\n\n\ttry {\n\t\tmessage = JSON.stringify( error );\n\t} catch ( e ) {\n\t\tcause = e;\n\t\tmessage = 'Unable to stringify the thrown value';\n\t}\n\treturn new Error( `Unexpected non-error thrown: ${ message }`, { cause } );\n};\n"],"mappings":";AAMO,IAAM,iBAAN,cAA6B,MAAM;AAAA,EAChC;AAAA,EACA;AAAA,EAET,YAAa,SAAiB,EAAE,MAAM,UAAU,MAAM,QAAQ,KAAK,GAA2B;AAC7F,UAAO,SAAS,EAAE,MAAM,CAAE;AAC1B,SAAK,UAAU;AACf,SAAK,OAAO;AAAA,EACb;AACD;;;ACRO,IAAM,cAAc,CAAkD,EAAE,MAAM,QAAQ,MAA0B;AACtH,SAAO,cAAc,eAAe;AAAA,IACnC,YAAa,EAAE,OAAO,QAAQ,IAA+D,CAAC,GAAI;AACjG,YAAO,SAAS,EAAE,OAAO,MAAM,QAAQ,CAAE;AAAA,IAC1C;AAAA,EACD;AACD;;;ACbO,IAAM,cAAc,CAAE,UAAoB;AAChD,MAAK,iBAAiB,OAAQ;AAC7B,WAAO;AAAA,EACR;AAEA,MAAI;AACJ,MAAI,QAAiB;AAErB,MAAI;AACH,cAAU,KAAK,UAAW,KAAM;AAAA,EACjC,SAAU,GAAI;AACb,YAAQ;AACR,cAAU;AAAA,EACX;AACA,SAAO,IAAI,MAAO,gCAAiC,OAAQ,IAAI,EAAE,MAAM,CAAE;AAC1E;","names":[]}
+{"version":3,"sources":["../src/errors/elementor-error.ts","../src/errors/create-error.ts","../src/errors/ensure-error.ts","../src/use-debounce-state.ts","../src/debounce.ts"],"sourcesContent":["export type ElementorErrorOptions = {\n\tcause?: Error[ 'cause' ];\n\tcontext?: Record< string, unknown > | null;\n\tcode: string;\n};\n\nexport class ElementorError extends Error {\n\treadonly context: ElementorErrorOptions[ 'context' ];\n\treadonly code: ElementorErrorOptions[ 'code' ];\n\n\tconstructor( message: string, { code, context = null, cause = null }: ElementorErrorOptions ) {\n\t\tsuper( message, { cause } );\n\t\tthis.context = context;\n\t\tthis.code = code;\n\t}\n}\n","import { ElementorError, type ElementorErrorOptions } from './elementor-error';\n\nexport type CreateErrorParams = {\n\tcode: ElementorErrorOptions[ 'code' ];\n\tmessage: string;\n};\n\nexport const createError = < T extends ElementorErrorOptions[ 'context' ] >( { code, message }: CreateErrorParams ) => {\n\treturn class extends ElementorError {\n\t\tconstructor( { cause, context }: { cause?: ElementorErrorOptions[ 'cause' ]; context?: T } = {} ) {\n\t\t\tsuper( message, { cause, code, context } );\n\t\t}\n\t};\n};\n","export const ensureError = ( error: unknown ) => {\n\tif ( error instanceof Error ) {\n\t\treturn error;\n\t}\n\n\tlet message: string;\n\tlet cause: unknown = null;\n\n\ttry {\n\t\tmessage = JSON.stringify( error );\n\t} catch ( e ) {\n\t\tcause = e;\n\t\tmessage = 'Unable to stringify the thrown value';\n\t}\n\treturn new Error( `Unexpected non-error thrown: ${ message }`, { cause } );\n};\n","import { useCallback, useEffect, useRef, useState } from 'react';\nimport type * as React from 'react';\n\nimport { debounce } from './debounce';\n\nexport type UseDebounceStateOptions = {\n\tdelay?: number;\n\tinitialValue?: string;\n};\n\nexport type UseDebounceStateResult = {\n\tdebouncedValue: string;\n\tinputValue: string;\n\thandleChange: ( val: string ) => void;\n\tsetInputValue: React.Dispatch< React.SetStateAction< string > >;\n};\n\nexport function useDebounceState( options: UseDebounceStateOptions = {} ): UseDebounceStateResult {\n\tconst { delay = 300, initialValue = '' } = options;\n\n\tconst [ debouncedValue, setDebouncedValue ] = useState( initialValue );\n\tconst [ inputValue, setInputValue ] = useState( initialValue );\n\n\tconst runRef = useRef< ReturnType< typeof debounce > | null >( null );\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\trunRef.current?.cancel?.();\n\t\t};\n\t}, [] );\n\n\tconst debouncedSetValue = useCallback(\n\t\t( val: string ) => {\n\t\t\trunRef.current?.cancel?.();\n\t\t\trunRef.current = debounce( () => {\n\t\t\t\tsetDebouncedValue( val );\n\t\t\t}, delay );\n\t\t\trunRef.current();\n\t\t},\n\t\t[ delay ]\n\t);\n\n\tconst handleChange = ( val: string ) => {\n\t\tsetInputValue( val );\n\t\tdebouncedSetValue( val );\n\t};\n\n\treturn {\n\t\tdebouncedValue,\n\t\tinputValue,\n\t\thandleChange,\n\t\tsetInputValue,\n\t};\n}\n","// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function debounce< TArgs extends any[] >( fn: ( ...args: TArgs ) => void, wait: number ) {\n\tlet timer: ReturnType< typeof setTimeout > | null = null;\n\n\tconst cancel = () => {\n\t\tif ( ! timer ) {\n\t\t\treturn;\n\t\t}\n\n\t\tclearTimeout( timer );\n\t\ttimer = null;\n\t};\n\n\tconst flush = ( ...args: TArgs ) => {\n\t\tcancel();\n\n\t\tfn( ...args );\n\t};\n\n\tconst run = ( ...args: TArgs ) => {\n\t\tcancel();\n\n\t\ttimer = setTimeout( () => {\n\t\t\tfn( ...args );\n\n\t\t\ttimer = null;\n\t\t}, wait );\n\t};\n\n\tconst pending = () => !! timer;\n\n\trun.flush = flush;\n\trun.cancel = cancel;\n\trun.pending = pending;\n\n\treturn run;\n}\n"],"mappings":";AAMO,IAAM,iBAAN,cAA6B,MAAM;AAAA,EAChC;AAAA,EACA;AAAA,EAET,YAAa,SAAiB,EAAE,MAAM,UAAU,MAAM,QAAQ,KAAK,GAA2B;AAC7F,UAAO,SAAS,EAAE,MAAM,CAAE;AAC1B,SAAK,UAAU;AACf,SAAK,OAAO;AAAA,EACb;AACD;;;ACRO,IAAM,cAAc,CAAkD,EAAE,MAAM,QAAQ,MAA0B;AACtH,SAAO,cAAc,eAAe;AAAA,IACnC,YAAa,EAAE,OAAO,QAAQ,IAA+D,CAAC,GAAI;AACjG,YAAO,SAAS,EAAE,OAAO,MAAM,QAAQ,CAAE;AAAA,IAC1C;AAAA,EACD;AACD;;;ACbO,IAAM,cAAc,CAAE,UAAoB;AAChD,MAAK,iBAAiB,OAAQ;AAC7B,WAAO;AAAA,EACR;AAEA,MAAI;AACJ,MAAI,QAAiB;AAErB,MAAI;AACH,cAAU,KAAK,UAAW,KAAM;AAAA,EACjC,SAAU,GAAI;AACb,YAAQ;AACR,cAAU;AAAA,EACX;AACA,SAAO,IAAI,MAAO,gCAAiC,OAAQ,IAAI,EAAE,MAAM,CAAE;AAC1E;;;ACfA,SAAS,aAAa,WAAW,QAAQ,gBAAgB;;;ACClD,SAAS,SAAiC,IAAgC,MAAe;AAC/F,MAAI,QAAgD;AAEpD,QAAM,SAAS,MAAM;AACpB,QAAK,CAAE,OAAQ;AACd;AAAA,IACD;AAEA,iBAAc,KAAM;AACpB,YAAQ;AAAA,EACT;AAEA,QAAM,QAAQ,IAAK,SAAiB;AACnC,WAAO;AAEP,OAAI,GAAG,IAAK;AAAA,EACb;AAEA,QAAM,MAAM,IAAK,SAAiB;AACjC,WAAO;AAEP,YAAQ,WAAY,MAAM;AACzB,SAAI,GAAG,IAAK;AAEZ,cAAQ;AAAA,IACT,GAAG,IAAK;AAAA,EACT;AAEA,QAAM,UAAU,MAAM,CAAC,CAAE;AAEzB,MAAI,QAAQ;AACZ,MAAI,SAAS;AACb,MAAI,UAAU;AAEd,SAAO;AACR;;;ADnBO,SAAS,iBAAkB,UAAmC,CAAC,GAA4B;AACjG,QAAM,EAAE,QAAQ,KAAK,eAAe,GAAG,IAAI;AAE3C,QAAM,CAAE,gBAAgB,iBAAkB,IAAI,SAAU,YAAa;AACrE,QAAM,CAAE,YAAY,aAAc,IAAI,SAAU,YAAa;AAE7D,QAAM,SAAS,OAAgD,IAAK;AAEpE,YAAW,MAAM;AAChB,WAAO,MAAM;AACZ,aAAO,SAAS,SAAS;AAAA,IAC1B;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,QAAM,oBAAoB;AAAA,IACzB,CAAE,QAAiB;AAClB,aAAO,SAAS,SAAS;AACzB,aAAO,UAAU,SAAU,MAAM;AAChC,0BAAmB,GAAI;AAAA,MACxB,GAAG,KAAM;AACT,aAAO,QAAQ;AAAA,IAChB;AAAA,IACA,CAAE,KAAM;AAAA,EACT;AAEA,QAAM,eAAe,CAAE,QAAiB;AACvC,kBAAe,GAAI;AACnB,sBAAmB,GAAI;AAAA,EACxB;AAEA,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;","names":[]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/utils",
   "description": "This package contains utility functions that are being used across the Elementor packages",
-  "version": "0.3.1",
+  "version": "0.5.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,6 +39,9 @@
     "build": "tsup --config=../../tsup.build.ts",
     "dev": "tsup --config=../../tsup.dev.ts"
   },
+  "peerDependencies": {
+    "react": "^18.3.1"
+  },
   "devDependencies": {
     "tsup": "^8.3.5"
   }

package/src/debounce.ts

@@ -0,0 +1,37 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function debounce< TArgs extends any[] >( fn: ( ...args: TArgs ) => void, wait: number ) {
+	let timer: ReturnType< typeof setTimeout > | null = null;
+
+	const cancel = () => {
+		if ( ! timer ) {
+			return;
+		}
+
+		clearTimeout( timer );
+		timer = null;
+	};
+
+	const flush = ( ...args: TArgs ) => {
+		cancel();
+
+		fn( ...args );
+	};
+
+	const run = ( ...args: TArgs ) => {
+		cancel();
+
+		timer = setTimeout( () => {
+			fn( ...args );
+
+			timer = null;
+		}, wait );
+	};
+
+	const pending = () => !! timer;
+
+	run.flush = flush;
+	run.cancel = cancel;
+	run.pending = pending;
+
+	return run;
+}

package/src/index.ts

@@ -1,2 +1,4 @@
 export { ElementorError, createError, ensureError } from './errors';
 export type { ElementorErrorOptions, CreateErrorParams } from './errors';
+export { useDebounceState, type UseDebounceStateOptions, type UseDebounceStateResult } from './use-debounce-state';
+export { debounce } from './debounce';

package/src/use-debounce-state.ts

@@ -0,0 +1,54 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type * as React from 'react';
+
+import { debounce } from './debounce';
+
+export type UseDebounceStateOptions = {
+	delay?: number;
+	initialValue?: string;
+};
+
+export type UseDebounceStateResult = {
+	debouncedValue: string;
+	inputValue: string;
+	handleChange: ( val: string ) => void;
+	setInputValue: React.Dispatch< React.SetStateAction< string > >;
+};
+
+export function useDebounceState( options: UseDebounceStateOptions = {} ): UseDebounceStateResult {
+	const { delay = 300, initialValue = '' } = options;
+
+	const [ debouncedValue, setDebouncedValue ] = useState( initialValue );
+	const [ inputValue, setInputValue ] = useState( initialValue );
+
+	const runRef = useRef< ReturnType< typeof debounce > | null >( null );
+
+	useEffect( () => {
+		return () => {
+			runRef.current?.cancel?.();
+		};
+	}, [] );
+
+	const debouncedSetValue = useCallback(
+		( val: string ) => {
+			runRef.current?.cancel?.();
+			runRef.current = debounce( () => {
+				setDebouncedValue( val );
+			}, delay );
+			runRef.current();
+		},
+		[ delay ]
+	);
+
+	const handleChange = ( val: string ) => {
+		setInputValue( val );
+		debouncedSetValue( val );
+	};
+
+	return {
+		debouncedValue,
+		inputValue,
+		handleChange,
+		setInputValue,
+	};
+}