@atlaskit/form 12.4.0 → 12.5.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/form
 
+## 12.5.0
+
+### Minor Changes
+
+- [`c22bdb7c0b0f8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c22bdb7c0b0f8) -
+  [ux] Added support for focusing error fields containing react-select when submitting with errors
+
+## 12.4.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.4.0
 
 ### Minor Changes

package/dist/cjs/form.js

@@ -14,6 +14,7 @@ var _finalForm = require("final-form");
 var _finalFormFocus = _interopRequireDefault(require("final-form-focus"));
 var _set = _interopRequireDefault(require("lodash/set"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _utils = require("./utils");
 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" != _typeof(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); }
 /**
  * __Form context__
@@ -69,7 +70,7 @@ function Form(props) {
       });
       (0, _finalFormFocus.default)(function () {
         return formRef.current ? Array.from(formRef.current.querySelectorAll('input')) : [];
-      })(finalForm);
+      }, (0, _platformFeatureFlags.fg)('platform-form-field-error-focus') ? _utils.getFirstErrorField : undefined)(finalForm);
       return finalForm;
     }),
     _useState2 = (0, _slicedToArray2.default)(_useState, 1),

package/dist/cjs/utils.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getFirstErrorField = void 0;
+var _finalForm = require("final-form");
+var getFirstErrorField = exports.getFirstErrorField = function getFirstErrorField(inputs, errors) {
+  // Guaranteed to be of type HTMLInputElement[] due to getInputs function overrided in createDecorator
+  var htmlInputs = inputs;
+  return htmlInputs.find(function (input) {
+    // If input is hidden, do not focus
+    if (input.type === 'hidden') {
+      return false;
+    }
+
+    // If input ID matches the error, focus
+    if (input.id && (0, _finalForm.getIn)(errors, input.id)) {
+      return true;
+    }
+
+    // Default to base behavior
+    return input.name && (0, _finalForm.getIn)(errors, input.name);
+  });
+};

package/dist/es2019/form.js

@@ -4,6 +4,7 @@ import { createForm } from 'final-form';
 import createDecorator from 'final-form-focus';
 import set from 'lodash/set';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { getFirstErrorField } from './utils';
 /**
  * __Form context__
  *
@@ -51,7 +52,7 @@ export default function Form(props) {
         }
       }
     });
-    createDecorator(() => formRef.current ? Array.from(formRef.current.querySelectorAll('input')) : [])(finalForm);
+    createDecorator(() => formRef.current ? Array.from(formRef.current.querySelectorAll('input')) : [], fg('platform-form-field-error-focus') ? getFirstErrorField : undefined)(finalForm);
     return finalForm;
   });
   const [state, setState] = useState({

package/dist/es2019/utils.js

@@ -0,0 +1,19 @@
+import { getIn } from 'final-form';
+export const getFirstErrorField = (inputs, errors) => {
+  // Guaranteed to be of type HTMLInputElement[] due to getInputs function overrided in createDecorator
+  let htmlInputs = inputs;
+  return htmlInputs.find(function (input) {
+    // If input is hidden, do not focus
+    if (input.type === 'hidden') {
+      return false;
+    }
+
+    // If input ID matches the error, focus
+    if (input.id && getIn(errors, input.id)) {
+      return true;
+    }
+
+    // Default to base behavior
+    return input.name && getIn(errors, input.name);
+  });
+};

package/dist/esm/form.js

@@ -5,6 +5,7 @@ import { createForm } from 'final-form';
 import createDecorator from 'final-form-focus';
 import set from 'lodash/set';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { getFirstErrorField } from './utils';
 /**
  * __Form context__
  *
@@ -59,7 +60,7 @@ export default function Form(props) {
       });
       createDecorator(function () {
         return formRef.current ? Array.from(formRef.current.querySelectorAll('input')) : [];
-      })(finalForm);
+      }, fg('platform-form-field-error-focus') ? getFirstErrorField : undefined)(finalForm);
       return finalForm;
     }),
     _useState2 = _slicedToArray(_useState, 1),

package/dist/esm/utils.js

@@ -0,0 +1,19 @@
+import { getIn } from 'final-form';
+export var getFirstErrorField = function getFirstErrorField(inputs, errors) {
+  // Guaranteed to be of type HTMLInputElement[] due to getInputs function overrided in createDecorator
+  var htmlInputs = inputs;
+  return htmlInputs.find(function (input) {
+    // If input is hidden, do not focus
+    if (input.type === 'hidden') {
+      return false;
+    }
+
+    // If input ID matches the error, focus
+    if (input.id && getIn(errors, input.id)) {
+      return true;
+    }
+
+    // Default to base behavior
+    return input.name && getIn(errors, input.name);
+  });
+};

package/dist/types/utils.d.ts

@@ -0,0 +1,2 @@
+import type { FocusableInput } from 'final-form-focus';
+export declare const getFirstErrorField: (inputs: FocusableInput[], errors: Object) => HTMLInputElement | undefined;

package/dist/types-ts4.5/utils.d.ts

@@ -0,0 +1,2 @@
+import type { FocusableInput } from 'final-form-focus';
+export declare const getFirstErrorField: (inputs: FocusableInput[], errors: Object) => HTMLInputElement | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/form",
-	"version": "12.4.0",
+	"version": "12.5.0",
 	"description": "A form allows users to input information.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -25,14 +25,14 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/css": "^0.12.0",
+		"@atlaskit/css": "^0.13.0",
 		"@atlaskit/ds-lib": "^5.0.0",
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/icon": "^28.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^14.12.0",
+		"@atlaskit/primitives": "^14.13.0",
 		"@atlaskit/theme": "^20.0.0",
-		"@atlaskit/tokens": "^6.1.0",
+		"@atlaskit/tokens": "^6.2.0",
 		"@babel/runtime": "^7.0.0",
 		"final-form": "^4.20.3",
 		"final-form-focus": "^1.1.2",
@@ -56,7 +56,7 @@
 		"@atlaskit/modal-dialog": "^14.3.0",
 		"@atlaskit/radio": "^8.3.0",
 		"@atlaskit/range": "^9.2.0",
-		"@atlaskit/section-message": "^8.6.0",
+		"@atlaskit/section-message": "^8.7.0",
 		"@atlaskit/select": "^21.2.0",
 		"@atlaskit/textarea": "^8.0.0",
 		"@atlaskit/textfield": "^8.0.0",
@@ -106,19 +106,6 @@
 			]
 		}
 	},
-	"af:exports": {
-		"./CheckboxField": "./src/entry-points/checkbox-field.tsx",
-		"./Field": "./src/entry-points/field.tsx",
-		"./Fieldset": "./src/entry-points/fieldset.tsx",
-		"./FormFooter": "./src/entry-points/form-footer.tsx",
-		"./FormHeader": "./src/entry-points/form-header.tsx",
-		"./FormSection": "./src/entry-points/form-section.tsx",
-		"./Form": "./src/entry-points/form.tsx",
-		"./Messages": "./src/entry-points/messages.tsx",
-		"./RangeField": "./src/entry-points/range-field.tsx",
-		"./Label": "./src/entry-points/label.tsx",
-		".": "./src/index.tsx"
-	},
 	"homepage": "https://atlassian.design/components/form/",
 	"platform-feature-flags": {
 		"platform_dst_form_screenreader_message_fix": {
@@ -132,6 +119,9 @@
 		},
 		"platform_design-system-team_checkbox-field-spread": {
 			"type": "boolean"
+		},
+		"platform-form-field-error-focus": {
+			"type": "boolean"
 		}
 	}
 }