@chakra-ui/hooks - npm Package Compare versions

Comparing version 1.5.2 to 1.5.3

CHANGELOG.md

 # Change Log
 
+## 1.5.3
+
+### Patch Changes
+
+- [`aa374ffcb`](https://github.com/chakra-ui/chakra-ui/commit/aa374ffcb4003efd88eb6a62e10723ea9fbfa3d0)
+  [#4166](https://github.com/chakra-ui/chakra-ui/pull/4166) Thanks
+  [@segunadebayo](https://github.com/segunadebayo)! - Fix inconsisent id
+  generation between client and server
+
 ## 1.5.2
@@ -4,0 +13,0 @@

dist/cjs/use-id.js

@@ -6,7 +6,7 @@ "use strict";
 exports.useIds = useIds;
+exports.useOptionalPart = useOptionalPart;
+exports.IdProvider = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
-var _useSafeLayoutEffect = require("./use-safe-layout-effect");
-
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
@@ -16,36 +16,30 @@
 
-/**
- * Credit: https://github.com/reach/reach-ui/blob/develop/packages/auto-id/src/index.tsx
- */
-var handoffComplete = false;
-var id = 0;
-
-var genId = function genId() {
-  return ++id;
+// This implementation is heavily inspired by react-aria's implementation
+var defaultIdContext = {
+  prefix: Math.round(Math.random() * 10000000000),
+  current: 0
 };
-/**
- * Reack hook to generate unique id
- *
- * @param idProp the external id passed from the user
- * @param prefix prefix to append before the id
- */
+var IdContext = /*#__PURE__*/React.createContext(defaultIdContext);
+var IdProvider = /*#__PURE__*/React.memo(function (_ref) {
+  var children = _ref.children;
+  var currentContext = React.useContext(IdContext);
+  var isRoot = currentContext === defaultIdContext;
+  var context = React.useMemo(function () {
+    return {
+      prefix: isRoot ? 0 : ++currentContext.prefix,
+      current: 0
+    };
+  }, [isRoot, currentContext]);
+  return /*#__PURE__*/React.createElement(IdContext.Provider, {
+    value: context
+  }, children);
+});
+exports.IdProvider = IdProvider;
 
-
 function useId(idProp, prefix) {
-  var initialId = idProp || (handoffComplete ? genId() : null);
-
-  var _React$useState = React.useState(initialId),
-      uid = _React$useState[0],
-      setUid = _React$useState[1];
-
-  (0, _useSafeLayoutEffect.useSafeLayoutEffect)(function () {
-    if (uid === null) setUid(genId());
-  }, []);
-  React.useEffect(function () {
-    if (handoffComplete === false) {
-      handoffComplete = true;
-    }
-  }, []);
-  var id = uid != null ? uid.toString() : undefined;
-  return prefix ? prefix + "-" + id : id;
+  var context = React.useContext(IdContext);
+  return React.useMemo(function () {
+    return idProp || [prefix, context.prefix, ++context.current].filter(Boolean).join("-");
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [idProp, prefix]);
 }
@@ -70,4 +64,2 @@ /**
 function useIds(idProp) {
-  var id = useId(idProp);
-
   for (var _len = arguments.length, prefixes = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
@@ -77,6 +69,34 @@ prefixes[_key - 1] = arguments[_key];
 
-  return prefixes.map(function (prefix) {
-    return prefix + "-" + id;
-  });
+  var id = useId(idProp);
+  return React.useMemo(function () {
+    return prefixes.map(function (prefix) {
+      return prefix + "-" + id;
+    });
+  }, [id, prefixes]);
 }
+/**
+ * Used to generate an id, and after render, check if that id is rendered so we know
+ * if we can use it in places such as `aria-labelledby`.
+ *
+ * @param partId - The unique id for the component part
+ *
+ * @example
+ * const { ref, id } = useOptionalPart<HTMLInputElement>(`${id}-label`)
+ */
+
+
+function useOptionalPart(partId) {
+  var _React$useState = React.useState(null),
+      id = _React$useState[0],
+      setId = _React$useState[1];
+
+  var ref = React.useCallback(function (node) {
+    setId(node ? partId : null);
+  }, [partId]);
+  return {
+    ref: ref,
+    id: id,
+    isRendered: Boolean(id)
+  };
+}
 //# sourceMappingURL=use-id.js.map

dist/esm/use-id.js

@@ -0,32 +1,26 @@
+// This implementation is heavily inspired by react-aria's implementation
 import * as React from "react";
-import { useSafeLayoutEffect } from "./use-safe-layout-effect";
-/**
- * Credit: https://github.com/reach/reach-ui/blob/develop/packages/auto-id/src/index.tsx
- */
-
-var handoffComplete = false;
-var id = 0;
-
-var genId = () => ++id;
-/**
- * Reack hook to generate unique id
- *
- * @param idProp the external id passed from the user
- * @param prefix prefix to append before the id
- */
-
-
+var defaultIdContext = {
+  prefix: Math.round(Math.random() * 10000000000),
+  current: 0
+};
+var IdContext = /*#__PURE__*/React.createContext(defaultIdContext);
+export var IdProvider = /*#__PURE__*/React.memo((_ref) => {
+  var {
+    children
+  } = _ref;
+  var currentContext = React.useContext(IdContext);
+  var isRoot = currentContext === defaultIdContext;
+  var context = React.useMemo(() => ({
+    prefix: isRoot ? 0 : ++currentContext.prefix,
+    current: 0
+  }), [isRoot, currentContext]);
+  return /*#__PURE__*/React.createElement(IdContext.Provider, {
+    value: context
+  }, children);
+});
 export function useId(idProp, prefix) {
-  var initialId = idProp || (handoffComplete ? genId() : null);
-  var [uid, setUid] = React.useState(initialId);
-  useSafeLayoutEffect(() => {
-    if (uid === null) setUid(genId());
-  }, []);
-  React.useEffect(() => {
-    if (handoffComplete === false) {
-      handoffComplete = true;
-    }
-  }, []);
-  var id = uid != null ? uid.toString() : undefined;
-  return prefix ? prefix + "-" + id : id;
+  var context = React.useContext(IdContext);
+  return React.useMemo(() => idProp || [prefix, context.prefix, ++context.current].filter(Boolean).join("-"), // eslint-disable-next-line react-hooks/exhaustive-deps
+  [idProp, prefix]);
 }
@@ -50,4 +44,2 @@ /**
 export function useIds(idProp) {
-  var id = useId(idProp);
-
   for (var _len = arguments.length, prefixes = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
@@ -57,4 +49,28 @@ prefixes[_key - 1] = arguments[_key];
 
-  return prefixes.map(prefix => prefix + "-" + id);
+  var id = useId(idProp);
+  return React.useMemo(() => {
+    return prefixes.map(prefix => prefix + "-" + id);
+  }, [id, prefixes]);
 }
+/**
+ * Used to generate an id, and after render, check if that id is rendered so we know
+ * if we can use it in places such as `aria-labelledby`.
+ *
+ * @param partId - The unique id for the component part
+ *
+ * @example
+ * const { ref, id } = useOptionalPart<HTMLInputElement>(`${id}-label`)
+ */
+
+export function useOptionalPart(partId) {
+  var [id, setId] = React.useState(null);
+  var ref = React.useCallback(node => {
+    setId(node ? partId : null);
+  }, [partId]);
+  return {
+    ref,
+    id,
+    isRendered: Boolean(id)
+  };
+}
 //# sourceMappingURL=use-id.js.map

dist/types/use-id.d.ts

@@ -1,7 +0,3 @@
-/**
- * Reack hook to generate unique id
- *
- * @param idProp the external id passed from the user
- * @param prefix prefix to append before the id
- */
+import * as React from "react";
+export declare const IdProvider: React.FC;
 export declare function useId(idProp?: string, prefix?: string): string;
@@ -24,2 +20,16 @@ /**
 export declare function useIds(idProp?: string, ...prefixes: string[]): string[];
+/**
+ * Used to generate an id, and after render, check if that id is rendered so we know
+ * if we can use it in places such as `aria-labelledby`.
+ *
+ * @param partId - The unique id for the component part
+ *
+ * @example
+ * const { ref, id } = useOptionalPart<HTMLInputElement>(`${id}-label`)
+ */
+export declare function useOptionalPart<T = any>(partId: string): {
+    ref: (node: T) => void;
+    id: string | null;
+    isRendered: boolean;
+};
 //# sourceMappingURL=use-id.d.ts.map

package.json

 {
   "name": "@chakra-ui/hooks",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "description": "React hooks for Chakra components",
@@ -5,0 +5,0 @@ "keywords": [

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

272681

increased by2.34%

Lines of code

2603

increased by2.08%

No dependency changes