@zayne-labs/toolkit-react 0.12.5 → 0.12.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (136) hide show
  1. package/dist/esm/{zustand/createZustandContext.js → createZustandContext-BWbr75p1.js} +4 -5
  2. package/dist/esm/createZustandContext-BWbr75p1.js.map +1 -0
  3. package/dist/esm/hooks/index.d.ts +2 -27
  4. package/dist/esm/hooks/index.js +2 -27
  5. package/dist/esm/hooks-DtugZjSs.js +637 -0
  6. package/dist/esm/hooks-DtugZjSs.js.map +1 -0
  7. package/dist/esm/index--n6VOfXE.d.ts +228 -0
  8. package/dist/esm/index-Vdq-fljM.d.ts +287 -0
  9. package/dist/esm/types-BEFu9IRC.d.ts +30 -0
  10. package/dist/esm/utils/index.d.ts +1 -8
  11. package/dist/esm/utils/index.js +1 -6
  12. package/dist/esm/utils--Ucc0oql.js +277 -0
  13. package/dist/esm/utils--Ucc0oql.js.map +1 -0
  14. package/dist/esm/zustand/compatible/index.d.ts +28 -0
  15. package/dist/esm/zustand/compatible/index.js +27 -0
  16. package/dist/esm/zustand/compatible/index.js.map +1 -0
  17. package/dist/esm/zustand/new-implementation/index.d.ts +27 -0
  18. package/dist/esm/zustand/new-implementation/index.js +27 -0
  19. package/dist/esm/zustand/new-implementation/index.js.map +1 -0
  20. package/package.json +13 -7
  21. package/dist/esm/hooks/createCustomContext.d.ts +0 -21
  22. package/dist/esm/hooks/createCustomContext.js +0 -25
  23. package/dist/esm/hooks/createCustomContext.js.map +0 -1
  24. package/dist/esm/hooks/effects/useAfterMountEffect.d.ts +0 -7
  25. package/dist/esm/hooks/effects/useAfterMountEffect.js +0 -19
  26. package/dist/esm/hooks/effects/useAfterMountEffect.js.map +0 -1
  27. package/dist/esm/hooks/effects/useAsyncEffect.d.ts +0 -5
  28. package/dist/esm/hooks/effects/useAsyncEffect.js +0 -20
  29. package/dist/esm/hooks/effects/useAsyncEffect.js.map +0 -1
  30. package/dist/esm/hooks/effects/useEffectOnce.d.ts +0 -5
  31. package/dist/esm/hooks/effects/useEffectOnce.js +0 -17
  32. package/dist/esm/hooks/effects/useEffectOnce.js.map +0 -1
  33. package/dist/esm/hooks/effects/useLifeCycle.d.ts +0 -13
  34. package/dist/esm/hooks/effects/useLifeCycle.js +0 -16
  35. package/dist/esm/hooks/effects/useLifeCycle.js.map +0 -1
  36. package/dist/esm/hooks/effects/useMountEffect.d.ts +0 -5
  37. package/dist/esm/hooks/effects/useMountEffect.js +0 -10
  38. package/dist/esm/hooks/effects/useMountEffect.js.map +0 -1
  39. package/dist/esm/hooks/effects/useUnMountEffect.d.ts +0 -7
  40. package/dist/esm/hooks/effects/useUnMountEffect.js +0 -8
  41. package/dist/esm/hooks/effects/useUnMountEffect.js.map +0 -1
  42. package/dist/esm/hooks/useAnimateElementRefs.d.ts +0 -19
  43. package/dist/esm/hooks/useAnimateElementRefs.js +0 -54
  44. package/dist/esm/hooks/useAnimateElementRefs.js.map +0 -1
  45. package/dist/esm/hooks/useAnimationInterval.d.ts +0 -15
  46. package/dist/esm/hooks/useAnimationInterval.js +0 -27
  47. package/dist/esm/hooks/useAnimationInterval.js.map +0 -1
  48. package/dist/esm/hooks/useCallbackRef.d.ts +0 -13
  49. package/dist/esm/hooks/useCallbackRef.js +0 -19
  50. package/dist/esm/hooks/useCallbackRef.js.map +0 -1
  51. package/dist/esm/hooks/useClickOutside.d.ts +0 -14
  52. package/dist/esm/hooks/useClickOutside.js +0 -24
  53. package/dist/esm/hooks/useClickOutside.js.map +0 -1
  54. package/dist/esm/hooks/useComposeRefs.d.ts +0 -8
  55. package/dist/esm/hooks/useComposeRefs.js +0 -11
  56. package/dist/esm/hooks/useComposeRefs.js.map +0 -1
  57. package/dist/esm/hooks/useConstant.d.ts +0 -6
  58. package/dist/esm/hooks/useConstant.js +0 -17
  59. package/dist/esm/hooks/useConstant.js.map +0 -1
  60. package/dist/esm/hooks/useControllable.d.ts +0 -55
  61. package/dist/esm/hooks/useControllable.js +0 -75
  62. package/dist/esm/hooks/useControllable.js.map +0 -1
  63. package/dist/esm/hooks/useCopyToClipboard.d.ts +0 -15
  64. package/dist/esm/hooks/useCopyToClipboard.js +0 -49
  65. package/dist/esm/hooks/useCopyToClipboard.js.map +0 -1
  66. package/dist/esm/hooks/useDebounce.d.ts +0 -23
  67. package/dist/esm/hooks/useDebounce.js +0 -32
  68. package/dist/esm/hooks/useDebounce.js.map +0 -1
  69. package/dist/esm/hooks/useDisclosure.d.ts +0 -14
  70. package/dist/esm/hooks/useDisclosure.js +0 -42
  71. package/dist/esm/hooks/useDisclosure.js.map +0 -1
  72. package/dist/esm/hooks/useIsHydrated.d.ts +0 -28
  73. package/dist/esm/hooks/useIsHydrated.js +0 -39
  74. package/dist/esm/hooks/useIsHydrated.js.map +0 -1
  75. package/dist/esm/hooks/useLocationState.d.ts +0 -17
  76. package/dist/esm/hooks/useLocationState.js +0 -24
  77. package/dist/esm/hooks/useLocationState.js.map +0 -1
  78. package/dist/esm/hooks/useScrollObserver.d.ts +0 -11
  79. package/dist/esm/hooks/useScrollObserver.js +0 -43
  80. package/dist/esm/hooks/useScrollObserver.js.map +0 -1
  81. package/dist/esm/hooks/useSearch.d.ts +0 -12
  82. package/dist/esm/hooks/useSearch.js +0 -39
  83. package/dist/esm/hooks/useSearch.js.map +0 -1
  84. package/dist/esm/hooks/useSearchParams.d.ts +0 -12
  85. package/dist/esm/hooks/useSearchParams.js +0 -34
  86. package/dist/esm/hooks/useSearchParams.js.map +0 -1
  87. package/dist/esm/hooks/useShallowCompare.d.ts +0 -8
  88. package/dist/esm/hooks/useShallowCompare.js +0 -26
  89. package/dist/esm/hooks/useShallowCompare.js.map +0 -1
  90. package/dist/esm/hooks/useStorageState.d.ts +0 -20
  91. package/dist/esm/hooks/useStorageState.js +0 -54
  92. package/dist/esm/hooks/useStorageState.js.map +0 -1
  93. package/dist/esm/hooks/useStore.d.ts +0 -8
  94. package/dist/esm/hooks/useStore.js +0 -17
  95. package/dist/esm/hooks/useStore.js.map +0 -1
  96. package/dist/esm/hooks/useThrottle.d.ts +0 -15
  97. package/dist/esm/hooks/useThrottle.js +0 -27
  98. package/dist/esm/hooks/useThrottle.js.map +0 -1
  99. package/dist/esm/hooks/useToggle.d.ts +0 -6
  100. package/dist/esm/hooks/useToggle.js +0 -17
  101. package/dist/esm/hooks/useToggle.js.map +0 -1
  102. package/dist/esm/lib/utils/cn.js +0 -8
  103. package/dist/esm/lib/utils/cn.js.map +0 -1
  104. package/dist/esm/utils/composeEventHandlers.d.ts +0 -8
  105. package/dist/esm/utils/composeEventHandlers.js +0 -36
  106. package/dist/esm/utils/composeEventHandlers.js.map +0 -1
  107. package/dist/esm/utils/composeRefs.d.ts +0 -17
  108. package/dist/esm/utils/composeRefs.js +0 -28
  109. package/dist/esm/utils/composeRefs.js.map +0 -1
  110. package/dist/esm/utils/getSlot/getSlot.d.ts +0 -60
  111. package/dist/esm/utils/getSlot/getSlot.js +0 -76
  112. package/dist/esm/utils/getSlot/getSlot.js.map +0 -1
  113. package/dist/esm/utils/getSlotMap/getSlotMap.d.ts +0 -86
  114. package/dist/esm/utils/getSlotMap/getSlotMap.js +0 -86
  115. package/dist/esm/utils/getSlotMap/getSlotMap.js.map +0 -1
  116. package/dist/esm/utils/mergeProps.d.ts +0 -20
  117. package/dist/esm/utils/mergeProps.js +0 -31
  118. package/dist/esm/utils/mergeProps.js.map +0 -1
  119. package/dist/esm/utils/mergeTwoProps.d.ts +0 -5
  120. package/dist/esm/utils/mergeTwoProps.js +0 -39
  121. package/dist/esm/utils/mergeTwoProps.js.map +0 -1
  122. package/dist/esm/utils/types/common.d.ts +0 -43
  123. package/dist/esm/utils/types/polymorphism.d.ts +0 -13
  124. package/dist/esm/zustand/createReactZustandStore.js +0 -8
  125. package/dist/esm/zustand/createReactZustandStore.js.map +0 -1
  126. package/dist/esm/zustand/createZustandContext.d.ts +0 -13
  127. package/dist/esm/zustand/createZustandContext.js.map +0 -1
  128. package/dist/esm/zustand/createZustandStoreWithCombine.d.ts +0 -12
  129. package/dist/esm/zustand/createZustandStoreWithCombine.js +0 -14
  130. package/dist/esm/zustand/createZustandStoreWithCombine.js.map +0 -1
  131. package/dist/esm/zustand/createZustandStoreWithSubscribe.d.ts +0 -17
  132. package/dist/esm/zustand/createZustandStoreWithSubscribe.js +0 -16
  133. package/dist/esm/zustand/createZustandStoreWithSubscribe.js.map +0 -1
  134. package/dist/esm/zustand/index.d.ts +0 -4
  135. package/dist/esm/zustand/index.js +0 -5
  136. package/dist/esm/zustand/types.d.ts +0 -20
