@zayne-labs/toolkit-react 0.12.1 → 0.12.2

package/dist/esm/hooks/useControllable.js

@@ -51,24 +51,21 @@ const useControllableProp = (options) => {
 */
 const useControllableState = (options) => {
 	const { defaultValue, equalityFn = Object.is, onChange: onChangeProp, value: valueProp } = options;
-	const savedOnchangeProp = useCallbackRef(onChangeProp);
-	const savedEqualityFn = useCallbackRef(equalityFn);
+	const stableOnchangeProp = useCallbackRef(onChangeProp);
+	const stableEqualityFn = useCallbackRef(equalityFn);
 	const [unControlledState, setUncontrolledState] = useState(defaultValue);
 	const isControlled = valueProp !== void 0;
 	const currentValue = isControlled ? valueProp : unControlledState;
 	const setValue = useCallback((newValue) => {
 		const nextValue = isFunction(newValue) ? newValue(currentValue) : newValue;
-		if (savedEqualityFn(currentValue, nextValue)) return;
-		if (isControlled) {
-			savedOnchangeProp(nextValue);
-			return;
-		}
+		if (stableEqualityFn(currentValue, nextValue)) return;
+		stableOnchangeProp(nextValue);
+		if (isControlled) return;
 		setUncontrolledState(nextValue);
-		savedOnchangeProp(nextValue);
 	}, [
 		isControlled,
-		savedOnchangeProp,
-		savedEqualityFn,
+		stableOnchangeProp,
+		stableEqualityFn,
 		currentValue
 	]);
 	return [currentValue, setValue];

package/dist/esm/hooks/useControllable.js.map

@@ -1 +1 @@
-{"version":3,"file":"useControllable.js","names":["setValue: StateSetter<TValue>"],"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 savedOnchangeProp = useCallbackRef(onChangeProp);\n\tconst savedEqualityFn = 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 (savedEqualityFn(currentValue, nextValue)) return;\n\n\t\t\tif (isControlled) {\n\t\t\t\tsavedOnchangeProp(nextValue);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsetUncontrolledState(nextValue);\n\t\t\t// == Always call onChangeProp even if the value is uncontrolled, just in case the onChangeProp is used to perform side effects without necessarily updating the controlled valueProp\n\t\t\tsavedOnchangeProp(nextValue);\n\t\t},\n\t\t[isControlled, savedOnchangeProp, savedEqualityFn, 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,oBAAoB,eAAe,aAAa;CACtD,MAAM,kBAAkB,eAAe,WAAW;CAElD,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,aAAuB;CAElF,MAAM,eAAe,cAAc;CAEnC,MAAM,eAAe,eAAe,YAAY;CAEhD,MAAMA,WAAgC,aACpC,aAAa;EACb,MAAM,YAAY,WAAW,SAAS,GAAG,SAAS,aAAa,GAAG;AAElE,MAAI,gBAAgB,cAAc,UAAU,CAAE;AAE9C,MAAI,cAAc;AACjB,qBAAkB,UAAU;AAC5B;;AAGD,uBAAqB,UAAU;AAE/B,oBAAkB,UAAU;IAE7B;EAAC;EAAc;EAAmB;EAAiB;EAAa,CAChE;AAED,QAAO,CAAC,cAAc,SAAS"}
+{"version":3,"file":"useControllable.js","names":["setValue: StateSetter<TValue>"],"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;CAEhD,MAAMA,WAAgC,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;AAED,QAAO,CAAC,cAAc,SAAS"}

package/dist/esm/hooks/useCopyToClipboard.d.ts

@@ -1,4 +1,4 @@
-import * as react2 from "react";
+import * as react4 from "react";
 import { AllowedClipboardItems, CopyToClipboardOptions } from "@zayne-labs/toolkit-core";
 
 //#region src/hooks/useCopyToClipboard.d.ts
@@ -7,7 +7,7 @@ declare const useCopyToClipboard: (options?: CopyToClipboardOptions & {
 }) => {
   handleCopy: (valueToCopy: AllowedClipboardItems) => void;
   hasCopied: boolean;
-  setValue: react2.Dispatch<react2.SetStateAction<AllowedClipboardItems>>;
+  setValue: react4.Dispatch<react4.SetStateAction<AllowedClipboardItems>>;
   value: AllowedClipboardItems;
 };
 //#endregion

package/dist/esm/hooks/useDebounce.d.ts

@@ -1,4 +1,4 @@
-import * as react4 from "react";
+import * as react6 from "react";
 import { CallbackFn } from "@zayne-labs/toolkit-type-helpers";
 
 //#region src/hooks/useDebounce.d.ts
@@ -11,13 +11,13 @@ declare const useDebouncedFn: <TParams>(callBackFn: CallbackFn<TParams>, delay:
   cancelMaxWait(): void;
 };
 declare const useDebouncedState: <TValue>(defaultValue: TValue, delay: number | undefined) => readonly [TValue, {
-  (...params: react4.SetStateAction<TValue>[]): void;
-  (params: react4.SetStateAction<TValue> | react4.SetStateAction<TValue>[], overrideOptions: {
+  (...params: react6.SetStateAction<TValue>[]): void;
+  (params: react6.SetStateAction<TValue> | react6.SetStateAction<TValue>[], overrideOptions: {
     $delay: number;
   }): void;
   cancel: () => void;
   cancelMaxWait(): void;
-}, react4.Dispatch<react4.SetStateAction<TValue>>];
+}, react6.Dispatch<react6.SetStateAction<TValue>>];
 //#endregion
 export { useDebouncedFn, useDebouncedState };
 //# sourceMappingURL=useDebounce.d.ts.map

package/dist/esm/hooks/useLocationState.d.ts

@@ -1,16 +1,16 @@
-import * as _zayne_labs_toolkit_core0 from "@zayne-labs/toolkit-core";
+import * as _zayne_labs_toolkit_core1 from "@zayne-labs/toolkit-core";
 import { LocationInfo, LocationStoreApi, LocationStoreOptions } from "@zayne-labs/toolkit-core";
 import { SelectorFn } from "@zayne-labs/toolkit-type-helpers";
 
 //#region src/hooks/useLocationState.d.ts
 type UseLocationResult<TSlice> = [state: TSlice, actions: LocationStoreApi];
-declare const createUseLocationState: (options?: LocationStoreOptions) => Omit<_zayne_labs_toolkit_core0.StoreApi<_zayne_labs_toolkit_core0.URLInfoObject>, "resetState" | "setState"> & {
-  push: (url: string | _zayne_labs_toolkit_core0.PartialURLInfo, options?: {
-    state?: _zayne_labs_toolkit_core0.PartialURLInfo["state"];
+declare const createUseLocationState: (options?: LocationStoreOptions) => Omit<_zayne_labs_toolkit_core1.StoreApi<_zayne_labs_toolkit_core1.URLInfoObject>, "resetState" | "setState"> & {
+  push: (url: string | _zayne_labs_toolkit_core1.PartialURLInfo, options?: {
+    state?: _zayne_labs_toolkit_core1.PartialURLInfo["state"];
   }) => void;
   replace: LocationStoreApi["push"];
   triggerPopstateEvent: (nextLocationState?: LocationInfo["state"]) => void;
-} & (<TSlice = _zayne_labs_toolkit_core0.URLInfoObject>(selector?: SelectorFn<LocationInfo, TSlice>) => UseLocationResult<TSlice>);
+} & (<TSlice = _zayne_labs_toolkit_core1.URLInfoObject>(selector?: SelectorFn<LocationInfo, TSlice>) => UseLocationResult<TSlice>);
 declare const useLocationState: <TSlice = LocationInfo>(selector?: SelectorFn<LocationInfo, TSlice>, options?: LocationStoreOptions) => UseLocationResult<TSlice>;
 //#endregion
 export { createUseLocationState, useLocationState };

package/dist/esm/hooks/useSearch.d.ts

@@ -1,11 +1,11 @@
-import * as react9 from "react";
+import * as react2 from "react";
 
 //#region src/hooks/useSearch.d.ts
 declare const useSearch: <TData>(initialData: TData[], delay?: number) => {
   data: TData[];
   isLoading: boolean;
   query: string;
-  setQuery: react9.Dispatch<react9.SetStateAction<string>>;
+  setQuery: react2.Dispatch<react2.SetStateAction<string>>;
 };
 //#endregion
 export { useSearch };

package/dist/esm/hooks/useSearchParams.d.ts

@@ -1,12 +1,12 @@
-import * as _zayne_labs_toolkit_core4 from "@zayne-labs/toolkit-core";
+import * as _zayne_labs_toolkit_core0 from "@zayne-labs/toolkit-core";
 import { LocationStoreOptions, URLSearchParamsInit } from "@zayne-labs/toolkit-core";
 
 //#region src/hooks/useSearchParams.d.ts
 type UseSearchParamsOptions = LocationStoreOptions & {
   action?: "push" | "replace";
 };
-declare const useSearchParams: <TSearchParams extends URLSearchParamsInit>(options?: UseSearchParamsOptions) => [searchParams: URLSearchParams, setSearchParams: (newQueryParams: TSearchParams | ((prev: URLSearchParams) => TSearchParams)) => void, triggerPopstateEvent: (nextLocationState?: _zayne_labs_toolkit_core4.LocationInfo["state"]) => void];
-declare const useSearchParamsObject: <TSearchParams extends Record<string, string>>(options?: UseSearchParamsOptions) => [searchParamsObject: TSearchParams, setSearchParamsObject: (newQueryParams: TSearchParams | ((prev: TSearchParams) => TSearchParams)) => void, triggerPopstateEvent: (nextLocationState?: _zayne_labs_toolkit_core4.LocationInfo["state"]) => void];
+declare const useSearchParams: <TSearchParams extends URLSearchParamsInit>(options?: UseSearchParamsOptions) => [searchParams: URLSearchParams, setSearchParams: (newQueryParams: TSearchParams | ((prev: URLSearchParams) => TSearchParams)) => void, triggerPopstateEvent: (nextLocationState?: _zayne_labs_toolkit_core0.LocationInfo["state"]) => void];
+declare const useSearchParamsObject: <TSearchParams extends Record<string, string>>(options?: UseSearchParamsOptions) => [searchParamsObject: TSearchParams, setSearchParamsObject: (newQueryParams: TSearchParams | ((prev: TSearchParams) => TSearchParams)) => void, triggerPopstateEvent: (nextLocationState?: _zayne_labs_toolkit_core0.LocationInfo["state"]) => void];
 //#endregion
 export { useSearchParams, useSearchParamsObject };
 //# sourceMappingURL=useSearchParams.d.ts.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@zayne-labs/toolkit-react",
   "type": "module",
-  "version": "0.12.1",
+  "version": "0.12.2",
   "description": "A collection of utility functions, types and composables used by my other projects. Nothing too fancy but can be useful.",
   "author": "Ryan Zayne",
   "license": "MIT",
@@ -43,8 +43,8 @@
     }
   },
   "dependencies": {
-    "@zayne-labs/toolkit-core": "0.12.1",
-    "@zayne-labs/toolkit-type-helpers": "0.12.1"
+    "@zayne-labs/toolkit-core": "0.12.2",
+    "@zayne-labs/toolkit-type-helpers": "0.12.2"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.2",
@@ -52,7 +52,7 @@
     "@size-limit/esbuild-why": "^11.2.0",
     "@size-limit/preset-small-lib": "^11.2.0",
     "@total-typescript/ts-reset": "^0.6.1",
-    "@types/node": "^24.6.1",
+    "@types/node": "^24.6.2",
     "@types/react": "^19.2.0",
     "@zayne-labs/tsconfig": "0.10.4",
     "concurrently": "^9.2.1",