@atlaskit/ds-lib - npm Package Compare versions

Comparing version 3.1.0 to 3.2.0

CHANGELOG.md

 # @atlaskit/ds-lib
 
+## 3.2.0
+
+### Minor Changes
+
+- [`be6f923511512`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/be6f923511512) -
+  Adding new hook: `useStableRef` which is helpful to store the latest values of `state` or `props`
+  for usage in effects or event listeners without needing to create new effects or event listeners
+  functions.
+
+  ```tsx
+  import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
+
+  function Component({ canShow }: { canShow: () => boolean }) {
+  	const stableRef = useStableRef({ canShow });
+
+  	useEffect(
+  		() => {
+  			stableRef.current.canShow();
+  		},
+  		// Able to use the last render value of `canShow` without needing
+  		// to invalidate the effect. Useful for lazy usage of props.
+  		[],
+  	);
+
+  	return null;
+  }
+  ```
+
 ## 3.1.0
@@ -4,0 +32,0 @@

dist/cjs/utils/merge-refs.js

@@ -13,2 +13,3 @@ "use strict";
 function mergeRefs(refs) {
+  // TODO: could this be wrapped in `useCallback` so we get a stable function?
   return function (value) {
@@ -15,0 +16,0 @@ refs.forEach(function (ref) {

dist/cjs/utils/use-id.js

@@ -58,5 +58,3 @@ "use strict";
  * @component
- * @param {IdProviderProps['children']} props.children - The child elements to be wrapped.
- *                                                         Can be a function that receives the generated id.
- * @param {IdProviderProps['ref']} [props.ref] - A ref callback to get the instance of the generated id.
+ * @param {IdProviderProps} props
  *
@@ -150,3 +148,3 @@ * @example
  * @example
- * import { useIdSeed } from '@atlaskit/ds-lib/react-uid';
+ * import { useIdSeed } from '@atlaskit/ds-lib/use-id';
  *
@@ -153,0 +151,0 @@ * export default function Form() {

dist/es2019/utils/merge-refs.js

@@ -7,2 +7,3 @@ /**
 export default function mergeRefs(refs) {
+  // TODO: could this be wrapped in `useCallback` so we get a stable function?
   return value => {
@@ -9,0 +10,0 @@ refs.forEach(ref => {

dist/es2019/utils/use-id.js

@@ -46,5 +46,3 @@ var _React$useId;
  * @component
- * @param {IdProviderProps['children']} props.children - The child elements to be wrapped.
- *                                                         Can be a function that receives the generated id.
- * @param {IdProviderProps['ref']} [props.ref] - A ref callback to get the instance of the generated id.
+ * @param {IdProviderProps} props
  *
@@ -137,3 +135,3 @@ * @example
  * @example
- * import { useIdSeed } from '@atlaskit/ds-lib/react-uid';
+ * import { useIdSeed } from '@atlaskit/ds-lib/use-id';
  *
@@ -140,0 +138,0 @@ * export default function Form() {

dist/esm/utils/merge-refs.js

@@ -7,2 +7,3 @@ /**
 export default function mergeRefs(refs) {
+  // TODO: could this be wrapped in `useCallback` so we get a stable function?
   return function (value) {
@@ -9,0 +10,0 @@ refs.forEach(function (ref) {

dist/esm/utils/use-id.js

@@ -47,5 +47,3 @@ import _typeof from "@babel/runtime/helpers/typeof";
  * @component
- * @param {IdProviderProps['children']} props.children - The child elements to be wrapped.
- *                                                         Can be a function that receives the generated id.
- * @param {IdProviderProps['ref']} [props.ref] - A ref callback to get the instance of the generated id.
+ * @param {IdProviderProps} props
  *
@@ -139,3 +137,3 @@ * @example
  * @example
- * import { useIdSeed } from '@atlaskit/ds-lib/react-uid';
+ * import { useIdSeed } from '@atlaskit/ds-lib/use-id';
  *
@@ -142,0 +140,0 @@ * export default function Form() {

dist/types-ts4.5/utils/use-id.d.ts

@@ -22,3 +22,3 @@ import React, { type ReactNode } from 'react';
 export declare function useId(): string;
-interface IdProviderProps {
+export interface IdProviderProps {
     /**
@@ -51,5 +51,3 @@ * Children to render.
  * @component
- * @param {IdProviderProps['children']} props.children - The child elements to be wrapped.
- *                                                         Can be a function that receives the generated id.
- * @param {IdProviderProps['ref']} [props.ref] - A ref callback to get the instance of the generated id.
+ * @param {IdProviderProps} props
  *
@@ -117,3 +115,3 @@ * @example
  * @example
- * import { useIdSeed } from '@atlaskit/ds-lib/react-uid';
+ * import { useIdSeed } from '@atlaskit/ds-lib/use-id';
  *
@@ -120,0 +118,0 @@ * export default function Form() {

dist/types/utils/use-id.d.ts

@@ -22,3 +22,3 @@ import React, { type ReactNode } from 'react';
 export declare function useId(): string;
-interface IdProviderProps {
+export interface IdProviderProps {
     /**
@@ -51,5 +51,3 @@ * Children to render.
  * @component
- * @param {IdProviderProps['children']} props.children - The child elements to be wrapped.
- *                                                         Can be a function that receives the generated id.
- * @param {IdProviderProps['ref']} [props.ref] - A ref callback to get the instance of the generated id.
+ * @param {IdProviderProps} props
  *
@@ -117,3 +115,3 @@ * @example
  * @example
- * import { useIdSeed } from '@atlaskit/ds-lib/react-uid';
+ * import { useIdSeed } from '@atlaskit/ds-lib/use-id';
  *
@@ -120,0 +118,0 @@ * export default function Form() {

package.json

 {
 	"name": "@atlaskit/ds-lib",
-	"version": "3.1.0",
+	"version": "3.2.0",
 	"description": "Reusable utilities and hooks specific to design system.",
@@ -49,2 +49,3 @@ "publishConfig": {
 		"./use-previous-value": "./src/hooks/use-previous-value.tsx",
+		"./use-stable-ref": "./src/hooks/use-stable-ref.tsx",
 		"./use-close-on-escape-press": "./src/hooks/use-close-on-escape-press.tsx",
@@ -51,0 +52,0 @@ "./use-auto-focus": "./src/hooks/use-auto-focus.tsx"

README.md

@@ -96,2 +96,21 @@ # DSLib
 
+### `useStableRef()`
+
+```tsx
+function Component({ canShow }: { canShow: () => boolean }) {
+	const stableRef = useStableRef({ canShow });
+
+	useEffect(
+		() => {
+			stableRef.current.canShow();
+		},
+		// Able to use the last render value of `canShow` without needing
+		// to invalidate the effect. Useful for lazy usage of props.
+		[],
+	);
+
+	return null;
+}
+```
+
 ### `useLazyCallback()`
@@ -98,0 +117,0 @@

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

Unstable ownership

Supply chain risk

A new collaborator has begun publishing package versions. Package stability and security risk may be elevated.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

100191

increased by5.23%

Number of package files

111

increased by5.71%

Lines of code

2378

increased by8.83%

Number of lines in readme file

188

increased by11.24%

Worsened metrics

Number of high supply chain risk alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes