@atlaskit/form 8.8.6 → 8.8.8

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/form
 
+## 8.8.8
+
+### Patch Changes
+
+- [`e0460d5d989`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e0460d5d989) - Usages of `process` are now guarded by a `typeof` check.
+
+## 8.8.7
+
+### Patch Changes
+
+- [`1c6c493447f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1c6c493447f) - [ux] Place label and message fields in correct aria attributes.
+
 ## 8.8.6
 
 ### Patch Changes

package/dist/cjs/field.js

@@ -18,7 +18,7 @@ var _constants = require("@atlaskit/theme/constants");
 var _form = require("./form");
 var _label = _interopRequireDefault(require("./label"));
 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) { (0, _defineProperty2.default)(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; }
+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) { (0, _defineProperty2.default)(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 */
 var gridSize = (0, _constants.gridSize)();
 var fontFamily = (0, _constants.fontFamily)();
 var fieldWrapperStyles = (0, _react2.css)({
@@ -122,7 +122,7 @@ function Field(props) {
     setState = _useState2[1];
   var latestStateRef = usePreviousRef(state);
   (0, _react.useEffect)(function () {
-    if (process.env.NODE_ENV !== 'production' && !process.env.CI) {
+    if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && !process.env.CI) {
       (0, _tinyInvariant.default)(latestPropsRef.current.name, '@atlaskit/form: Field components have a required name prop');
     }
     function fieldStateToMeta() {
@@ -240,13 +240,24 @@ function Field(props) {
       id: props.name
     }));
   }, [props.id, props.name]);
+  var getDescribedBy = function getDescribedBy() {
+    var value = '';
+    if (state.error) {
+      value += "".concat(fieldId, "-error ");
+    }
+    if (state.valid) {
+      value += "".concat(fieldId, "-valid ");
+    }
+    return "".concat(value).concat(fieldId, "-helper");
+  };
   var extendedFieldProps = _objectSpread(_objectSpread({}, state.fieldProps), {}, {
     name: props.name,
     isDisabled: isDisabled,
     isInvalid: Boolean(state.error),
     isRequired: Boolean(props.isRequired),
     'aria-invalid': state.error ? 'true' : 'false',
-    'aria-labelledby': "".concat(fieldId, "-label ").concat(fieldId, "-helper ").concat(fieldId, "-valid ").concat(fieldId, "-error"),
+    'aria-describedby': getDescribedBy(),
+    'aria-labelledby': "".concat(fieldId, "-label"),
     id: fieldId
   });
   return (0, _react2.jsx)("div", {

package/dist/cjs/messages.js

@@ -16,6 +16,14 @@ var _typography = require("@atlaskit/theme/typography");
 var _field = require("./field");
 /** @jsx jsx */
 
+/**
+ * API for the internal `<Message />` component. This is not public API.
+ */
+
+/**
+ * Public API of the various message components.
+ */
+
 var gridSize = (0, _constants.gridSize)();
 var fontFamily = (0, _constants.fontFamily)();
 

package/dist/cjs/version.json

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

package/dist/es2019/field.js

@@ -107,7 +107,7 @@ export default function Field(props) {
   });
   const latestStateRef = usePreviousRef(state);
   useEffect(() => {
-    if (process.env.NODE_ENV !== 'production' && !process.env.CI) {
+    if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && !process.env.CI) {
       invariant(latestPropsRef.current.name, '@atlaskit/form: Field components have a required name prop');
     }
     function fieldStateToMeta(value = {}) {
@@ -222,6 +222,16 @@ export default function Field(props) {
   () => props.id ? props.id : `${props.name}-${uid({
     id: props.name
   })}`, [props.id, props.name]);
+  const getDescribedBy = () => {
+    let value = '';
+    if (state.error) {
+      value += `${fieldId}-error `;
+    }
+    if (state.valid) {
+      value += `${fieldId}-valid `;
+    }
+    return `${value}${fieldId}-helper`;
+  };
   const extendedFieldProps = {
     ...state.fieldProps,
     name: props.name,
@@ -229,7 +239,8 @@ export default function Field(props) {
     isInvalid: Boolean(state.error),
     isRequired: Boolean(props.isRequired),
     'aria-invalid': state.error ? 'true' : 'false',
-    'aria-labelledby': `${fieldId}-label ${fieldId}-helper ${fieldId}-valid ${fieldId}-error`,
+    'aria-describedby': getDescribedBy(),
+    'aria-labelledby': `${fieldId}-label`,
     id: fieldId
   };
   return jsx("div", {

package/dist/es2019/messages.js

@@ -9,6 +9,15 @@ import { useGlobalTheme } from '@atlaskit/theme/components';
 import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
 import { h200 } from '@atlaskit/theme/typography';
 import { FieldId } from './field';
+
+/**
+ * API for the internal `<Message />` component. This is not public API.
+ */
+
+/**
+ * Public API of the various message components.
+ */
+
 const gridSize = getGridSize();
 const fontFamily = getFontFamily();
 

package/dist/es2019/version.json

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

package/dist/esm/field.js

@@ -114,7 +114,7 @@ export default function Field(props) {
     setState = _useState2[1];
   var latestStateRef = usePreviousRef(state);
   useEffect(function () {
-    if (process.env.NODE_ENV !== 'production' && !process.env.CI) {
+    if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && !process.env.CI) {
       invariant(latestPropsRef.current.name, '@atlaskit/form: Field components have a required name prop');
     }
     function fieldStateToMeta() {
@@ -232,13 +232,24 @@ export default function Field(props) {
       id: props.name
     }));
   }, [props.id, props.name]);
+  var getDescribedBy = function getDescribedBy() {
+    var value = '';
+    if (state.error) {
+      value += "".concat(fieldId, "-error ");
+    }
+    if (state.valid) {
+      value += "".concat(fieldId, "-valid ");
+    }
+    return "".concat(value).concat(fieldId, "-helper");
+  };
   var extendedFieldProps = _objectSpread(_objectSpread({}, state.fieldProps), {}, {
     name: props.name,
     isDisabled: isDisabled,
     isInvalid: Boolean(state.error),
     isRequired: Boolean(props.isRequired),
     'aria-invalid': state.error ? 'true' : 'false',
-    'aria-labelledby': "".concat(fieldId, "-label ").concat(fieldId, "-helper ").concat(fieldId, "-valid ").concat(fieldId, "-error"),
+    'aria-describedby': getDescribedBy(),
+    'aria-labelledby': "".concat(fieldId, "-label"),
     id: fieldId
   });
   return jsx("div", {

package/dist/esm/messages.js

@@ -9,6 +9,15 @@ import { useGlobalTheme } from '@atlaskit/theme/components';
 import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
 import { h200 } from '@atlaskit/theme/typography';
 import { FieldId } from './field';
+
+/**
+ * API for the internal `<Message />` component. This is not public API.
+ */
+
+/**
+ * Public API of the various message components.
+ */
+
 var gridSize = getGridSize();
 var fontFamily = getFontFamily();
 

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/form",
-  "version": "8.8.6",
+  "version": "8.8.8",
   "description": "A form allows users to input information.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -39,7 +39,7 @@
   "homepage": "https://atlassian.design/components/form/",
   "dependencies": {
     "@atlaskit/icon": "^21.11.0",
-    "@atlaskit/theme": "^12.3.0",
+    "@atlaskit/theme": "^12.4.0",
     "@atlaskit/tokens": "^1.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -53,7 +53,7 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.5.0",
+    "@atlaskit/button": "^16.6.0",
     "@atlaskit/calendar": "^13.0.0",
     "@atlaskit/checkbox": "^12.4.0",
     "@atlaskit/datetime-picker": "^12.3.0",

package/report.api.md

@@ -214,6 +214,8 @@ export const Label: FC<LabelProps>;
 
 // @public (undocumented)
 export interface LabelProps {
+  // (undocumented)
+  children: ReactNode;
   // (undocumented)
   htmlFor: string;
   // (undocumented)