@atlaskit/form 8.11.8 → 8.11.10

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/form
 
+## 8.11.10
+
+### Patch Changes
+
+- [`7c7704ad529`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7c7704ad529) - Imports from @atlaskit/form/Messages will no longer pull react-final-form and Field in the bundle.
+
+## 8.11.9
+
+### Patch Changes
+
+- [`85935c8cde4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/85935c8cde4) - [ux] Denoting live region of form messages using aria-live attribute instead of alert role.
+
 ## 8.11.8
 
 ### Patch Changes

package/dist/cjs/field-id-context.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FieldId = void 0;
+var _react = require("react");
+/**
+ * __Field id__
+ *
+ * A field id uses the context API. It provides the id of the field to message components. This links the message with the field of screenreaders.
+ */
+var FieldId = /*#__PURE__*/(0, _react.createContext)(undefined);
+exports.FieldId = FieldId;

package/dist/cjs/field.js

@@ -4,7 +4,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FieldId = void 0;
 exports.default = Field;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -13,6 +12,7 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactUid = require("react-uid");
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
+var _fieldIdContext = require("./field-id-context");
 var _form = require("./form");
 var _label = require("./label");
 var _requiredAsterisk = _interopRequireDefault(require("./required-asterisk"));
@@ -27,13 +27,6 @@ function isEvent(event) {
 function isFunction(x) {
   return typeof x === 'function';
 }
-/**
- * __Field id__
- *
- * A field id uses the context API. It provides the id of the field to message components. This links the message with the field of screenreaders.
- */
-var FieldId = /*#__PURE__*/(0, _react.createContext)(undefined);
-exports.FieldId = FieldId;
 function usePreviousRef(current) {
   var ref = (0, _react.useRef)(current);
 
@@ -258,7 +251,7 @@ function Field(props) {
     htmlFor: fieldId,
     id: "".concat(fieldId, "-label"),
     testId: props.testId && "".concat(props.testId, "--label")
-  }, props.label, props.isRequired && (0, _react2.jsx)(_requiredAsterisk.default, null), props.elementAfterLabel), (0, _react2.jsx)(FieldId.Provider, {
+  }, props.label, props.isRequired && (0, _react2.jsx)(_requiredAsterisk.default, null), props.elementAfterLabel), (0, _react2.jsx)(_fieldIdContext.FieldId.Provider, {
     value: fieldId
   }, props.children({
     fieldProps: extendedFieldProps,

package/dist/cjs/messages.js

@@ -12,7 +12,7 @@ var _colors = require("@atlaskit/theme/colors");
 var _components = require("@atlaskit/theme/components");
 var _constants = require("@atlaskit/theme/constants");
 var _typography = require("@atlaskit/theme/typography");
-var _field = require("./field");
+var _fieldIdContext = require("./field-id-context");
 /** @jsx jsx */
 
 /**
@@ -97,7 +97,7 @@ var Message = function Message(_ref2) {
     css: [mode === 'light' ? lightH200Styles : darkH200Styles, messageStyles, messageAppearanceStyles[appearance]],
     "data-testid": testId,
     id: fieldId,
-    role: "alert"
+    "aria-live": "polite"
   }, icon && (0, _react.jsx)(IconWrapper, null, icon), content);
 };
 
@@ -111,7 +111,7 @@ var Message = function Message(_ref2) {
 var HelperMessage = function HelperMessage(_ref3) {
   var children = _ref3.children,
     testId = _ref3.testId;
-  return (0, _react.jsx)(_field.FieldId.Consumer, null, function (fieldId) {
+  return (0, _react.jsx)(_fieldIdContext.FieldId.Consumer, null, function (fieldId) {
     return (0, _react.jsx)(Message, {
       fieldId: fieldId ? "".concat(fieldId, "-helper") : undefined,
       testId: testId
@@ -130,7 +130,7 @@ exports.HelperMessage = HelperMessage;
 var ErrorMessage = function ErrorMessage(_ref4) {
   var children = _ref4.children,
     testId = _ref4.testId;
-  return (0, _react.jsx)(_field.FieldId.Consumer, null, function (fieldId) {
+  return (0, _react.jsx)(_fieldIdContext.FieldId.Consumer, null, function (fieldId) {
     return (0, _react.jsx)(Message, {
       appearance: "error",
       fieldId: fieldId ? "".concat(fieldId, "-error") : undefined,
@@ -150,7 +150,7 @@ exports.ErrorMessage = ErrorMessage;
 var ValidMessage = function ValidMessage(_ref5) {
   var children = _ref5.children,
     testId = _ref5.testId;
-  return (0, _react.jsx)(_field.FieldId.Consumer, null, function (fieldId) {
+  return (0, _react.jsx)(_fieldIdContext.FieldId.Consumer, null, function (fieldId) {
     return (0, _react.jsx)(Message, {
       appearance: "valid",
       fieldId: fieldId ? "".concat(fieldId, "-valid") : undefined,

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/form",
-	"version": "8.11.8",
+	"version": "8.11.10",
 	"sideEffects": false
 }

package/dist/es2019/field-id-context.js

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+
+/**
+ * __Field id__
+ *
+ * A field id uses the context API. It provides the id of the field to message components. This links the message with the field of screenreaders.
+ */
+export const FieldId = /*#__PURE__*/createContext(undefined);

package/dist/es2019/field.js

@@ -1,8 +1,9 @@
 /** @jsx jsx */
-import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { uid } from 'react-uid';
 import invariant from 'tiny-invariant';
+import { FieldId } from './field-id-context';
 import { FormContext, IsDisabledContext } from './form';
 import { Label } from './label';
 import RequiredAsterisk from './required-asterisk';
@@ -15,12 +16,6 @@ function isEvent(event) {
 function isFunction(x) {
   return typeof x === 'function';
 }
-/**
- * __Field id__
- *
- * A field id uses the context API. It provides the id of the field to message components. This links the message with the field of screenreaders.
- */
-export const FieldId = /*#__PURE__*/createContext(undefined);
 function usePreviousRef(current) {
   const ref = useRef(current);
 

package/dist/es2019/messages.js

@@ -7,7 +7,7 @@ import { N200 } from '@atlaskit/theme/colors';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
 import { h200 } from '@atlaskit/theme/typography';
-import { FieldId } from './field';
+import { FieldId } from './field-id-context';
 
 /**
  * API for the internal `<Message />` component. This is not public API.
@@ -93,7 +93,7 @@ const Message = ({
     css: [mode === 'light' ? lightH200Styles : darkH200Styles, messageStyles, messageAppearanceStyles[appearance]],
     "data-testid": testId,
     id: fieldId,
-    role: "alert"
+    "aria-live": "polite"
   }, icon && jsx(IconWrapper, null, icon), content);
 };
 

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/form",
-	"version": "8.11.8",
+	"version": "8.11.10",
 	"sideEffects": false
 }

package/dist/esm/field-id-context.js

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+
+/**
+ * __Field id__
+ *
+ * A field id uses the context API. It provides the id of the field to message components. This links the message with the field of screenreaders.
+ */
+export var FieldId = /*#__PURE__*/createContext(undefined);

package/dist/esm/field.js

@@ -4,10 +4,11 @@ import _typeof from "@babel/runtime/helpers/typeof";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /** @jsx jsx */
-import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { uid } from 'react-uid';
 import invariant from 'tiny-invariant';
+import { FieldId } from './field-id-context';
 import { FormContext, IsDisabledContext } from './form';
 import { Label } from './label';
 import RequiredAsterisk from './required-asterisk';
@@ -20,12 +21,6 @@ function isEvent(event) {
 function isFunction(x) {
   return typeof x === 'function';
 }
-/**
- * __Field id__
- *
- * A field id uses the context API. It provides the id of the field to message components. This links the message with the field of screenreaders.
- */
-export var FieldId = /*#__PURE__*/createContext(undefined);
 function usePreviousRef(current) {
   var ref = useRef(current);
 

package/dist/esm/messages.js

@@ -7,7 +7,7 @@ import { N200 } from '@atlaskit/theme/colors';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
 import { h200 } from '@atlaskit/theme/typography';
-import { FieldId } from './field';
+import { FieldId } from './field-id-context';
 
 /**
  * API for the internal `<Message />` component. This is not public API.
@@ -91,7 +91,7 @@ var Message = function Message(_ref2) {
     css: [mode === 'light' ? lightH200Styles : darkH200Styles, messageStyles, messageAppearanceStyles[appearance]],
     "data-testid": testId,
     id: fieldId,
-    role: "alert"
+    "aria-live": "polite"
   }, icon && jsx(IconWrapper, null, icon), content);
 };
 

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/form",
-	"version": "8.11.8",
+	"version": "8.11.10",
 	"sideEffects": false
 }

package/dist/types/field-id-context.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+/**
+ * __Field id__
+ *
+ * A field id uses the context API. It provides the id of the field to message components. This links the message with the field of screenreaders.
+ */
+export declare const FieldId: import("react").Context<string | undefined>;

package/dist/types/field.d.ts

@@ -77,11 +77,5 @@ export interface FieldComponentProps<FieldValue, Element extends SupportedElemen
      */
     testId?: string;
 }
-/**
- * __Field id__
- *
- * A field id uses the context API. It provides the id of the field to message components. This links the message with the field of screenreaders.
- */
-export declare const FieldId: import("react").Context<string | undefined>;
 export default function Field<FieldValue = string, Element extends SupportedElements = HTMLInputElement>(props: FieldComponentProps<FieldValue, Element>): jsx.JSX.Element;
 export {};

package/dist/types-ts4.5/field-id-context.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+/**
+ * __Field id__
+ *
+ * A field id uses the context API. It provides the id of the field to message components. This links the message with the field of screenreaders.
+ */
+export declare const FieldId: import("react").Context<string | undefined>;

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

@@ -77,11 +77,5 @@ export interface FieldComponentProps<FieldValue, Element extends SupportedElemen
      */
     testId?: string;
 }
-/**
- * __Field id__
- *
- * A field id uses the context API. It provides the id of the field to message components. This links the message with the field of screenreaders.
- */
-export declare const FieldId: import("react").Context<string | undefined>;
 export default function Field<FieldValue = string, Element extends SupportedElements = HTMLInputElement>(props: FieldComponentProps<FieldValue, Element>): jsx.JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/form",
-  "version": "8.11.8",
+  "version": "8.11.10",
   "description": "A form allows users to input information.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,30 +12,9 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.5 <4.9": {
-      "*": [
-        "dist/types-ts4.5/*",
-        "dist/types-ts4.5/index.d.ts"
-      ]
-    }
-  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlaskit:designLink": "https://atlassian.design/guidelines/product/patterns/forms",
-  "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"
-  },
   "atlassian": {
     "team": "Design System Team",
     "releaseModel": "continuous",
@@ -44,11 +23,10 @@
       "category": "Components"
     }
   },
-  "homepage": "https://atlassian.design/components/form/",
   "dependencies": {
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.5.0",
+    "@atlaskit/tokens": "^1.13.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "final-form": "^4.20.1",
@@ -61,26 +39,22 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.7.0",
+    "@af/accessibility-testing": "*",
+    "@af/visual-regression": "*",
+    "@atlaskit/button": "^16.8.0",
     "@atlaskit/checkbox": "^12.6.0",
-    "@atlaskit/datetime-picker": "^12.7.0",
-    "@atlaskit/docs": "^9.1.0",
     "@atlaskit/ds-lib": "^2.2.0",
-    "@atlaskit/lozenge": "^11.4.0",
-    "@atlaskit/modal-dialog": "^12.6.0",
-    "@atlaskit/radio": "^5.6.0",
     "@atlaskit/range": "^7.1.0",
-    "@atlaskit/section-message": "^6.4.0",
     "@atlaskit/select": "^16.5.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/textarea": "^4.7.0",
-    "@atlaskit/textfield": "^5.5.0",
+    "@atlaskit/textfield": "^5.6.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^14.4.3",
     "@types/final-form-focus": "^1.1.1",
+    "jest-in-case": "^1.0.2",
     "react-dom": "^16.8.0",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
@@ -116,5 +90,27 @@
       "deprecation": "no-deprecated-imports"
     }
   },
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "dist/types-ts4.5/*",
+        "dist/types-ts4.5/index.d.ts"
+      ]
+    }
+  },
+  "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/",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }