@atlaskit/form 10.5.7 → 10.5.8

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/form
 
+## 10.5.8
+
+### Patch Changes
+
+- [#153024](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/153024)
+  [`f2ca7201459b1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f2ca7201459b1) -
+  Change `react-uid` to use ID generator that is compatible with React16 and React 18; Strict React
+  18 behind a flag.
+
 ## 10.5.7
 
 ### Patch Changes

package/dist/cjs/field.js

@@ -10,8 +10,8 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _reactUid = require("react-uid");
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
+var _useId = require("@atlaskit/ds-lib/use-id");
 var _fieldIdContext = require("./field-id-context");
 var _form = require("./form");
 var _label = require("./label");
@@ -82,7 +82,7 @@ function Field(props) {
          * effectively made it an optional prop to external consumers of Field. However the
          * prop types defined defaultValue as required, so inside the component it was not
          * valid for defaultValue to be undefined. We need to suppress the error
-         * after changing defaultValue to explictly be an optional prop.
+         * after changing defaultValue to explicitly be an optional prop.
          * If default value has changed we are using new default value.
          * Otherwise we need to check if we already have value for this field
          * (because we are using changing key prop to re-run field level validation, and that
@@ -220,13 +220,10 @@ function Field(props) {
     });
     return unregister;
   }, [latestPropsRef, latestStateRef, registerField, props.name, isDefaultValueChanged]);
-  var fieldId = (0, _react.useMemo)(
-  // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
-  function () {
-    return props.id ? props.id : "".concat(props.name, "-").concat((0, _reactUid.uid)({
-      id: props.name
-    }));
-  }, [props.id, props.name]);
+  var uid = (0, _useId.useId)();
+  var fieldId = (0, _react.useMemo)(function () {
+    return props.id ? props.id : "".concat(props.name, "-").concat(uid);
+  }, [props.id, props.name, uid]);
   var getDescribedBy = function getDescribedBy() {
     var value = '';
     if (state.error) {

package/dist/es2019/field.js

@@ -6,8 +6,8 @@ import { useContext, useEffect, useMemo, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { uid } from 'react-uid';
 import invariant from 'tiny-invariant';
+import { useId } from '@atlaskit/ds-lib/use-id';
 import { FieldId } from './field-id-context';
 import { FormContext, IsDisabledContext } from './form';
 import { Label } from './label';
@@ -74,7 +74,7 @@ export default function Field(props) {
        * effectively made it an optional prop to external consumers of Field. However the
        * prop types defined defaultValue as required, so inside the component it was not
        * valid for defaultValue to be undefined. We need to suppress the error
-       * after changing defaultValue to explictly be an optional prop.
+       * after changing defaultValue to explicitly be an optional prop.
        * If default value has changed we are using new default value.
        * Otherwise we need to check if we already have value for this field
        * (because we are using changing key prop to re-run field level validation, and that
@@ -208,11 +208,10 @@ export default function Field(props) {
     });
     return unregister;
   }, [latestPropsRef, latestStateRef, registerField, props.name, isDefaultValueChanged]);
-  const fieldId = useMemo(
-  // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
-  () => props.id ? props.id : `${props.name}-${uid({
-    id: props.name
-  })}`, [props.id, props.name]);
+  const uid = useId();
+  const fieldId = useMemo(() => {
+    return props.id ? props.id : `${props.name}-${uid}`;
+  }, [props.id, props.name, uid]);
   const getDescribedBy = () => {
     let value = '';
     if (state.error) {

package/dist/esm/field.js

@@ -11,8 +11,8 @@ import { useContext, useEffect, useMemo, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { uid } from 'react-uid';
 import invariant from 'tiny-invariant';
+import { useId } from '@atlaskit/ds-lib/use-id';
 import { FieldId } from './field-id-context';
 import { FormContext, IsDisabledContext } from './form';
 import { Label } from './label';
@@ -78,7 +78,7 @@ export default function Field(props) {
          * effectively made it an optional prop to external consumers of Field. However the
          * prop types defined defaultValue as required, so inside the component it was not
          * valid for defaultValue to be undefined. We need to suppress the error
-         * after changing defaultValue to explictly be an optional prop.
+         * after changing defaultValue to explicitly be an optional prop.
          * If default value has changed we are using new default value.
          * Otherwise we need to check if we already have value for this field
          * (because we are using changing key prop to re-run field level validation, and that
@@ -216,13 +216,10 @@ export default function Field(props) {
     });
     return unregister;
   }, [latestPropsRef, latestStateRef, registerField, props.name, isDefaultValueChanged]);
-  var fieldId = useMemo(
-  // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
-  function () {
-    return props.id ? props.id : "".concat(props.name, "-").concat(uid({
-      id: props.name
-    }));
-  }, [props.id, props.name]);
+  var uid = useId();
+  var fieldId = useMemo(function () {
+    return props.id ? props.id : "".concat(props.name, "-").concat(uid);
+  }, [props.id, props.name, uid]);
   var getDescribedBy = function getDescribedBy() {
     var value = '';
     if (state.error) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/form",
-	"version": "10.5.7",
+	"version": "10.5.8",
 	"description": "A form allows users to input information.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -24,6 +24,7 @@
 		"runReact18": true
 	},
 	"dependencies": {
+		"@atlaskit/ds-lib": "^3.0.0",
 		"@atlaskit/heading": "^2.4.0",
 		"@atlaskit/icon": "^22.22.0",
 		"@atlaskit/primitives": "^12.2.0",
@@ -34,7 +35,6 @@
 		"final-form": "^4.20.3",
 		"final-form-focus": "^1.1.2",
 		"lodash": "^4.17.21",
-		"react-uid": "^2.2.0",
 		"tiny-invariant": "^1.2.0"
 	},
 	"peerDependencies": {
@@ -47,7 +47,6 @@
 		"@atlaskit/banner": "^12.5.0",
 		"@atlaskit/button": "^20.2.0",
 		"@atlaskit/checkbox": "^14.0.0",
-		"@atlaskit/ds-lib": "^3.1.0",
 		"@atlaskit/modal-dialog": "^12.17.0",
 		"@atlaskit/radio": "^6.5.0",
 		"@atlaskit/range": "^7.4.0",