@@ -1 +0,0 @@
1
- {"version":3,"file":"useControllable.js","names":[],"sources":["../../../src/hooks/useControllable.ts"],"sourcesContent":["\"use client\";\n\nimport { isFunction } from \"@zayne-labs/toolkit-type-helpers\";\nimport { useCallback, useMemo, useState } from \"react\";\nimport type { StateSetter } from \"@/utils\";\nimport { useCallbackRef } from \"./useCallbackRef\";\n\ntype UseControllablePropOptions<TProp> = {\n\tprop: TProp | undefined;\n\tstate: TProp;\n};\n\n/**\n * @description Given a prop value and state value, the useControllableProp hook is used to determine whether a component is controlled or uncontrolled, and also returns the computed value.\n */\nexport const useControllableProp = <TProp>(options: UseControllablePropOptions<TProp>) => {\n\tconst { prop, state } = options;\n\n\tconst isControlled = prop !== undefined;\n\n\tconst value = isControlled ? prop : state;\n\n\tconst result = useMemo<[isControlled: typeof isControlled, value: typeof value]>(\n\t\t() => [isControlled, value],\n\t\t[isControlled, value]\n\t);\n\n\treturn result;\n};\n\ntype UseControllableStateOptions<TValue> = {\n\tdefaultValue?: TValue | (() => TValue);\n\tequalityFn?: (prevState: TValue, nextValue: TValue) => boolean;\n\tonChange?: (value: TValue) => void;\n\tvalue?: TValue;\n};\n\n/**\n * @description React hook to manage state that can be either controlled or uncontrolled.\n * - When `options.value` is provided, the hook operates in controlled mode.\n * In this mode, `value` always equals `options.value` and `setValue` will\n * invoke `options.onChange(next)` without mutating internal state.\n * - When `options.value` is not provided, the hook operates in uncontrolled\n * mode, initializing internal state from `options.defaultValue` and updating\n * it via `setValue`.\n * - All updates are gated by `options.equalityFn(prev, next)` which defaults\n * to `Object.is`.\n *\n * @param options - Configuration options for the hook.\n * @param options.value - Controlled value. If defined, the state is controlled.\n * @param options.defaultValue - Initial value for the uncontrolled state. Can be a\n * function for lazy initialization or a direct value.\n * @param options.onChange - Callback fired when a new value is requested. In\n * controlled mode, this is invoked instead of updating internal state. In\n * uncontrolled mode, it is called after the internal state updates.\n * @param options.equalityFn - Predicate that decides whether to commit an\n * update given `prevState` and `nextValue`. If the values are equal, the update\n * is skipped. Defaults to `Object.is`.\n * @returns A tuple `[value, setValue]` just like React.useState.\n *\n * @example\n * // Uncontrolled usage\n * const [value, setValue] = useControllableState({ defaultValue: 0 });\n *\n * @example\n * // Controlled usage\n * const [value, setValue] = useControllableState({\n * value: props.value,\n * onChange: props.onChange,\n * });\n */\nexport const useControllableState = <TValue>(options: UseControllableStateOptions<TValue>) => {\n\tconst { defaultValue, equalityFn = Object.is, onChange: onChangeProp, value: valueProp } = options;\n\n\tconst stableOnchangeProp = useCallbackRef(onChangeProp);\n\tconst stableEqualityFn = useCallbackRef(equalityFn);\n\n\tconst [unControlledState, setUncontrolledState] = useState(defaultValue as TValue);\n\n\tconst isControlled = valueProp !== undefined;\n\n\tconst currentValue = isControlled ? valueProp : unControlledState;\n\n\tconst setValue: StateSetter<TValue> = useCallback(\n\t\t(newValue) => {\n\t\t\tconst nextValue = isFunction(newValue) ? newValue(currentValue) : newValue;\n\n\t\t\tif (stableEqualityFn(currentValue, nextValue)) return;\n\n\t\t\t// == Always call onChangeProp whether the value is controlled or uncontrolled,\n\t\t\t// == just in case the onChangeProp is used to perform side effects\n\t\t\t// == without necessarily updating the controlled valueProp\n\t\t\tstableOnchangeProp(nextValue);\n\n\t\t\tif (isControlled) return;\n\n\t\t\tsetUncontrolledState(nextValue);\n\t\t},\n\t\t[isControlled, stableOnchangeProp, stableEqualityFn, currentValue]\n\t);\n\n\treturn [currentValue, setValue] as [value: typeof currentValue, setValue: typeof setValue];\n};\n"],"mappings":";;;;;;;;;;;AAeA,MAAa,uBAA8B,YAA+C;CACzF,MAAM,EAAE,MAAM,UAAU;CAExB,MAAM,eAAe,SAAS;CAE9B,MAAM,QAAQ,eAAe,OAAO;AAOpC,QALe,cACR,CAAC,cAAc,MAAM,EAC3B,CAAC,cAAc,MAAM,CACrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CF,MAAa,wBAAgC,YAAiD;CAC7F,MAAM,EAAE,cAAc,aAAa,OAAO,IAAI,UAAU,cAAc,OAAO,cAAc;CAE3F,MAAM,qBAAqB,eAAe,aAAa;CACvD,MAAM,mBAAmB,eAAe,WAAW;CAEnD,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,aAAuB;CAElF,MAAM,eAAe,cAAc;CAEnC,MAAM,eAAe,eAAe,YAAY;AAoBhD,QAAO,CAAC,cAlB8B,aACpC,aAAa;EACb,MAAM,YAAY,WAAW,SAAS,GAAG,SAAS,aAAa,GAAG;AAElE,MAAI,iBAAiB,cAAc,UAAU,CAAE;AAK/C,qBAAmB,UAAU;AAE7B,MAAI,aAAc;AAElB,uBAAqB,UAAU;IAEhC;EAAC;EAAc;EAAoB;EAAkB;EAAa,CAClE,CAE8B"}
@@ -1,15 +0,0 @@
1
- import * as react4 from "react";
2
- import { AllowedClipboardItems, CopyToClipboardOptions } from "@zayne-labs/toolkit-core";
3
-
4
- //#region src/hooks/useCopyToClipboard.d.ts
5
- declare const useCopyToClipboard: (options?: CopyToClipboardOptions & {
6
- timeout?: number;
7
- }) => {
8
- handleCopy: (valueToCopy: AllowedClipboardItems) => void;
9
- hasCopied: boolean;
10
- setValue: react4.Dispatch<react4.SetStateAction<AllowedClipboardItems>>;
11
- value: AllowedClipboardItems;
12
- };
13
- //#endregion
14
- export { useCopyToClipboard };
15
- //# sourceMappingURL=useCopyToClipboard.d.ts.map
@@ -1,49 +0,0 @@
1
- import { useCallbackRef } from "./useCallbackRef.js";
2
- import { useToggle } from "./useToggle.js";
3
- import { useCallback, useRef, useState } from "react";
4
- import { copyToClipboard } from "@zayne-labs/toolkit-core";
5
-
6
- //#region src/hooks/useCopyToClipboard.ts
7
- const useCopyToClipboard = (options = {}) => {
8
- const { mimeType, onCopied, onError, onSuccess, timeout = 1500 } = options;
9
- const [value, setValue] = useState("");
10
- const [hasCopied, toggleHasCopied] = useToggle(false);
11
- const timeoutRef = useRef(null);
12
- const savedOnError = useCallbackRef(onError);
13
- const savedOnSuccess = useCallbackRef(onSuccess);
14
- const savedOnCopied = useCallbackRef(onCopied);
15
- const handleHasCopied = useCallback(() => {
16
- toggleHasCopied(true);
17
- timeoutRef.current && clearTimeout(timeoutRef.current);
18
- timeoutRef.current = setTimeout(() => {
19
- toggleHasCopied(false);
20
- }, timeout);
21
- }, [toggleHasCopied, timeout]);
22
- return {
23
- handleCopy: useCallback((valueToCopy) => {
24
- setValue(valueToCopy);
25
- copyToClipboard(valueToCopy, {
26
- mimeType,
27
- onCopied: () => {
28
- savedOnCopied();
29
- handleHasCopied();
30
- },
31
- onError: savedOnError,
32
- onSuccess: savedOnSuccess
33
- });
34
- }, [
35
- handleHasCopied,
36
- mimeType,
37
- savedOnCopied,
38
- savedOnError,
39
- savedOnSuccess
40
- ]),
41
- hasCopied,
42
- setValue,
43
- value
44
- };
45
- };
46
-
47
- //#endregion
48
- export { useCopyToClipboard };
49
- //# sourceMappingURL=useCopyToClipboard.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useCopyToClipboard.js","names":[],"sources":["../../../src/hooks/useCopyToClipboard.ts"],"sourcesContent":["import {\n\ttype AllowedClipboardItems,\n\ttype CopyToClipboardOptions,\n\tcopyToClipboard,\n} from \"@zayne-labs/toolkit-core\";\nimport { useCallback, useRef, useState } from \"react\";\nimport { useCallbackRef } from \"./useCallbackRef\";\nimport { useToggle } from \"./useToggle\";\n\nconst useCopyToClipboard = (options: CopyToClipboardOptions & { timeout?: number } = {}) => {\n\tconst { mimeType, onCopied, onError, onSuccess, timeout = 1500 } = options;\n\n\tconst [value, setValue] = useState<AllowedClipboardItems>(\"\");\n\n\tconst [hasCopied, toggleHasCopied] = useToggle(false);\n\tconst timeoutRef = useRef<number | null>(null);\n\n\tconst savedOnError = useCallbackRef(onError);\n\tconst savedOnSuccess = useCallbackRef(onSuccess);\n\tconst savedOnCopied = useCallbackRef(onCopied);\n\n\tconst handleHasCopied = useCallback(() => {\n\t\ttoggleHasCopied(true);\n\n\t\ttimeoutRef.current && clearTimeout(timeoutRef.current);\n\n\t\ttimeoutRef.current = setTimeout(() => {\n\t\t\ttoggleHasCopied(false);\n\t\t}, timeout) as never;\n\t}, [toggleHasCopied, timeout]);\n\n\tconst handleCopy = useCallback(\n\t\t(valueToCopy: AllowedClipboardItems) => {\n\t\t\tsetValue(valueToCopy);\n\n\t\t\tvoid copyToClipboard(valueToCopy, {\n\t\t\t\tmimeType,\n\t\t\t\tonCopied: () => {\n\t\t\t\t\tsavedOnCopied();\n\t\t\t\t\thandleHasCopied();\n\t\t\t\t},\n\t\t\t\tonError: savedOnError,\n\t\t\t\tonSuccess: savedOnSuccess,\n\t\t\t});\n\t\t},\n\t\t[handleHasCopied, mimeType, savedOnCopied, savedOnError, savedOnSuccess]\n\t);\n\n\treturn { handleCopy, hasCopied, setValue, value };\n};\n\nexport { useCopyToClipboard };\n"],"mappings":";;;;;;AASA,MAAM,sBAAsB,UAAyD,EAAE,KAAK;CAC3F,MAAM,EAAE,UAAU,UAAU,SAAS,WAAW,UAAU,SAAS;CAEnE,MAAM,CAAC,OAAO,YAAY,SAAgC,GAAG;CAE7D,MAAM,CAAC,WAAW,mBAAmB,UAAU,MAAM;CACrD,MAAM,aAAa,OAAsB,KAAK;CAE9C,MAAM,eAAe,eAAe,QAAQ;CAC5C,MAAM,iBAAiB,eAAe,UAAU;CAChD,MAAM,gBAAgB,eAAe,SAAS;CAE9C,MAAM,kBAAkB,kBAAkB;AACzC,kBAAgB,KAAK;AAErB,aAAW,WAAW,aAAa,WAAW,QAAQ;AAEtD,aAAW,UAAU,iBAAiB;AACrC,mBAAgB,MAAM;KACpB,QAAQ;IACT,CAAC,iBAAiB,QAAQ,CAAC;AAmB9B,QAAO;EAAE,YAjBU,aACjB,gBAAuC;AACvC,YAAS,YAAY;AAErB,GAAK,gBAAgB,aAAa;IACjC;IACA,gBAAgB;AACf,oBAAe;AACf,sBAAiB;;IAElB,SAAS;IACT,WAAW;IACX,CAAC;KAEH;GAAC;GAAiB;GAAU;GAAe;GAAc;GAAe,CACxE;EAEoB;EAAW;EAAU;EAAO"}
@@ -1,23 +0,0 @@
1
- import * as react6 from "react";
2
- import { CallbackFn } from "@zayne-labs/toolkit-type-helpers";
3
-
4
- //#region src/hooks/useDebounce.d.ts
5
- declare const useDebouncedFn: <TParams>(callBackFn: CallbackFn<TParams>, delay: number | undefined) => {
6
- (...params: TParams[]): void;
7
- (params: TParams | TParams[], overrideOptions: {
8
- $delay: number;
9
- }): void;
10
- cancel: () => void;
11
- cancelMaxWait(): void;
12
- };
13
- declare const useDebouncedState: <TValue>(defaultValue: TValue, delay: number | undefined) => readonly [TValue, {
14
- (...params: react6.SetStateAction<TValue>[]): void;
15
- (params: react6.SetStateAction<TValue> | react6.SetStateAction<TValue>[], overrideOptions: {
16
- $delay: number;
17
- }): void;
18
- cancel: () => void;
19
- cancelMaxWait(): void;
20
- }, react6.Dispatch<react6.SetStateAction<TValue>>];
21
- //#endregion
22
- export { useDebouncedFn, useDebouncedState };
23
- //# sourceMappingURL=useDebounce.d.ts.map
@@ -1,32 +0,0 @@
1
- import { useCallbackRef } from "./useCallbackRef.js";
2
- import { useUnmountEffect } from "./effects/useUnMountEffect.js";
3
- import { useMemo, useState } from "react";
4
- import { debounce } from "@zayne-labs/toolkit-core";
5
-
6
- //#region src/hooks/useDebounce.ts
7
- const useDebouncedFn = (callBackFn, delay) => {
8
- const latestCallback = useCallbackRef(callBackFn);
9
- const debouncedFn = useMemo(() => debounce(latestCallback, delay), [delay, latestCallback]);
10
- useUnmountEffect(() => {
11
- debouncedFn.cancel();
12
- debouncedFn.cancelMaxWait();
13
- });
14
- return debouncedFn;
15
- };
16
- const useDebouncedState = (defaultValue, delay) => {
17
- const [value, setValue] = useState(defaultValue);
18
- const setDebouncedValue = useMemo(() => debounce(setValue, delay), [delay]);
19
- useUnmountEffect(() => {
20
- setDebouncedValue.cancel();
21
- setDebouncedValue.cancelMaxWait();
22
- });
23
- return [
24
- value,
25
- setDebouncedValue,
26
- setValue
27
- ];
28
- };
29
-
30
- //#endregion
31
- export { useDebouncedFn, useDebouncedState };
32
- //# sourceMappingURL=useDebounce.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useDebounce.js","names":[],"sources":["../../../src/hooks/useDebounce.ts"],"sourcesContent":["import { debounce } from \"@zayne-labs/toolkit-core\";\nimport type { CallbackFn } from \"@zayne-labs/toolkit-type-helpers\";\nimport { useMemo, useState } from \"react\";\nimport { useUnmountEffect } from \"./effects/useUnMountEffect\";\nimport { useCallbackRef } from \"./useCallbackRef\";\n\nexport const useDebouncedFn = <TParams>(callBackFn: CallbackFn<TParams>, delay: number | undefined) => {\n\tconst latestCallback = useCallbackRef(callBackFn);\n\n\tconst debouncedFn = useMemo(() => debounce(latestCallback, delay), [delay, latestCallback]);\n\n\tuseUnmountEffect(() => {\n\t\tdebouncedFn.cancel();\n\t\tdebouncedFn.cancelMaxWait();\n\t});\n\n\treturn debouncedFn;\n};\n\nexport const useDebouncedState = <TValue>(defaultValue: TValue, delay: number | undefined) => {\n\tconst [value, setValue] = useState(defaultValue);\n\n\tconst setDebouncedValue = useMemo(() => debounce(setValue, delay), [delay]);\n\n\tuseUnmountEffect(() => {\n\t\tsetDebouncedValue.cancel();\n\t\tsetDebouncedValue.cancelMaxWait();\n\t});\n\n\treturn [value, setDebouncedValue, setValue] as const;\n};\n"],"mappings":";;;;;;AAMA,MAAa,kBAA2B,YAAiC,UAA8B;CACtG,MAAM,iBAAiB,eAAe,WAAW;CAEjD,MAAM,cAAc,cAAc,SAAS,gBAAgB,MAAM,EAAE,CAAC,OAAO,eAAe,CAAC;AAE3F,wBAAuB;AACtB,cAAY,QAAQ;AACpB,cAAY,eAAe;GAC1B;AAEF,QAAO;;AAGR,MAAa,qBAA6B,cAAsB,UAA8B;CAC7F,MAAM,CAAC,OAAO,YAAY,SAAS,aAAa;CAEhD,MAAM,oBAAoB,cAAc,SAAS,UAAU,MAAM,EAAE,CAAC,MAAM,CAAC;AAE3E,wBAAuB;AACtB,oBAAkB,QAAQ;AAC1B,oBAAkB,eAAe;GAChC;AAEF,QAAO;EAAC;EAAO;EAAmB;EAAS"}
@@ -1,14 +0,0 @@
1
- //#region src/hooks/useDisclosure.d.ts
2
- type DisclosureOptions = {
3
- hasScrollControl?: boolean;
4
- initialState?: boolean | (() => boolean);
5
- };
6
- declare const useDisclosure: (options?: DisclosureOptions) => {
7
- isOpen: boolean;
8
- onClose: () => void;
9
- onOpen: () => void;
10
- onToggle: <TValue>(value?: TValue) => void;
11
- };
12
- //#endregion
13
- export { useDisclosure };
14
- //# sourceMappingURL=useDisclosure.d.ts.map
@@ -1,42 +0,0 @@
1
- import { useCallbackRef } from "./useCallbackRef.js";
2
- import { useToggle } from "./useToggle.js";
3
- import { useMemo } from "react";
4
- import { lockScroll } from "@zayne-labs/toolkit-core";
5
- import { isBoolean } from "@zayne-labs/toolkit-type-helpers";
6
-
7
- //#region src/hooks/useDisclosure.ts
8
- const useDisclosure = (options = {}) => {
9
- const { hasScrollControl = false, initialState = false } = options;
10
- const [isOpen, toggleIsOpen] = useToggle(initialState);
11
- const onOpen = useCallbackRef(() => {
12
- toggleIsOpen(true);
13
- hasScrollControl && lockScroll({ lock: true });
14
- });
15
- const onClose = useCallbackRef(() => {
16
- toggleIsOpen(false);
17
- hasScrollControl && lockScroll({ lock: false });
18
- });
19
- const onToggle = useCallbackRef((value) => {
20
- if (isBoolean(value)) {
21
- toggleIsOpen(value);
22
- hasScrollControl && lockScroll({ lock: value });
23
- return;
24
- }
25
- isOpen ? onClose() : onOpen();
26
- });
27
- return useMemo(() => ({
28
- isOpen,
29
- onClose,
30
- onOpen,
31
- onToggle
32
- }), [
33
- isOpen,
34
- onClose,
35
- onOpen,
36
- onToggle
37
- ]);
38
- };
39
-
40
- //#endregion
41
- export { useDisclosure };
42
- //# sourceMappingURL=useDisclosure.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useDisclosure.js","names":[],"sources":["../../../src/hooks/useDisclosure.ts"],"sourcesContent":["import { lockScroll } from \"@zayne-labs/toolkit-core\";\nimport { isBoolean } from \"@zayne-labs/toolkit-type-helpers\";\nimport { useMemo } from \"react\";\nimport { useCallbackRef } from \"./useCallbackRef\";\nimport { useToggle } from \"./useToggle\";\n\ntype DisclosureOptions = {\n\thasScrollControl?: boolean;\n\tinitialState?: boolean | (() => boolean);\n};\n\nconst useDisclosure = (options: DisclosureOptions = {}) => {\n\tconst { hasScrollControl = false, initialState = false } = options;\n\tconst [isOpen, toggleIsOpen] = useToggle(initialState);\n\n\tconst onOpen = useCallbackRef(() => {\n\t\ttoggleIsOpen(true);\n\t\thasScrollControl && lockScroll({ lock: true });\n\t});\n\n\tconst onClose = useCallbackRef(() => {\n\t\ttoggleIsOpen(false);\n\t\thasScrollControl && lockScroll({ lock: false });\n\t});\n\n\tconst onToggle = useCallbackRef(<TValue>(value?: TValue) => {\n\t\tif (isBoolean(value)) {\n\t\t\ttoggleIsOpen(value);\n\t\t\thasScrollControl && lockScroll({ lock: value });\n\t\t\treturn;\n\t\t}\n\n\t\tisOpen ? onClose() : onOpen();\n\t});\n\n\tconst api = useMemo(() => ({ isOpen, onClose, onOpen, onToggle }), [isOpen, onClose, onOpen, onToggle]);\n\n\treturn api;\n};\nexport { useDisclosure };\n"],"mappings":";;;;;;;AAWA,MAAM,iBAAiB,UAA6B,EAAE,KAAK;CAC1D,MAAM,EAAE,mBAAmB,OAAO,eAAe,UAAU;CAC3D,MAAM,CAAC,QAAQ,gBAAgB,UAAU,aAAa;CAEtD,MAAM,SAAS,qBAAqB;AACnC,eAAa,KAAK;AAClB,sBAAoB,WAAW,EAAE,MAAM,MAAM,CAAC;GAC7C;CAEF,MAAM,UAAU,qBAAqB;AACpC,eAAa,MAAM;AACnB,sBAAoB,WAAW,EAAE,MAAM,OAAO,CAAC;GAC9C;CAEF,MAAM,WAAW,gBAAwB,UAAmB;AAC3D,MAAI,UAAU,MAAM,EAAE;AACrB,gBAAa,MAAM;AACnB,uBAAoB,WAAW,EAAE,MAAM,OAAO,CAAC;AAC/C;;AAGD,WAAS,SAAS,GAAG,QAAQ;GAC5B;AAIF,QAFY,eAAe;EAAE;EAAQ;EAAS;EAAQ;EAAU,GAAG;EAAC;EAAQ;EAAS;EAAQ;EAAS,CAAC"}
@@ -1,28 +0,0 @@
1
- //#region src/hooks/useIsHydrated.d.ts
2
- /**
3
- * @description Return a boolean indicating if the JS has been hydrated already.
4
- * When doing Server-Side Rendering, the result will always be false.
5
- * When doing Client-Side Rendering, the result will always be false on the
6
- * first render and true from then on. Even if a new component renders it will
7
- * always start with true.
8
- *
9
- * @see https://github.com/sergiodxa/remix-utils/blob/main/src/react/use-hydrated.ts
10
- *
11
- * @see https://github.com/sergiodxa/remix-utils/blob/main/src/react/use-hydrated.ts
12
- *
13
- * @example
14
- * **Example: Disable a button that needs JS to work.**
15
- * ```tsx
16
- * const isHydrated = useIsHydrated();
17
- *
18
- * return (
19
- * <button type="button" disabled={!isHydrated} onClick={doSomethingCustom}>
20
- * Click me
21
- * </button>
22
- * );
23
- * ```
24
- */
25
- declare const useIsHydrated: () => boolean;
26
- //#endregion
27
- export { useIsHydrated };
28
- //# sourceMappingURL=useIsHydrated.d.ts.map
@@ -1,39 +0,0 @@
1
- import { useSyncExternalStore } from "react";
2
-
3
- //#region src/hooks/useIsHydrated.ts
4
- const noop = () => {};
5
- const noopStore = {
6
- getServerSnapshot: () => true,
7
- getSnapshot: () => false,
8
- subscribe: () => noop
9
- };
10
- /**
11
- * @description Return a boolean indicating if the JS has been hydrated already.
12
- * When doing Server-Side Rendering, the result will always be false.
13
- * When doing Client-Side Rendering, the result will always be false on the
14
- * first render and true from then on. Even if a new component renders it will
15
- * always start with true.
16
- *
17
- * @see https://github.com/sergiodxa/remix-utils/blob/main/src/react/use-hydrated.ts
18
- *
19
- * @see https://github.com/sergiodxa/remix-utils/blob/main/src/react/use-hydrated.ts
20
- *
21
- * @example
22
- * **Example: Disable a button that needs JS to work.**
23
- * ```tsx
24
- * const isHydrated = useIsHydrated();
25
- *
26
- * return (
27
- * <button type="button" disabled={!isHydrated} onClick={doSomethingCustom}>
28
- * Click me
29
- * </button>
30
- * );
31
- * ```
32
- */
33
- const useIsHydrated = () => {
34
- return useSyncExternalStore(noopStore.subscribe, noopStore.getSnapshot, noopStore.getServerSnapshot);
35
- };
36
-
37
- //#endregion
38
- export { useIsHydrated };
39
- //# sourceMappingURL=useIsHydrated.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useIsHydrated.js","names":[],"sources":["../../../src/hooks/useIsHydrated.ts"],"sourcesContent":["import { useSyncExternalStore } from \"react\";\n\nconst noop = () => {};\n\nconst noopStore = {\n\tgetServerSnapshot: () => true,\n\tgetSnapshot: () => false,\n\tsubscribe: () => noop,\n};\n\n/**\n * @description Return a boolean indicating if the JS has been hydrated already.\n * When doing Server-Side Rendering, the result will always be false.\n * When doing Client-Side Rendering, the result will always be false on the\n * first render and true from then on. Even if a new component renders it will\n * always start with true.\n *\n * @see https://github.com/sergiodxa/remix-utils/blob/main/src/react/use-hydrated.ts\n *\n * @see https://github.com/sergiodxa/remix-utils/blob/main/src/react/use-hydrated.ts\n *\n * @example\n * **Example: Disable a button that needs JS to work.**\n * ```tsx\n * const isHydrated = useIsHydrated();\n *\n * return (\n * <button type=\"button\" disabled={!isHydrated} onClick={doSomethingCustom}>\n * Click me\n * </button>\n * );\n * ```\n */\nconst useIsHydrated = () => {\n\tconst isHydrated = useSyncExternalStore(\n\t\tnoopStore.subscribe,\n\t\tnoopStore.getSnapshot,\n\t\tnoopStore.getServerSnapshot\n\t);\n\n\treturn isHydrated;\n};\n\nexport { useIsHydrated };\n"],"mappings":";;;AAEA,MAAM,aAAa;AAEnB,MAAM,YAAY;CACjB,yBAAyB;CACzB,mBAAmB;CACnB,iBAAiB;CACjB;;;;;;;;;;;;;;;;;;;;;;;;AAyBD,MAAM,sBAAsB;AAO3B,QANmB,qBAClB,UAAU,WACV,UAAU,aACV,UAAU,kBACV"}
@@ -1,17 +0,0 @@
1
- import * as _zayne_labs_toolkit_core1 from "@zayne-labs/toolkit-core";
2
- import { LocationInfo, LocationStoreApi, LocationStoreOptions } from "@zayne-labs/toolkit-core";
3
- import { SelectorFn } from "@zayne-labs/toolkit-type-helpers";
4
-
5
- //#region src/hooks/useLocationState.d.ts
6
- type UseLocationResult<TSlice> = [state: TSlice, actions: LocationStoreApi];
7
- declare const createUseLocationState: (options?: LocationStoreOptions) => Omit<_zayne_labs_toolkit_core1.StoreApi<_zayne_labs_toolkit_core1.URLInfoObject>, "setState" | "resetState"> & {
8
- push: (url: string | _zayne_labs_toolkit_core1.PartialURLInfo, options?: {
9
- state?: _zayne_labs_toolkit_core1.PartialURLInfo["state"];
10
- }) => void;
11
- replace: LocationStoreApi["push"];
12
- triggerPopstateEvent: (nextLocationState?: LocationInfo["state"]) => void;
13
- } & (<TSlice = _zayne_labs_toolkit_core1.URLInfoObject>(selector?: SelectorFn<LocationInfo, TSlice>) => UseLocationResult<TSlice>);
14
- declare const useLocationState: <TSlice = LocationInfo>(selector?: SelectorFn<LocationInfo, TSlice>, options?: LocationStoreOptions) => UseLocationResult<TSlice>;
15
- //#endregion
16
- export { createUseLocationState, useLocationState };
17
- //# sourceMappingURL=useLocationState.d.ts.map
@@ -1,24 +0,0 @@
1
- import { useCallbackRef } from "./useCallbackRef.js";
2
- import { useStore } from "./useStore.js";
3
- import { useMemo } from "react";
4
- import { createLocationStore } from "@zayne-labs/toolkit-core";
5
-
6
- //#region src/hooks/useLocationState.ts
7
- const createUseLocationState = (options) => {
8
- const locationStore = createLocationStore(options);
9
- const useLocationState$1 = (selector) => {
10
- return [useStore(locationStore, selector), locationStore];
11
- };
12
- Object.assign(useLocationState$1, locationStore);
13
- return useLocationState$1;
14
- };
15
- const useLocationState = (selector, options = {}) => {
16
- const { equalityFn } = options;
17
- const savedEqualityFn = useCallbackRef(equalityFn);
18
- const locationStore = useMemo(() => createLocationStore({ equalityFn: savedEqualityFn }), [savedEqualityFn]);
19
- return [useStore(locationStore, selector), locationStore];
20
- };
21
-
22
- //#endregion
23
- export { createUseLocationState, useLocationState };
24
- //# sourceMappingURL=useLocationState.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useLocationState.js","names":["useLocationState"],"sources":["../../../src/hooks/useLocationState.ts"],"sourcesContent":["import {\n\tcreateLocationStore,\n\ttype LocationInfo,\n\ttype LocationStoreApi,\n\ttype LocationStoreOptions,\n} from \"@zayne-labs/toolkit-core\";\nimport type { SelectorFn } from \"@zayne-labs/toolkit-type-helpers\";\nimport { useMemo } from \"react\";\nimport { useCallbackRef } from \"./useCallbackRef\";\nimport { useStore } from \"./useStore\";\n\ntype UseLocationResult<TSlice> = [state: TSlice, actions: LocationStoreApi];\n\nexport const createUseLocationState = (options?: LocationStoreOptions) => {\n\tconst locationStore = createLocationStore(options);\n\n\ttype UseBoundLocationState = LocationStoreApi\n\t\t& (<TSlice = LocationInfo>(\n\t\t\tselector?: SelectorFn<LocationInfo, TSlice>\n\t\t) => UseLocationResult<TSlice>);\n\n\tconst useLocationState = <TSlice = LocationInfo>(\n\t\tselector?: SelectorFn<LocationInfo, TSlice>\n\t): UseLocationResult<TSlice> => {\n\t\tconst stateSlice = useStore(locationStore as never, selector);\n\n\t\treturn [stateSlice, locationStore];\n\t};\n\n\tObject.assign(useLocationState, locationStore);\n\n\treturn useLocationState as UseBoundLocationState;\n};\n\nexport const useLocationState = <TSlice = LocationInfo>(\n\tselector?: SelectorFn<LocationInfo, TSlice>,\n\toptions: LocationStoreOptions = {}\n): UseLocationResult<TSlice> => {\n\tconst { equalityFn } = options;\n\n\tconst savedEqualityFn = useCallbackRef(equalityFn);\n\n\tconst locationStore = useMemo(\n\t\t() => createLocationStore({ equalityFn: savedEqualityFn }),\n\t\t[savedEqualityFn]\n\t);\n\n\tconst stateSlice = useStore(locationStore as never, selector);\n\n\treturn [stateSlice, locationStore];\n};\n"],"mappings":";;;;;;AAaA,MAAa,0BAA0B,YAAmC;CACzE,MAAM,gBAAgB,oBAAoB,QAAQ;CAOlD,MAAMA,sBACL,aAC+B;AAG/B,SAAO,CAFY,SAAS,eAAwB,SAAS,EAEzC,cAAc;;AAGnC,QAAO,OAAOA,oBAAkB,cAAc;AAE9C,QAAOA;;AAGR,MAAa,oBACZ,UACA,UAAgC,EAAE,KACH;CAC/B,MAAM,EAAE,eAAe;CAEvB,MAAM,kBAAkB,eAAe,WAAW;CAElD,MAAM,gBAAgB,cACf,oBAAoB,EAAE,YAAY,iBAAiB,CAAC,EAC1D,CAAC,gBAAgB,CACjB;AAID,QAAO,CAFY,SAAS,eAAwB,SAAS,EAEzC,cAAc"}
@@ -1,11 +0,0 @@
1
- import { RefCallback } from "react";
2
- import { ScrollObserverOptions } from "@zayne-labs/toolkit-core";
3
-
4
- //#region src/hooks/useScrollObserver.d.ts
5
- declare const useScrollObserver: <TElement extends HTMLElement>(options?: ScrollObserverOptions) => {
6
- isScrolled: boolean;
7
- observedElementRef: RefCallback<TElement>;
8
- };
9
- //#endregion
10
- export { useScrollObserver };
11
- //# sourceMappingURL=useScrollObserver.d.ts.map
@@ -1,43 +0,0 @@
1
- import { useCallbackRef } from "./useCallbackRef.js";
2
- import { useMemo, useState } from "react";
3
- import { createScrollObserver } from "@zayne-labs/toolkit-core";
4
-
5
- //#region src/hooks/useScrollObserver.ts
6
- const useScrollObserver = (options = {}) => {
7
- const { onIntersection, root, rootMargin = "10px 0px 0px 0px", threshold } = options;
8
- const [isScrolled, setIsScrolled] = useState(false);
9
- const savedOnIntersection = useCallbackRef(onIntersection);
10
- const { handleObservation } = useMemo(() => {
11
- return createScrollObserver({
12
- onIntersection: (entry, observer) => {
13
- const newIsScrolledState = !entry.isIntersecting;
14
- setIsScrolled(newIsScrolledState);
15
- entry.target.dataset.scrolled = String(newIsScrolledState);
16
- savedOnIntersection(entry, observer);
17
- },
18
- root,
19
- rootMargin,
20
- threshold
21
- });
22
- }, [
23
- root,
24
- rootMargin,
25
- savedOnIntersection,
26
- threshold
27
- ]);
28
- return {
29
- isScrolled,
30
- observedElementRef: useCallbackRef((element) => {
31
- const cleanupFn = handleObservation(element);
32
- if (!element) {
33
- cleanupFn?.();
34
- return;
35
- }
36
- return cleanupFn;
37
- })
38
- };
39
- };
40
-
41
- //#endregion
42
- export { useScrollObserver };
43
- //# sourceMappingURL=useScrollObserver.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useScrollObserver.js","names":[],"sources":["../../../src/hooks/useScrollObserver.ts"],"sourcesContent":["import { createScrollObserver, type ScrollObserverOptions } from \"@zayne-labs/toolkit-core\";\nimport { type RefCallback, useMemo, useState } from \"react\";\nimport { useCallbackRef } from \"./useCallbackRef\";\n\nconst useScrollObserver = <TElement extends HTMLElement>(options: ScrollObserverOptions = {}) => {\n\tconst { onIntersection, root, rootMargin = \"10px 0px 0px 0px\", threshold } = options;\n\n\tconst [isScrolled, setIsScrolled] = useState(false);\n\n\tconst savedOnIntersection = useCallbackRef(onIntersection);\n\n\tconst { handleObservation } = useMemo(() => {\n\t\treturn createScrollObserver({\n\t\t\tonIntersection: (entry, observer) => {\n\t\t\t\tconst newIsScrolledState = !entry.isIntersecting;\n\n\t\t\t\tsetIsScrolled(newIsScrolledState);\n\n\t\t\t\t// eslint-disable-next-line no-param-reassign -- Mutation is fine here\n\t\t\t\t(entry.target as HTMLElement).dataset.scrolled = String(newIsScrolledState);\n\n\t\t\t\tsavedOnIntersection(entry, observer);\n\t\t\t},\n\t\t\troot,\n\t\t\trootMargin,\n\t\t\tthreshold,\n\t\t});\n\t}, [root, rootMargin, savedOnIntersection, threshold]);\n\n\tconst observedElementRef: RefCallback<TElement> = useCallbackRef((element) => {\n\t\tconst cleanupFn = handleObservation(element);\n\n\t\t// == React 18 may not call the cleanup function so we need to call it manually on element unmount\n\t\tif (!element) {\n\t\t\tcleanupFn?.();\n\t\t\treturn;\n\t\t}\n\n\t\treturn cleanupFn;\n\t});\n\n\treturn { isScrolled, observedElementRef };\n};\n\nexport { useScrollObserver };\n"],"mappings":";;;;;AAIA,MAAM,qBAAmD,UAAiC,EAAE,KAAK;CAChG,MAAM,EAAE,gBAAgB,MAAM,aAAa,oBAAoB,cAAc;CAE7E,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CAEnD,MAAM,sBAAsB,eAAe,eAAe;CAE1D,MAAM,EAAE,sBAAsB,cAAc;AAC3C,SAAO,qBAAqB;GAC3B,iBAAiB,OAAO,aAAa;IACpC,MAAM,qBAAqB,CAAC,MAAM;AAElC,kBAAc,mBAAmB;AAGjC,IAAC,MAAM,OAAuB,QAAQ,WAAW,OAAO,mBAAmB;AAE3E,wBAAoB,OAAO,SAAS;;GAErC;GACA;GACA;GACA,CAAC;IACA;EAAC;EAAM;EAAY;EAAqB;EAAU,CAAC;AActD,QAAO;EAAE;EAAY,oBAZ6B,gBAAgB,YAAY;GAC7E,MAAM,YAAY,kBAAkB,QAAQ;AAG5C,OAAI,CAAC,SAAS;AACb,iBAAa;AACb;;AAGD,UAAO;IACN;EAEuC"}
@@ -1,12 +0,0 @@
1
- import * as react11 from "react";
2
-
3
- //#region src/hooks/useSearch.d.ts
4
- declare const useSearch: <TData>(initialData: TData[], delay?: number) => {
5
- data: TData[];
6
- isLoading: boolean;
7
- query: string;
8
- setQuery: react11.Dispatch<react11.SetStateAction<string>>;
9
- };
10
- //#endregion
11
- export { useSearch };
12
- //# sourceMappingURL=useSearch.d.ts.map
@@ -1,39 +0,0 @@
1
- import { useAfterMountEffect } from "./effects/useAfterMountEffect.js";
2
- import { useDebouncedFn } from "./useDebounce.js";
3
- import { useState } from "react";
4
- import { isPlainObject } from "@zayne-labs/toolkit-type-helpers";
5
-
6
- //#region src/hooks/useSearch.ts
7
- const isSerializable = (item) => typeof item === "string" || typeof item === "number" || typeof item === "boolean";
8
- const checkObjectPropsForQuery = (item, query) => {
9
- for (const value of Object.values(item)) if (isSerializable(value) && value.toString().toLowerCase().includes(query)) return true;
10
- return false;
11
- };
12
- const useSearch = (initialData, delay) => {
13
- const [searchQuery, setSearchQuery] = useState("");
14
- const [filteredData, setFilteredData] = useState(initialData);
15
- const [isLoading, setIsLoading] = useState(false);
16
- const handleDebouncedSearch = useDebouncedFn(() => {
17
- const query = searchQuery.toLowerCase();
18
- setFilteredData(initialData.filter((item) => {
19
- if (isSerializable(item)) return item.toString().toLowerCase().includes(query);
20
- if (isPlainObject(item)) return checkObjectPropsForQuery(item, query);
21
- return false;
22
- }));
23
- setIsLoading(false);
24
- }, delay);
25
- useAfterMountEffect(() => {
26
- setIsLoading(true);
27
- handleDebouncedSearch();
28
- }, [searchQuery]);
29
- return {
30
- data: filteredData,
31
- isLoading,
32
- query: searchQuery,
33
- setQuery: setSearchQuery
34
- };
35
- };
36
-
37
- //#endregion
38
- export { useSearch };
39
- //# sourceMappingURL=useSearch.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useSearch.js","names":[],"sources":["../../../src/hooks/useSearch.ts"],"sourcesContent":["import { isPlainObject } from \"@zayne-labs/toolkit-type-helpers\";\nimport { useState } from \"react\";\nimport { useAfterMountEffect } from \"./effects/useAfterMountEffect\";\nimport { useDebouncedFn } from \"./useDebounce\";\n\nconst isSerializable = (item: unknown): item is boolean | number | string =>\n\ttypeof item === \"string\" || typeof item === \"number\" || typeof item === \"boolean\";\n\nconst checkObjectPropsForQuery = (item: Record<string, unknown>, query: string): boolean => {\n\tfor (const value of Object.values(item)) {\n\t\tif (isSerializable(value) && value.toString().toLowerCase().includes(query)) {\n\t\t\treturn true;\n\t\t}\n\t}\n\treturn false;\n};\n\nconst useSearch = <TData>(initialData: TData[], delay?: number) => {\n\tconst [searchQuery, setSearchQuery] = useState(\"\");\n\tconst [filteredData, setFilteredData] = useState(initialData);\n\tconst [isLoading, setIsLoading] = useState(false);\n\n\tconst handleDebouncedSearch = useDebouncedFn(() => {\n\t\tconst query = searchQuery.toLowerCase();\n\n\t\tconst filteredResults = initialData.filter((item) => {\n\t\t\tif (isSerializable(item)) {\n\t\t\t\treturn item.toString().toLowerCase().includes(query);\n\t\t\t}\n\n\t\t\tif (isPlainObject(item)) {\n\t\t\t\treturn checkObjectPropsForQuery(item, query);\n\t\t\t}\n\n\t\t\treturn false;\n\t\t});\n\n\t\tsetFilteredData(filteredResults);\n\t\tsetIsLoading(false);\n\t}, delay);\n\n\tuseAfterMountEffect(() => {\n\t\tsetIsLoading(true);\n\t\thandleDebouncedSearch();\n\t}, [searchQuery]);\n\n\treturn { data: filteredData, isLoading, query: searchQuery, setQuery: setSearchQuery };\n};\n\nexport { useSearch };\n"],"mappings":";;;;;;AAKA,MAAM,kBAAkB,SACvB,OAAO,SAAS,YAAY,OAAO,SAAS,YAAY,OAAO,SAAS;AAEzE,MAAM,4BAA4B,MAA+B,UAA2B;AAC3F,MAAK,MAAM,SAAS,OAAO,OAAO,KAAK,CACtC,KAAI,eAAe,MAAM,IAAI,MAAM,UAAU,CAAC,aAAa,CAAC,SAAS,MAAM,CAC1E,QAAO;AAGT,QAAO;;AAGR,MAAM,aAAoB,aAAsB,UAAmB;CAClE,MAAM,CAAC,aAAa,kBAAkB,SAAS,GAAG;CAClD,MAAM,CAAC,cAAc,mBAAmB,SAAS,YAAY;CAC7D,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CAEjD,MAAM,wBAAwB,qBAAqB;EAClD,MAAM,QAAQ,YAAY,aAAa;AAcvC,kBAZwB,YAAY,QAAQ,SAAS;AACpD,OAAI,eAAe,KAAK,CACvB,QAAO,KAAK,UAAU,CAAC,aAAa,CAAC,SAAS,MAAM;AAGrD,OAAI,cAAc,KAAK,CACtB,QAAO,yBAAyB,MAAM,MAAM;AAG7C,UAAO;IACN,CAE8B;AAChC,eAAa,MAAM;IACjB,MAAM;AAET,2BAA0B;AACzB,eAAa,KAAK;AAClB,yBAAuB;IACrB,CAAC,YAAY,CAAC;AAEjB,QAAO;EAAE,MAAM;EAAc;EAAW,OAAO;EAAa,UAAU;EAAgB"}
@@ -1,12 +0,0 @@
1
- import * as _zayne_labs_toolkit_core6 from "@zayne-labs/toolkit-core";
2
- import { LocationStoreOptions, URLSearchParamsInit } from "@zayne-labs/toolkit-core";
3
-
4
- //#region src/hooks/useSearchParams.d.ts
5
- type UseSearchParamsOptions = LocationStoreOptions & {
6
- action?: "push" | "replace";
7
- };
8
- declare const useSearchParams: <TSearchParams extends URLSearchParamsInit>(options?: UseSearchParamsOptions) => [searchParams: URLSearchParams, setSearchParams: (newQueryParams: TSearchParams | ((prev: URLSearchParams) => TSearchParams)) => void, triggerPopstateEvent: (nextLocationState?: _zayne_labs_toolkit_core6.LocationInfo["state"]) => void];
9
- declare const useSearchParamsObject: <TSearchParams extends Record<string, string>>(options?: UseSearchParamsOptions) => [searchParamsObject: TSearchParams, setSearchParamsObject: (newQueryParams: TSearchParams | ((prev: TSearchParams) => TSearchParams)) => void, triggerPopstateEvent: (nextLocationState?: _zayne_labs_toolkit_core6.LocationInfo["state"]) => void];
10
- //#endregion
11
- export { useSearchParams, useSearchParamsObject };
12
- //# sourceMappingURL=useSearchParams.d.ts.map
@@ -1,34 +0,0 @@
1
- import { useLocationState } from "./useLocationState.js";
2
- import { createSearchParams } from "@zayne-labs/toolkit-core";
3
- import { isFunction } from "@zayne-labs/toolkit-type-helpers";
4
-
5
- //#region src/hooks/useSearchParams.ts
6
- const useSearchParams = (options) => {
7
- const { action = "push",...restOfOptions } = options ?? {};
8
- const [searchParams, actions] = useLocationState((state) => state.search, restOfOptions);
9
- const setSearchParams = (newQueryParams) => {
10
- const nextSearchParams = createSearchParams(isFunction(newQueryParams) ? newQueryParams(searchParams) : newQueryParams);
11
- actions[action]({ search: nextSearchParams });
12
- };
13
- return [
14
- searchParams,
15
- setSearchParams,
16
- actions.triggerPopstateEvent
17
- ];
18
- };
19
- const useSearchParamsObject = (options) => {
20
- const [searchParams, setSearchParams, triggerPopstateEvent] = useSearchParams(options);
21
- const searchParamsObject = Object.fromEntries(searchParams);
22
- const setSearchParamsObject = (newQueryParams) => {
23
- setSearchParams(isFunction(newQueryParams) ? newQueryParams(searchParamsObject) : newQueryParams);
24
- };
25
- return [
26
- searchParamsObject,
27
- setSearchParamsObject,
28
- triggerPopstateEvent
29
- ];
30
- };
31
-
32
- //#endregion
33
- export { useSearchParams, useSearchParamsObject };
34
- //# sourceMappingURL=useSearchParams.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useSearchParams.js","names":[],"sources":["../../../src/hooks/useSearchParams.ts"],"sourcesContent":["import {\n\tcreateSearchParams,\n\ttype LocationStoreOptions,\n\ttype URLSearchParamsInit,\n} from \"@zayne-labs/toolkit-core\";\nimport { isFunction } from \"@zayne-labs/toolkit-type-helpers\";\nimport { useLocationState } from \"./useLocationState\";\n\ntype UseSearchParamsOptions = LocationStoreOptions & {\n\taction?: \"push\" | \"replace\";\n};\n\nexport const useSearchParams = <TSearchParams extends URLSearchParamsInit>(\n\toptions?: UseSearchParamsOptions\n) => {\n\tconst { action = \"push\", ...restOfOptions } = options ?? {};\n\n\tconst [searchParams, actions] = useLocationState((state) => state.search, restOfOptions);\n\n\tconst setSearchParams = (\n\t\tnewQueryParams: TSearchParams | ((prev: URLSearchParams) => TSearchParams)\n\t) => {\n\t\tconst params = isFunction(newQueryParams) ? newQueryParams(searchParams) : newQueryParams;\n\n\t\tconst nextSearchParams = createSearchParams(params);\n\n\t\tactions[action]({ search: nextSearchParams });\n\t};\n\n\treturn [searchParams, setSearchParams, actions.triggerPopstateEvent] as [\n\t\tsearchParams: typeof searchParams,\n\t\tsetSearchParams: typeof setSearchParams,\n\t\ttriggerPopstateEvent: typeof actions.triggerPopstateEvent,\n\t];\n};\n\nexport const useSearchParamsObject = <TSearchParams extends Record<string, string>>(\n\toptions?: UseSearchParamsOptions\n) => {\n\tconst [searchParams, setSearchParams, triggerPopstateEvent] = useSearchParams(options);\n\n\tconst searchParamsObject = Object.fromEntries(searchParams) as TSearchParams;\n\n\tconst setSearchParamsObject = (\n\t\tnewQueryParams: TSearchParams | ((prev: TSearchParams) => TSearchParams)\n\t) => {\n\t\tconst params = isFunction(newQueryParams) ? newQueryParams(searchParamsObject) : newQueryParams;\n\n\t\tsetSearchParams(params);\n\t};\n\n\treturn [searchParamsObject, setSearchParamsObject, triggerPopstateEvent] as [\n\t\tsearchParamsObject: typeof searchParamsObject,\n\t\tsetSearchParamsObject: typeof setSearchParamsObject,\n\t\ttriggerPopstateEvent: typeof triggerPopstateEvent,\n\t];\n};\n"],"mappings":";;;;;AAYA,MAAa,mBACZ,YACI;CACJ,MAAM,EAAE,SAAS,OAAQ,GAAG,kBAAkB,WAAW,EAAE;CAE3D,MAAM,CAAC,cAAc,WAAW,kBAAkB,UAAU,MAAM,QAAQ,cAAc;CAExF,MAAM,mBACL,mBACI;EAGJ,MAAM,mBAAmB,mBAFV,WAAW,eAAe,GAAG,eAAe,aAAa,GAAG,eAExB;AAEnD,UAAQ,QAAQ,EAAE,QAAQ,kBAAkB,CAAC;;AAG9C,QAAO;EAAC;EAAc;EAAiB,QAAQ;EAAqB;;AAOrE,MAAa,yBACZ,YACI;CACJ,MAAM,CAAC,cAAc,iBAAiB,wBAAwB,gBAAgB,QAAQ;CAEtF,MAAM,qBAAqB,OAAO,YAAY,aAAa;CAE3D,MAAM,yBACL,mBACI;AAGJ,kBAFe,WAAW,eAAe,GAAG,eAAe,mBAAmB,GAAG,eAE1D;;AAGxB,QAAO;EAAC;EAAoB;EAAuB;EAAqB"}
@@ -1,8 +0,0 @@
1
- import { SelectorFn } from "@zayne-labs/toolkit-type-helpers";
2
-
3
- //#region src/hooks/useShallowCompare.d.ts
4
- declare const useShallowCompSelector: <TState, TResult>(selector: SelectorFn<TState, TResult> | undefined) => (state: TState) => TResult;
5
- declare const useShallowCompValue: <TValue>(value: TValue) => TValue;
6
- //#endregion
7
- export { useShallowCompSelector, useShallowCompValue };
8
- //# sourceMappingURL=useShallowCompare.d.ts.map
@@ -1,26 +0,0 @@
1
- import { useCallbackRef } from "./useCallbackRef.js";
2
- import { useInsertionEffect, useRef } from "react";
3
- import { shallowCompare } from "@zayne-labs/toolkit-core";
4
-
5
- //#region src/hooks/useShallowCompare.ts
6
- const useShallowCompSelector = (selector) => {
7
- const prevStateRef = useRef(void 0);
8
- return useCallbackRef((state) => {
9
- const nextState = selector?.(state);
10
- if (!nextState) return prevStateRef.current;
11
- if (shallowCompare(prevStateRef.current, nextState)) return prevStateRef.current;
12
- return prevStateRef.current = nextState;
13
- });
14
- };
15
- const useShallowCompValue = (value) => {
16
- const prevValueRef = useRef(value);
17
- useInsertionEffect(() => {
18
- if (shallowCompare(prevValueRef.current, value)) return;
19
- prevValueRef.current = value;
20
- });
21
- return prevValueRef.current;
22
- };
23
-
24
- //#endregion
25
- export { useShallowCompSelector, useShallowCompValue };
26
- //# sourceMappingURL=useShallowCompare.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useShallowCompare.js","names":[],"sources":["../../../src/hooks/useShallowCompare.ts"],"sourcesContent":["import { shallowCompare } from \"@zayne-labs/toolkit-core\";\nimport type { SelectorFn } from \"@zayne-labs/toolkit-type-helpers\";\nimport { useInsertionEffect, useRef } from \"react\";\nimport { useCallbackRef } from \"./useCallbackRef\";\n\nexport const useShallowCompSelector = <TState, TResult>(\n\tselector: SelectorFn<TState, TResult> | undefined\n) => {\n\tconst prevStateRef = useRef<TResult>(undefined as never);\n\n\tconst shallowSelector = useCallbackRef((state: TState) => {\n\t\tconst nextState = selector?.(state);\n\n\t\tif (!nextState) {\n\t\t\treturn prevStateRef.current;\n\t\t}\n\n\t\tif (shallowCompare(prevStateRef.current, nextState)) {\n\t\t\treturn prevStateRef.current;\n\t\t}\n\n\t\treturn (prevStateRef.current = nextState);\n\t});\n\n\treturn shallowSelector;\n};\n\nexport const useShallowCompValue = <TValue>(value: TValue) => {\n\tconst prevValueRef = useRef<TValue>(value);\n\n\tuseInsertionEffect(() => {\n\t\tif (shallowCompare(prevValueRef.current, value)) return;\n\n\t\tprevValueRef.current = value;\n\t});\n\n\t// eslint-disable-next-line react-hooks/refs -- Allow this for convenience\n\treturn prevValueRef.current;\n};\n"],"mappings":";;;;;AAKA,MAAa,0BACZ,aACI;CACJ,MAAM,eAAe,OAAgB,OAAmB;AAgBxD,QAdwB,gBAAgB,UAAkB;EACzD,MAAM,YAAY,WAAW,MAAM;AAEnC,MAAI,CAAC,UACJ,QAAO,aAAa;AAGrB,MAAI,eAAe,aAAa,SAAS,UAAU,CAClD,QAAO,aAAa;AAGrB,SAAQ,aAAa,UAAU;GAC9B;;AAKH,MAAa,uBAA+B,UAAkB;CAC7D,MAAM,eAAe,OAAe,MAAM;AAE1C,0BAAyB;AACxB,MAAI,eAAe,aAAa,SAAS,MAAM,CAAE;AAEjD,eAAa,UAAU;GACtB;AAGF,QAAO,aAAa"}
@@ -1,20 +0,0 @@
1
- import * as _zayne_labs_toolkit_core8 from "@zayne-labs/toolkit-core";
2
- import { StorageOptions, StorageStoreApi } from "@zayne-labs/toolkit-core";
3
- import { SelectorFn } from "@zayne-labs/toolkit-type-helpers";
4
-
5
- //#region src/hooks/useStorageState.d.ts
6
- type UseStorageResult<TState, TSlice = TState> = [state: TSlice, actions: StorageStoreApi<TState>];
7
- /**
8
- * @description Creates a custom hook that returns a storage state and actions to modify it. You can use this if you need shared options.
9
- * @note You must use this if you want to be able to prevent syncing state across tabs.
10
- */
11
- declare const createUseStorageState: <TState>(baseOptions: StorageOptions<TState>) => _zayne_labs_toolkit_core8.StoreApi<TState> & {
12
- removeState: () => void;
13
- } & (<TSlice = TState>(selector?: SelectorFn<TState, TSlice>) => UseStorageResult<TState, TSlice>);
14
- type UseStorageStateOptions<TValue> = Omit<StorageOptions<TValue>, "initialValue" | "key">;
15
- declare const useStorageState: <TValue, TSlice = TValue>(key: string, initialValue?: TValue, options?: UseStorageStateOptions<TValue> & {
16
- select?: SelectorFn<TValue, TSlice>;
17
- }) => UseStorageResult<TValue, TSlice>;
18
- //#endregion
19
- export { createUseStorageState, useStorageState };
20
- //# sourceMappingURL=useStorageState.d.ts.map