@chakra-ui/hooks - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

CHANGELOG.md

 # Change Log
 
+## 1.3.0
+
+### Minor Changes
+
+- [`b724a9dd9`](https://github.com/chakra-ui/chakra-ui/commit/b724a9dd9429d02c0b2c7f7deac66d3553100bdc)
+  [#3674](https://github.com/chakra-ui/chakra-ui/pull/3674) Thanks
+  [@codebender828](https://github.com/codebender828)! - Extract all React based
+  utilities and types into `@chakra-ui/react-utils`
+
+### Patch Changes
+
+- [`623e782e8`](https://github.com/chakra-ui/chakra-ui/commit/623e782e80124297740a109e5c6c58cddc35b2eb)
+  [#3408](https://github.com/chakra-ui/chakra-ui/pull/3408) Thanks
+  [@dodas](https://github.com/dodas)! - `useControllableState`: The `onChange`
+  callback will be called only if the new value isn't equal to the current one.
+- Updated dependencies
+  [[`a58b724e9`](https://github.com/chakra-ui/chakra-ui/commit/a58b724e9c8656044f866b658f378662f2a44b46),
+  [`b724a9dd9`](https://github.com/chakra-ui/chakra-ui/commit/b724a9dd9429d02c0b2c7f7deac66d3553100bdc)]:
+  - @chakra-ui/utils@1.5.0
+  - @chakra-ui/react-utils@1.1.0
+
 ## 1.2.0
@@ -4,0 +25,0 @@

dist/cjs/use-controllable.js

@@ -30,4 +30,9 @@ "use strict";
       defaultValue = props.defaultValue,
-      onChange = props.onChange;
-  var handleChange = (0, _useCallbackRef.useCallbackRef)(onChange);
+      onChange = props.onChange,
+      _props$shouldUpdate = props.shouldUpdate,
+      shouldUpdate = _props$shouldUpdate === void 0 ? function (prev, next) {
+    return prev !== next;
+  } : _props$shouldUpdate;
+  var onChangeProp = (0, _useCallbackRef.useCallbackRef)(onChange);
+  var shouldUpdateProp = (0, _useCallbackRef.useCallbackRef)(shouldUpdate);
 
@@ -43,2 +48,6 @@ var _React$useState = React.useState(defaultValue),
 
+    if (!shouldUpdateProp(value, nextValue)) {
+      return;
+    }
+
     if (!isControlled) {
@@ -48,6 +57,6 @@ setValue(nextValue);
 
-    handleChange(nextValue);
-  }, [isControlled, handleChange, value]);
+    onChangeProp(nextValue);
+  }, [isControlled, onChangeProp, value, shouldUpdateProp]);
   return [value, updateValue];
 }
 //# sourceMappingURL=use-controllable.js.map

dist/esm/use-controllable.js

@@ -18,5 +18,7 @@ import { runIfFn } from "@chakra-ui/utils";
     defaultValue,
-    onChange
+    onChange,
+    shouldUpdate = (prev, next) => prev !== next
   } = props;
-  var handleChange = useCallbackRef(onChange);
+  var onChangeProp = useCallbackRef(onChange);
+  var shouldUpdateProp = useCallbackRef(shouldUpdate);
   var [valueState, setValue] = React.useState(defaultValue);
@@ -28,2 +30,6 @@ var isControlled = valueProp !== undefined;
 
+    if (!shouldUpdateProp(value, nextValue)) {
+      return;
+    }
+
     if (!isControlled) {
@@ -33,6 +39,6 @@ setValue(nextValue);
 
-    handleChange(nextValue);
-  }, [isControlled, handleChange, value]);
+    onChangeProp(nextValue);
+  }, [isControlled, onChangeProp, value, shouldUpdateProp]);
   return [value, updateValue];
 }
 //# sourceMappingURL=use-controllable.js.map

dist/types/index.d.ts

@@ -29,1 +29,2 @@ export * from "./use-clipboard";
 export * from "./use-focus-on-pointerdown";
+//# sourceMappingURL=index.d.ts.map

dist/types/use-boolean.d.ts

@@ -13,1 +13,2 @@ declare type InitialState = boolean | (() => boolean);
 export {};
+//# sourceMappingURL=use-boolean.d.ts.map

