@atlaskit/ds-lib - npm Package Compare versions

Comparing version 5.0.0 to 5.0.1

CHANGELOG.md

 # @atlaskit/ds-lib
 
+## 5.0.1
+
+### Patch Changes
+
+- [`23868361e470e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/23868361e470e) -
+  Behind feature gates 'platform-dst-react-18-use-id' and
+  'platform-dst-react-18-use-id-selector-safe' makes the `useId()` function return a selector-safe
+  version of `React.useId()` matching React 19.x functionality per
+  https://github.com/facebook/react/pull/33422
+
 ## 5.0.0
@@ -4,0 +14,0 @@

deprecation-warning/package.json

@@ -11,3 +11,3 @@ {
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
@@ -14,0 +14,0 @@ "../dist/types-ts4.5/utils/deprecation-warning.d.ts"

device-check/package.json

@@ -11,3 +11,3 @@ {
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
@@ -14,0 +14,0 @@ "../dist/types-ts4.5/utils/device-check.d.ts"

dist/cjs/utils/use-id.js

@@ -16,2 +16,6 @@ "use strict";
 var _React$useId;
+/**
+ * I suggest using this as a reference for the feature gate tidy:
+ * @see https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/211376
+ */
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -25,21 +29,20 @@ // Type copied from https://github.com/thearnica/react-uid/blob/0f507fbbdb1ab84acf477ec32698afe3d2191e49/src/hooks.ts#L12
 /**
- * Returns a unique id
+ * Based on a feature gate, returns a unique id using `react-uid` or `React.useId()`
+ * or `React.useId()` with a string replace to match React 19 functionality
+ * @see https://github.com/facebook/react/pull/33422
  *
- * React 18 SSR and Concurrent modes are supported when the `platform-dst-react-18-use-id` flag is enabled.
- * This is an interop function that supports React 16 and 18.
- *
- * If migrating from `useUID` in the `react-uid` package, then `useId` is a direct replacement.
- *
- * @return string
- * @see {@link useIdSeed}
- * @see https://github.com/thearnica/react-uid#hooks-168
- * @private We intend to deprecate and replace with `useId()` directly
- * @example
- * const id = useUID();
- * id == "r1"; // for example
- *
- * Parts of the above are from: https://github.com/thearnica/react-uid/blob/0f507fbbdb1ab84acf477ec32698afe3d2191e49/src/hooks.ts#L41C1-L49C4
+ * Generally, you should just use `React.useId()` directly as we're on React 18.
+ * You can use this function if you need to use the generated id in a HTML selector
+ * as `React.useId()` currently does not generate HTML selector safe ids.
+ * However, using these identifiers in selectors should be avoided, even in tests,
+ * so `React.useId()` is heavily encouraged.
  */
 function useId() {
   if (react18UseId && (0, _platformFeatureFlags.fg)('platform-dst-react-18-use-id')) {
+    if ((0, _platformFeatureFlags.fg)('platform-dst-react-18-use-id-selector-safe')) {
+      // tl;dr: React uses `:` or `«»` in selectors which breaks `document.querySelector(…)`
+      // in hundreds of tests. So we replace it with a safe string of `_` to match future
+      // React 19 functionality: https://github.com/facebook/react/pull/33422
+      return react18UseId().replace(/[:«»]/g, '_');
+    }
     return react18UseId();
@@ -52,53 +55,7 @@ }
  *
- * This component is only intended for class components,
- * functional components should use the useId hook directly.
+ * This component is only intended for class components, function components
+ * should probably use `React.useId()` directly.
  *
- * @component
- * @param {IdProviderProps} props
- * @private We intend to deprecate and replace with `useId()` directly
- * @example
- * Child as function
- * ```jsx
- * class Example extends React.Component {
- *   render() {
- *     return (
- *       <IdProvider>
- *         {({ id }) => (<div id={id}>Hello</div>)}
- *       </IdProvider>
- *     );
- *   }
- * }
- * ```
- *
- * @example
- * Ref object
- * ```jsx
- * class Example extends React.Component {
- *   readonly useIdRef = React.createRef<string>();
- *   render() {
- *     return (
- *       <IdProvider ref={this.useIdRef}>
- *         <div id={this.useIdRef.current}>Hello</div>
- *       </IdProvider>
- *     );
- *   }
- * }
- *
- * @example
- * Ref as callback
- * ```jsx
- * class Example extends React.Component {
- *   id = '';
- *   setId = (id: string) => {
- *     this.id = id;
- *   };
- *   render() {
- *     return (
- *       <IdProvider ref={this.setId}>
- *         <div id={this.id}>Hello</div>
- *       </IdProvider>
- *     );
- *   }
- * }
- * ```
+ * @private
+ * @deprecated This import shouldn't be used, suggested to use `React.useId()` directly. It is kept for class component compatibility.
  */
@@ -135,32 +92,9 @@ var IdProvider = exports.IdProvider = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
  *
- * React 18 SSR and Concurrent modes are supported when the `platform-dst-react-18-use-id` flag is enabled.
- * This is an interop function that supports React 16 and 18.
- *
- * If migrating from `useUIDSeed` in the `react-uid` package, then `useIdSeed` is a direct replacement.
- *
- * "If you need to give IDs to multiple related elements, you can call useId to generate a shared prefix for them" - From React
- * This function will help to implement the above.
- * @return (id: any) => string
- * @see https://react.dev/reference/react/useId#generating-ids-for-several-related-elements
- * @see https://github.com/thearnica/react-uid#hooks-168
- * @private We intend to deprecate and replace with `useId()` directly
- * @example
- * import { useIdSeed } from '@atlaskit/ds-lib/use-id';
- *
- * export default function Form() {
- * 	 const idSeed = useIdSeed();
- *   return (
- *     <form>
- *       <label htmlFor={idSeed('firstName')}>First Name:</label>
- *       <input id={idSeed('firstName')} type="text" />
- *       <hr />
- *       <label htmlFor={idSeed('lastName')}>Last Name:</label>
- *       <input id={idSeed('lastName')} type="text" />
- *     </form>
- *   );
- * }
+ * @private
+ * @deprecated This import shouldn't be used, suggested to use `React.useId()` directly.
  */
 function useIdSeed() {
   if (react18UseId && (0, _platformFeatureFlags.fg)('platform-dst-react-18-use-id')) {
-    var uid = react18UseId();
+    // eslint-disable-next-line react-hooks/rules-of-hooks -- cleanup with feature gating
+    var uid = useId();
     return function (id) {
@@ -167,0 +101,0 @@ return "".concat(uid, "-").concat(id.toString());

dist/es2019/utils/use-id.js

 var _React$useId;
 import React, { forwardRef, useEffect } from 'react';
 import { useUID as react16UseId, useUIDSeed as react16UseIdSeed } from 'react-uid';
+
+/**
+ * I suggest using this as a reference for the feature gate tidy:
+ * @see https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/211376
+ */
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -13,21 +18,20 @@
 /**
- * Returns a unique id
+ * Based on a feature gate, returns a unique id using `react-uid` or `React.useId()`
+ * or `React.useId()` with a string replace to match React 19 functionality
+ * @see https://github.com/facebook/react/pull/33422
  *
- * React 18 SSR and Concurrent modes are supported when the `platform-dst-react-18-use-id` flag is enabled.
- * This is an interop function that supports React 16 and 18.
- *
- * If migrating from `useUID` in the `react-uid` package, then `useId` is a direct replacement.
- *
- * @return string
- * @see {@link useIdSeed}
- * @see https://github.com/thearnica/react-uid#hooks-168
- * @private We intend to deprecate and replace with `useId()` directly
- * @example
- * const id = useUID();
- * id == "r1"; // for example
- *
- * Parts of the above are from: https://github.com/thearnica/react-uid/blob/0f507fbbdb1ab84acf477ec32698afe3d2191e49/src/hooks.ts#L41C1-L49C4
+ * Generally, you should just use `React.useId()` directly as we're on React 18.
+ * You can use this function if you need to use the generated id in a HTML selector
+ * as `React.useId()` currently does not generate HTML selector safe ids.
+ * However, using these identifiers in selectors should be avoided, even in tests,
+ * so `React.useId()` is heavily encouraged.
  */
 export function useId() {
   if (react18UseId && fg('platform-dst-react-18-use-id')) {
+    if (fg('platform-dst-react-18-use-id-selector-safe')) {
+      // tl;dr: React uses `:` or `«»` in selectors which breaks `document.querySelector(…)`
+      // in hundreds of tests. So we replace it with a safe string of `_` to match future
+      // React 19 functionality: https://github.com/facebook/react/pull/33422
+      return react18UseId().replace(/[:«»]/g, '_');
+    }
     return react18UseId();
@@ -40,53 +44,7 @@ }
  *
- * This component is only intended for class components,
- * functional components should use the useId hook directly.
+ * This component is only intended for class components, function components
+ * should probably use `React.useId()` directly.
  *
- * @component
- * @param {IdProviderProps} props
- * @private We intend to deprecate and replace with `useId()` directly
- * @example
- * Child as function
- * ```jsx
- * class Example extends React.Component {
- *   render() {
- *     return (
- *       <IdProvider>
- *         {({ id }) => (<div id={id}>Hello</div>)}
- *       </IdProvider>
- *     );
- *   }
- * }
- * ```
- *
- * @example
- * Ref object
- * ```jsx
- * class Example extends React.Component {
- *   readonly useIdRef = React.createRef<string>();
- *   render() {
- *     return (
- *       <IdProvider ref={this.useIdRef}>
- *         <div id={this.useIdRef.current}>Hello</div>
- *       </IdProvider>
- *     );
- *   }
- * }
- *
- * @example
- * Ref as callback
- * ```jsx
- * class Example extends React.Component {
- *   id = '';
- *   setId = (id: string) => {
- *     this.id = id;
- *   };
- *   render() {
- *     return (
- *       <IdProvider ref={this.setId}>
- *         <div id={this.id}>Hello</div>
- *       </IdProvider>
- *     );
- *   }
- * }
- * ```
+ * @private
+ * @deprecated This import shouldn't be used, suggested to use `React.useId()` directly. It is kept for class component compatibility.
  */
@@ -122,32 +80,9 @@ export const IdProvider = /*#__PURE__*/forwardRef(({
  *
- * React 18 SSR and Concurrent modes are supported when the `platform-dst-react-18-use-id` flag is enabled.
- * This is an interop function that supports React 16 and 18.
- *
- * If migrating from `useUIDSeed` in the `react-uid` package, then `useIdSeed` is a direct replacement.
- *
- * "If you need to give IDs to multiple related elements, you can call useId to generate a shared prefix for them" - From React
- * This function will help to implement the above.
- * @return (id: any) => string
- * @see https://react.dev/reference/react/useId#generating-ids-for-several-related-elements
- * @see https://github.com/thearnica/react-uid#hooks-168
- * @private We intend to deprecate and replace with `useId()` directly
- * @example
- * import { useIdSeed } from '@atlaskit/ds-lib/use-id';
- *
- * export default function Form() {
- * 	 const idSeed = useIdSeed();
- *   return (
- *     <form>
- *       <label htmlFor={idSeed('firstName')}>First Name:</label>
- *       <input id={idSeed('firstName')} type="text" />
- *       <hr />
- *       <label htmlFor={idSeed('lastName')}>Last Name:</label>
- *       <input id={idSeed('lastName')} type="text" />
- *     </form>
- *   );
- * }
+ * @private
+ * @deprecated This import shouldn't be used, suggested to use `React.useId()` directly.
  */
 export function useIdSeed() {
   if (react18UseId && fg('platform-dst-react-18-use-id')) {
-    const uid = react18UseId();
+    // eslint-disable-next-line react-hooks/rules-of-hooks -- cleanup with feature gating
+    const uid = useId();
     return id => `${uid}-${id.toString()}`;
@@ -154,0 +89,0 @@ }

dist/esm/utils/use-id.js

@@ -5,2 +5,7 @@ import _typeof from "@babel/runtime/helpers/typeof";
 import { useUID as react16UseId, useUIDSeed as react16UseIdSeed } from 'react-uid';
+
+/**
+ * I suggest using this as a reference for the feature gate tidy:
+ * @see https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/211376
+ */
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -15,21 +20,20 @@
 /**
- * Returns a unique id
+ * Based on a feature gate, returns a unique id using `react-uid` or `React.useId()`
+ * or `React.useId()` with a string replace to match React 19 functionality
+ * @see https://github.com/facebook/react/pull/33422
  *
- * React 18 SSR and Concurrent modes are supported when the `platform-dst-react-18-use-id` flag is enabled.
- * This is an interop function that supports React 16 and 18.
- *
- * If migrating from `useUID` in the `react-uid` package, then `useId` is a direct replacement.
- *
- * @return string
- * @see {@link useIdSeed}
- * @see https://github.com/thearnica/react-uid#hooks-168
- * @private We intend to deprecate and replace with `useId()` directly
- * @example
- * const id = useUID();
- * id == "r1"; // for example
- *
- * Parts of the above are from: https://github.com/thearnica/react-uid/blob/0f507fbbdb1ab84acf477ec32698afe3d2191e49/src/hooks.ts#L41C1-L49C4
+ * Generally, you should just use `React.useId()` directly as we're on React 18.
+ * You can use this function if you need to use the generated id in a HTML selector
+ * as `React.useId()` currently does not generate HTML selector safe ids.
+ * However, using these identifiers in selectors should be avoided, even in tests,
+ * so `React.useId()` is heavily encouraged.
  */
 export function useId() {
   if (react18UseId && fg('platform-dst-react-18-use-id')) {
+    if (fg('platform-dst-react-18-use-id-selector-safe')) {
+      // tl;dr: React uses `:` or `«»` in selectors which breaks `document.querySelector(…)`
+      // in hundreds of tests. So we replace it with a safe string of `_` to match future
+      // React 19 functionality: https://github.com/facebook/react/pull/33422
+      return react18UseId().replace(/[:«»]/g, '_');
+    }
     return react18UseId();
@@ -42,53 +46,7 @@ }
  *
- * This component is only intended for class components,
- * functional components should use the useId hook directly.
+ * This component is only intended for class components, function components
+ * should probably use `React.useId()` directly.
  *
- * @component
- * @param {IdProviderProps} props
- * @private We intend to deprecate and replace with `useId()` directly
- * @example
- * Child as function
- * ```jsx
- * class Example extends React.Component {
- *   render() {
- *     return (
- *       <IdProvider>
- *         {({ id }) => (<div id={id}>Hello</div>)}
- *       </IdProvider>
- *     );
- *   }
- * }
- * ```
- *
- * @example
- * Ref object
- * ```jsx
- * class Example extends React.Component {
- *   readonly useIdRef = React.createRef<string>();
- *   render() {
- *     return (
- *       <IdProvider ref={this.useIdRef}>
- *         <div id={this.useIdRef.current}>Hello</div>
- *       </IdProvider>
- *     );
- *   }
- * }
- *
- * @example
- * Ref as callback
- * ```jsx
- * class Example extends React.Component {
- *   id = '';
- *   setId = (id: string) => {
- *     this.id = id;
- *   };
- *   render() {
- *     return (
- *       <IdProvider ref={this.setId}>
- *         <div id={this.id}>Hello</div>
- *       </IdProvider>
- *     );
- *   }
- * }
- * ```
+ * @private
+ * @deprecated This import shouldn't be used, suggested to use `React.useId()` directly. It is kept for class component compatibility.
  */
@@ -125,32 +83,9 @@ export var IdProvider = /*#__PURE__*/forwardRef(function (_ref, ref) {
  *
- * React 18 SSR and Concurrent modes are supported when the `platform-dst-react-18-use-id` flag is enabled.
- * This is an interop function that supports React 16 and 18.
- *
- * If migrating from `useUIDSeed` in the `react-uid` package, then `useIdSeed` is a direct replacement.
- *
- * "If you need to give IDs to multiple related elements, you can call useId to generate a shared prefix for them" - From React
- * This function will help to implement the above.
- * @return (id: any) => string
- * @see https://react.dev/reference/react/useId#generating-ids-for-several-related-elements
- * @see https://github.com/thearnica/react-uid#hooks-168
- * @private We intend to deprecate and replace with `useId()` directly
- * @example
- * import { useIdSeed } from '@atlaskit/ds-lib/use-id';
- *
- * export default function Form() {
- * 	 const idSeed = useIdSeed();
- *   return (
- *     <form>
- *       <label htmlFor={idSeed('firstName')}>First Name:</label>
- *       <input id={idSeed('firstName')} type="text" />
- *       <hr />
- *       <label htmlFor={idSeed('lastName')}>Last Name:</label>
- *       <input id={idSeed('lastName')} type="text" />
- *     </form>
- *   );
- * }
+ * @private
+ * @deprecated This import shouldn't be used, suggested to use `React.useId()` directly.
  */
 export function useIdSeed() {
   if (react18UseId && fg('platform-dst-react-18-use-id')) {
-    var uid = react18UseId();
+    // eslint-disable-next-line react-hooks/rules-of-hooks -- cleanup with feature gating
+    var uid = useId();
     return function (id) {
@@ -157,0 +92,0 @@ return "".concat(uid, "-").concat(id.toString());

dist/types-ts4.5/hooks/use-lazy-ref.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="react" />
 /**
@@ -3,0 +2,0 @@ * Executes the initializer function once and saves its result into a ref.

dist/types-ts4.5/hooks/use-scrollbar-width.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="react" />
 /**
@@ -3,0 +2,0 @@ * Get the scrollbar width of the container that the ref is assigned.

dist/types-ts4.5/hooks/use-stable-ref.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="react" />
 /**
@@ -3,0 +2,0 @@ * Returns the latest value in a ref object.

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

 import React, { type ReactNode } from 'react';
 type SeedGenerator = (id: any) => string;
 /**
- * Returns a unique id
+ * Based on a feature gate, returns a unique id using `react-uid` or `React.useId()`
+ * or `React.useId()` with a string replace to match React 19 functionality
+ * @see https://github.com/facebook/react/pull/33422
  *
- * React 18 SSR and Concurrent modes are supported when the `platform-dst-react-18-use-id` flag is enabled.
- * This is an interop function that supports React 16 and 18.
- *
- * If migrating from `useUID` in the `react-uid` package, then `useId` is a direct replacement.
- *
- * @return string
- * @see {@link useIdSeed}
- * @see https://github.com/thearnica/react-uid#hooks-168
- * @private We intend to deprecate and replace with `useId()` directly
- * @example
- * const id = useUID();
- * id == "r1"; // for example
- *
- * Parts of the above are from: https://github.com/thearnica/react-uid/blob/0f507fbbdb1ab84acf477ec32698afe3d2191e49/src/hooks.ts#L41C1-L49C4
+ * Generally, you should just use `React.useId()` directly as we're on React 18.
+ * You can use this function if you need to use the generated id in a HTML selector
+ * as `React.useId()` currently does not generate HTML selector safe ids.
+ * However, using these identifiers in selectors should be avoided, even in tests,
+ * so `React.useId()` is heavily encouraged.
  */
@@ -42,53 +35,7 @@ export declare function useId(): string;
  *
- * This component is only intended for class components,
- * functional components should use the useId hook directly.
+ * This component is only intended for class components, function components
+ * should probably use `React.useId()` directly.
  *
- * @component
- * @param {IdProviderProps} props
- * @private We intend to deprecate and replace with `useId()` directly
- * @example
- * Child as function
- * ```jsx
- * class Example extends React.Component {
- *   render() {
- *     return (
- *       <IdProvider>
- *         {({ id }) => (<div id={id}>Hello</div>)}
- *       </IdProvider>
- *     );
- *   }
- * }
- * ```
- *
- * @example
- * Ref object
- * ```jsx
- * class Example extends React.Component {
- *   readonly useIdRef = React.createRef<string>();
- *   render() {
- *     return (
- *       <IdProvider ref={this.useIdRef}>
- *         <div id={this.useIdRef.current}>Hello</div>
- *       </IdProvider>
- *     );
- *   }
- * }
- *
- * @example
- * Ref as callback
- * ```jsx
- * class Example extends React.Component {
- *   id = '';
- *   setId = (id: string) => {
- *     this.id = id;
- *   };
- *   render() {
- *     return (
- *       <IdProvider ref={this.setId}>
- *         <div id={this.id}>Hello</div>
- *       </IdProvider>
- *     );
- *   }
- * }
- * ```
+ * @private
+ * @deprecated This import shouldn't be used, suggested to use `React.useId()` directly. It is kept for class component compatibility.
  */
@@ -99,30 +46,6 @@ export declare const IdProvider: React.ForwardRefExoticComponent<IdProviderProps & React.RefAttributes<string>>;
  *
- * React 18 SSR and Concurrent modes are supported when the `platform-dst-react-18-use-id` flag is enabled.
- * This is an interop function that supports React 16 and 18.
- *
- * If migrating from `useUIDSeed` in the `react-uid` package, then `useIdSeed` is a direct replacement.
- *
- * "If you need to give IDs to multiple related elements, you can call useId to generate a shared prefix for them" - From React
- * This function will help to implement the above.
- * @return (id: any) => string
- * @see https://react.dev/reference/react/useId#generating-ids-for-several-related-elements
- * @see https://github.com/thearnica/react-uid#hooks-168
- * @private We intend to deprecate and replace with `useId()` directly
- * @example
- * import { useIdSeed } from '@atlaskit/ds-lib/use-id';
- *
- * export default function Form() {
- * 	 const idSeed = useIdSeed();
- *   return (
- *     <form>
- *       <label htmlFor={idSeed('firstName')}>First Name:</label>
- *       <input id={idSeed('firstName')} type="text" />
- *       <hr />
- *       <label htmlFor={idSeed('lastName')}>Last Name:</label>
- *       <input id={idSeed('lastName')} type="text" />
- *     </form>
- *   );
- * }
+ * @private
+ * @deprecated This import shouldn't be used, suggested to use `React.useId()` directly.
  */
 export declare function useIdSeed(): SeedGenerator;
 export {};

dist/types/hooks/use-lazy-ref.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="react" />
 /**
@@ -3,0 +2,0 @@ * Executes the initializer function once and saves its result into a ref.

dist/types/hooks/use-scrollbar-width.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="react" />
 /**
@@ -3,0 +2,0 @@ * Get the scrollbar width of the container that the ref is assigned.

dist/types/hooks/use-stable-ref.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="react" />
 /**
@@ -3,0 +2,0 @@ * Returns the latest value in a ref object.

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

 import React, { type ReactNode } from 'react';
 type SeedGenerator = (id: any) => string;
 /**
- * Returns a unique id
+ * Based on a feature gate, returns a unique id using `react-uid` or `React.useId()`
+ * or `React.useId()` with a string replace to match React 19 functionality
+ * @see https://github.com/facebook/react/pull/33422
  *
- * React 18 SSR and Concurrent modes are supported when the `platform-dst-react-18-use-id` flag is enabled.
- * This is an interop function that supports React 16 and 18.
- *
- * If migrating from `useUID` in the `react-uid` package, then `useId` is a direct replacement.
- *
- * @return string
- * @see {@link useIdSeed}
- * @see https://github.com/thearnica/react-uid#hooks-168
- * @private We intend to deprecate and replace with `useId()` directly
- * @example
- * const id = useUID();
- * id == "r1"; // for example
- *
- * Parts of the above are from: https://github.com/thearnica/react-uid/blob/0f507fbbdb1ab84acf477ec32698afe3d2191e49/src/hooks.ts#L41C1-L49C4
+ * Generally, you should just use `React.useId()` directly as we're on React 18.
+ * You can use this function if you need to use the generated id in a HTML selector
+ * as `React.useId()` currently does not generate HTML selector safe ids.
+ * However, using these identifiers in selectors should be avoided, even in tests,
+ * so `React.useId()` is heavily encouraged.
  */
@@ -42,53 +35,7 @@ export declare function useId(): string;
  *
- * This component is only intended for class components,
- * functional components should use the useId hook directly.
+ * This component is only intended for class components, function components
+ * should probably use `React.useId()` directly.
  *
- * @component
- * @param {IdProviderProps} props
- * @private We intend to deprecate and replace with `useId()` directly
- * @example
- * Child as function
- * ```jsx
- * class Example extends React.Component {
- *   render() {
- *     return (
- *       <IdProvider>
- *         {({ id }) => (<div id={id}>Hello</div>)}
- *       </IdProvider>
- *     );
- *   }
- * }
- * ```
- *
- * @example
- * Ref object
- * ```jsx
- * class Example extends React.Component {
- *   readonly useIdRef = React.createRef<string>();
- *   render() {
- *     return (
- *       <IdProvider ref={this.useIdRef}>
- *         <div id={this.useIdRef.current}>Hello</div>
- *       </IdProvider>
- *     );
- *   }
- * }
- *
- * @example
- * Ref as callback
- * ```jsx
- * class Example extends React.Component {
- *   id = '';
- *   setId = (id: string) => {
- *     this.id = id;
- *   };
- *   render() {
- *     return (
- *       <IdProvider ref={this.setId}>
- *         <div id={this.id}>Hello</div>
- *       </IdProvider>
- *     );
- *   }
- * }
- * ```
+ * @private
+ * @deprecated This import shouldn't be used, suggested to use `React.useId()` directly. It is kept for class component compatibility.
  */
@@ -99,30 +46,6 @@ export declare const IdProvider: React.ForwardRefExoticComponent<IdProviderProps & React.RefAttributes<string>>;
  *
- * React 18 SSR and Concurrent modes are supported when the `platform-dst-react-18-use-id` flag is enabled.
- * This is an interop function that supports React 16 and 18.
- *
- * If migrating from `useUIDSeed` in the `react-uid` package, then `useIdSeed` is a direct replacement.
- *
- * "If you need to give IDs to multiple related elements, you can call useId to generate a shared prefix for them" - From React
- * This function will help to implement the above.
- * @return (id: any) => string
- * @see https://react.dev/reference/react/useId#generating-ids-for-several-related-elements
- * @see https://github.com/thearnica/react-uid#hooks-168
- * @private We intend to deprecate and replace with `useId()` directly
- * @example
- * import { useIdSeed } from '@atlaskit/ds-lib/use-id';
- *
- * export default function Form() {
- * 	 const idSeed = useIdSeed();
- *   return (
- *     <form>
- *       <label htmlFor={idSeed('firstName')}>First Name:</label>
- *       <input id={idSeed('firstName')} type="text" />
- *       <hr />
- *       <label htmlFor={idSeed('lastName')}>Last Name:</label>
- *       <input id={idSeed('lastName')} type="text" />
- *     </form>
- *   );
- * }
+ * @private
+ * @deprecated This import shouldn't be used, suggested to use `React.useId()` directly.
  */
 export declare function useIdSeed(): SeedGenerator;
 export {};

keycodes/package.json

@@ -11,3 +11,3 @@ {
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
@@ -14,0 +14,0 @@ "../dist/types-ts4.5/utils/keycodes.d.ts"

merge-refs/package.json

@@ -11,3 +11,3 @@ {
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
@@ -14,0 +14,0 @@ "../dist/types-ts4.5/utils/merge-refs.d.ts"

noop/package.json

@@ -11,3 +11,3 @@ {
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
@@ -14,0 +14,0 @@ "../dist/types-ts4.5/utils/noop.d.ts"

once/package.json

@@ -11,3 +11,3 @@ {
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
@@ -14,0 +14,0 @@ "../dist/types-ts4.5/utils/once.d.ts"

package.json

 {
 	"name": "@atlaskit/ds-lib",
-	"version": "5.0.0",
+	"version": "5.0.1",
 	"description": "Reusable utilities and hooks specific to design system.",
@@ -35,24 +35,2 @@ "publishConfig": {
 	},
-	"af:exports": {
-		"./keycodes": "./src/utils/keycodes.tsx",
-		"./noop": "./src/utils/noop.tsx",
-		"./deprecation-warning": "./src/utils/deprecation-warning.tsx",
-		"./device-check": "./src/utils/device-check.tsx",
-		"./once": "./src/utils/once.tsx",
-		"./warn-once": "./src/utils/warn-once.tsx",
-		"./merge-refs": "./src/utils/merge-refs.tsx",
-		"./with-resolvers": "./src/utils/with-resolvers.tsx",
-		"./use-id": "./src/utils/use-id.tsx",
-		"./use-controlled": "./src/hooks/use-controlled.tsx",
-		"./use-lazy-ref": "./src/hooks/use-lazy-ref.tsx",
-		"./use-lazy-callback": "./src/hooks/use-lazy-callback.tsx",
-		"./use-layout-effect": "./src/hooks/use-layout-effect.tsx",
-		"./use-state-ref": "./src/hooks/use-state-ref.tsx",
-		"./use-focus-event": "./src/hooks/use-focus-event.tsx",
-		"./use-scrollbar-width": "./src/hooks/use-scrollbar-width.tsx",
-		"./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",
-		"./use-auto-focus": "./src/hooks/use-auto-focus.tsx"
-	},
 	"dependencies": {
@@ -69,7 +47,7 @@ "@atlaskit/platform-feature-flags": "^1.1.0",
 	"devDependencies": {
+		"@atlassian/feature-flags-test-utils": "^0.3.0",
 		"@testing-library/dom": "^10.1.0",
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/react-hooks": "^8.0.1",
-		"jest-in-case": "^1.0.2",
-		"typescript": "~5.4.2"
+		"jest-in-case": "^1.0.2"
 	},
@@ -113,2 +91,5 @@ "techstack": {
 		},
+		"platform-dst-react-18-use-id-selector-safe": {
+			"type": "boolean"
+		},
 		"platform_only_attach_escape_handler_on_view": {
@@ -115,0 +96,0 @@ "type": "boolean"

use-auto-focus/package.json

@@ -11,3 +11,3 @@ {
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
@@ -14,0 +14,0 @@ "../dist/types-ts4.5/hooks/use-auto-focus.d.ts"

use-close-on-escape-press/package.json

@@ -11,3 +11,3 @@ {
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
@@ -14,0 +14,0 @@ "../dist/types-ts4.5/hooks/use-close-on-escape-press.d.ts"

use-controlled/package.json

@@ -11,3 +11,3 @@ {
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
@@ -14,0 +14,0 @@ "../dist/types-ts4.5/hooks/use-controlled.d.ts"

use-focus-event/package.json

@@ -11,3 +11,3 @@ {
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
@@ -14,0 +14,0 @@ "../dist/types-ts4.5/hooks/use-focus-event.d.ts"

use-id/package.json

@@ -11,3 +11,3 @@ {
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
@@ -14,0 +14,0 @@ "../dist/types-ts4.5/utils/use-id.d.ts"

use-layout-effect/package.json

@@ -11,3 +11,3 @@ {
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
@@ -14,0 +14,0 @@ "../dist/types-ts4.5/hooks/use-layout-effect.d.ts"

use-lazy-callback/package.json

@@ -11,3 +11,3 @@ {
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
@@ -14,0 +14,0 @@ "../dist/types-ts4.5/hooks/use-lazy-callback.d.ts"

use-lazy-ref/package.json

@@ -11,3 +11,3 @@ {
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
@@ -14,0 +14,0 @@ "../dist/types-ts4.5/hooks/use-lazy-ref.d.ts"

use-previous-value/package.json

@@ -11,3 +11,3 @@ {
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
@@ -14,0 +14,0 @@ "../dist/types-ts4.5/hooks/use-previous-value.d.ts"

use-scrollbar-width/package.json

@@ -11,3 +11,3 @@ {
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
@@ -14,0 +14,0 @@ "../dist/types-ts4.5/hooks/use-scrollbar-width.d.ts"

use-stable-ref/package.json

@@ -11,3 +11,3 @@ {
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
@@ -14,0 +14,0 @@ "../dist/types-ts4.5/hooks/use-stable-ref.d.ts"

use-state-ref/package.json

@@ -11,3 +11,3 @@ {
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
@@ -14,0 +14,0 @@ "../dist/types-ts4.5/hooks/use-state-ref.d.ts"

warn-once/package.json

@@ -11,3 +11,3 @@ {
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
@@ -14,0 +14,0 @@ "../dist/types-ts4.5/utils/warn-once.d.ts"

with-resolvers/package.json

@@ -11,3 +11,3 @@ {
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
@@ -14,0 +14,0 @@ "../dist/types-ts4.5/utils/with-resolvers.d.ts"

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

114726

-7.18%

Lines of code

2417

-12.9%

Number of low supply chain risk alerts

12

20%

No dependency changes