dist/types/use-callback-ref.d.ts

@@ -8,1 +8,2 @@ /**
 export declare function useCallbackRef<T extends (...args: any[]) => any>(fn: T | undefined): T;
+//# sourceMappingURL=use-callback-ref.d.ts.map

dist/types/use-clipboard.d.ts

@@ -25,1 +25,2 @@ export interface UseClipboardOptions {
 };
+//# sourceMappingURL=use-clipboard.d.ts.map

dist/types/use-const.d.ts

@@ -9,1 +9,2 @@ /**
 export declare function useConst<T extends any | (() => any)>(init: T): T;
+//# sourceMappingURL=use-const.d.ts.map

dist/types/use-controllable.d.ts

@@ -17,5 +17,5 @@ import * as React from "react";
     /**
-     * The component name (for warnings)
+     * The function that determines if the state should be updated
      */
-    name?: string;
+    shouldUpdate?: (prev: T, next: T) => boolean;
 }
@@ -27,1 +27,2 @@ /**
 export declare function useControllableState<T>(props: UseControllableStateProps<T>): [T, React.Dispatch<React.SetStateAction<T>>];
+//# sourceMappingURL=use-controllable.d.ts.map

dist/types/use-dimensions.d.ts

@@ -10,1 +10,2 @@ import * as React from "react";
 export declare function useDimensions(ref: React.RefObject<HTMLElement>, observe?: boolean): BoxModel | null;
+//# sourceMappingURL=use-dimensions.d.ts.map

dist/types/use-disclosure.d.ts

@@ -18,1 +18,2 @@ export interface UseDisclosureProps {
 export declare type UseDisclosureReturn = ReturnType<typeof useDisclosure>;
+//# sourceMappingURL=use-disclosure.d.ts.map

dist/types/use-event-callback.d.ts

@@ -11,1 +11,2 @@ import * as React from "react";
 export declare function useEventCallback<E extends Event | React.SyntheticEvent>(callback: (event: E, ...args: any[]) => void): (event: E, ...args: any[]) => void;
+//# sourceMappingURL=use-event-callback.d.ts.map

dist/types/use-event-listener.d.ts

@@ -10,1 +10,2 @@ /**
 export declare function useEventListener<K extends keyof DocumentEventMap>(event: K | (string & {}), handler: (event: DocumentEventMap[K]) => void, env?: Document | HTMLElement | null, options?: boolean | AddEventListenerOptions): () => void;
+//# sourceMappingURL=use-event-listener.d.ts.map

dist/types/use-focus-effect.d.ts

@@ -13,1 +13,2 @@ import * as React from "react";
 export declare function useFocusEffect<T extends HTMLElement>(ref: React.RefObject<T>, options: UseFocusEffectOptions): void;
+//# sourceMappingURL=use-focus-effect.d.ts.map

dist/types/use-focus-on-hide.d.ts

@@ -16,1 +16,2 @@ import { FocusableElement } from "@chakra-ui/utils";
 export declare function useFocusOnHide(containerRef: RefObject<HTMLElement>, options: UseFocusOnHideOptions): void;
+//# sourceMappingURL=use-focus-on-hide.d.ts.map

dist/types/use-focus-on-pointerdown.d.ts

@@ -16,1 +16,2 @@ import { RefObject } from "react";
 export declare function useFocusOnPointerDown(props: UseFocusOnMouseDownProps): void;
+//# sourceMappingURL=use-focus-on-pointerdown.d.ts.map

dist/types/use-focus-on-show.d.ts

@@ -10,1 +10,2 @@ import { FocusableElement } from "@chakra-ui/utils";
 export declare function useFocusOnShow<T extends HTMLElement>(target: React.RefObject<T> | T, options?: UseFocusOnShowOptions): void;
+//# sourceMappingURL=use-focus-on-show.d.ts.map

dist/types/use-force-update.d.ts

 export declare function useForceUpdate(): () => void;
+//# sourceMappingURL=use-force-update.d.ts.map

dist/types/use-id.d.ts

@@ -24,1 +24,2 @@ /**
 export declare function useIds(idProp?: string, ...prefixes: string[]): string[];
+//# sourceMappingURL=use-id.d.ts.map

dist/types/use-interval.d.ts

@@ -8,1 +8,2 @@ /**
 export declare function useInterval(callback: () => void, delay: number | null): void;
+//# sourceMappingURL=use-interval.d.ts.map

dist/types/use-latest-ref.d.ts

@@ -10,1 +10,2 @@ import * as React from "react";
 export declare function useLatestRef<T>(value: T): React.MutableRefObject<T>;
+//# sourceMappingURL=use-latest-ref.d.ts.map

dist/types/use-merge-refs.d.ts

@@ -18,1 +18,2 @@ import * as React from "react";
 export {};
+//# sourceMappingURL=use-merge-refs.d.ts.map

dist/types/use-mouse-down-ref.d.ts

@@ -6,1 +6,2 @@ import React from "react";
 export declare function useMouseDownRef(shouldListen?: boolean): React.RefObject<HTMLElement>;
+//# sourceMappingURL=use-mouse-down-ref.d.ts.map

dist/types/use-outside-click.d.ts

@@ -11,1 +11,2 @@ import { RefObject } from "react";
 export declare function useOutsideClick(props: UseOutsideClickProps): void;
+//# sourceMappingURL=use-outside-click.d.ts.map

dist/types/use-pointer-event.d.ts

@@ -7,1 +7,2 @@ /**
 export declare function usePointerEvent(env: Document | HTMLElement | null, eventName: string, handler: EventListenerWithPointInfo, options?: AddEventListenerOptions): () => void;
+//# sourceMappingURL=use-pointer-event.d.ts.map

dist/types/use-previous.d.ts

 export declare function usePrevious<T>(value: T): T;
+//# sourceMappingURL=use-previous.d.ts.map

dist/types/use-safe-layout-effect.d.ts

@@ -13,1 +13,2 @@ import * as React from "react";
 export declare const useSafeLayoutEffect: typeof React.useEffect;
+//# sourceMappingURL=use-safe-layout-effect.d.ts.map

dist/types/use-shortcut.d.ts

@@ -11,1 +11,2 @@ import * as React from "react";
 export declare function useShortcut(props?: UseShortcutProps): (fn: (keysSoFar: string) => void) => (event: React.KeyboardEvent) => void;
+//# sourceMappingURL=use-shortcut.d.ts.map

dist/types/use-timeout.d.ts

@@ -8,1 +8,2 @@ /**
 export declare function useTimeout(callback: (...args: any[]) => void, delay: number | null): void;
+//# sourceMappingURL=use-timeout.d.ts.map

dist/types/use-unmount-effect.d.ts

 export declare function useUnmountEffect(fn: () => void, deps?: any[]): void;
+//# sourceMappingURL=use-unmount-effect.d.ts.map

dist/types/use-update-effect.d.ts

@@ -7,1 +7,2 @@ import * as React from "react";
 export declare const useUpdateEffect: typeof React.useEffect;
+//# sourceMappingURL=use-update-effect.d.ts.map

dist/types/use-why-update.d.ts

 export declare function useWhyDidYouUpdate(name: string, props: any): void;
+//# sourceMappingURL=use-why-update.d.ts.map

package.json

 {
   "name": "@chakra-ui/hooks",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "React hooks for Chakra components",
@@ -53,3 +53,4 @@ "keywords": [
   "dependencies": {
-    "@chakra-ui/utils": "1.4.0",
+    "@chakra-ui/react-utils": "1.1.0",
+    "@chakra-ui/utils": "1.5.0",
     "compute-scroll-into-view": "1.0.14",
@@ -56,0 +57,0 @@ "copy-to-clipboard": "3.3.1"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

237105

increased by6.07%

Number of package files

177

increased by19.59%

Lines of code

2340

increased by0.56%

Worsened metrics

Dependency count

5

increased by25%

Dependency changes

• + Added@chakra-ui/react-utils@1.1.0

• + Added@chakra-ui/react-utils@1.1.0(transitive)

• + Added@chakra-ui/utils@1.5.0(transitive)

• + Addedreact-dom@18.3.1(transitive)

• + Addedscheduler@0.23.2(transitive)

• - Removed@chakra-ui/utils@1.4.0(transitive)

• - Removed@types/object-assign@4.0.30(transitive)

• Updated@chakra-ui/utils@1.5.0