@atlaskit/form 15.1.1 → 15.2.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/form
 
+## 15.2.0
+
+### Minor Changes
+
+- [`c6332d9f5e6de`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c6332d9f5e6de) -
+  Introduces standalone CharacterCounter component for more customised cases of character counting
+  on input fields. Use this component in cases where CharacterCounterField is not appropriate such
+  as non-form contexts or customised experiences
+
+## 15.1.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 15.1.1
 
 ### Patch Changes

package/dist/cjs/character-counter-field.js

@@ -12,7 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _characterCounter = require("./character-counter");
+var _characterCounter = _interopRequireDefault(require("./character-counter"));
 var _field = _interopRequireDefault(require("./field"));
 var _messages = require("./messages");
 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); }
@@ -128,7 +128,7 @@ function CharacterCounterField(_ref) {
       meta: meta
     }), /*#__PURE__*/React.createElement(_messages.MessageWrapper, null, showExternalError && /*#__PURE__*/React.createElement(_messages.ErrorMessage, {
       testId: "".concat(testId, "-error")
-    }, error)), showCharacterCounter && /*#__PURE__*/React.createElement(_characterCounter.CharacterCounter, {
+    }, error)), showCharacterCounter && /*#__PURE__*/React.createElement(_characterCounter.default, {
       maxCharacters: maxCharacters,
       minCharacters: minCharacters,
       currentValue: String(extendedFieldProps.value || ''),

package/dist/cjs/character-counter.compiled.css

@@ -1,6 +1,4 @@
 ._11c8dcr7{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._zulp12x7{gap:var(--ds-space-075,6px)}
-._1bah1q9y{justify-content:baseline}
 ._1e0c1txw{display:flex}
 ._1pfh1b66{margin-block-start:var(--ds-space-050,4px)}
 ._4cvr1h6o{align-items:center}

package/dist/cjs/character-counter.js

@@ -6,7 +6,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CharacterCounter = void 0;
+exports.default = void 0;
 require("./character-counter.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
@@ -18,9 +18,11 @@ var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"
 var _fieldIdContext = require("./field-id-context");
 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); }
 // Extracted styles for character counter message container
-var messageContainerStyles = null;
+var messageContainerStyles = {
+  root: "_11c8dcr7 _syaze6sf _1pfh1b66"
+};
 
-// Extracted styles for error icon wrapper
+// Extracted styles for error icon wrapper, need to use css to override the default height
 var errorIconWrapperStyles = null;
 
 // Error icon with wrapper for character count violations
@@ -45,7 +47,7 @@ var pluralize = function pluralize(count) {
  * A character counter component that displays remaining characters for text input.
  * Displays messages for over or under the maximum or minimum character limits.
  */
-var CharacterCounter = exports.CharacterCounter = function CharacterCounter(_ref) {
+var CharacterCounter = function CharacterCounter(_ref) {
   var maxCharacters = _ref.maxCharacters,
     minCharacters = _ref.minCharacters,
     currentValue = _ref.currentValue,
@@ -116,10 +118,11 @@ var CharacterCounter = exports.CharacterCounter = function CharacterCounter(_ref
   if (!displayText) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
-    "data-testid": testId
-  }, /*#__PURE__*/React.createElement("div", {
-    className: (0, _runtime.ax)(["_zulp12x7 _11c8dcr7 _1e0c1txw _1bah1q9y _syaze6sf _1pfh1b66"])
+  return /*#__PURE__*/React.createElement(_compiled.Flex, {
+    testId: testId
+  }, /*#__PURE__*/React.createElement(_compiled.Flex, {
+    gap: "space.075",
+    xcss: messageContainerStyles.root
   }, displayAsError && /*#__PURE__*/React.createElement(ErrorIconWithWrapper, null), /*#__PURE__*/React.createElement(_compiled.Text, {
     color: displayAsError ? 'color.text.danger' : 'color.text.subtlest',
     size: "small",
@@ -127,4 +130,5 @@ var CharacterCounter = exports.CharacterCounter = function CharacterCounter(_ref
   }, displayText)), /*#__PURE__*/React.createElement(_visuallyHidden.default, null, /*#__PURE__*/React.createElement("div", {
     "aria-live": "polite"
   }, announcementText)));
-};
+};
+var _default = exports.default = CharacterCounter;

package/dist/cjs/index.js

@@ -4,6 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "CharacterCounter", {
+  enumerable: true,
+  get: function get() {
+    return _characterCounter.default;
+  }
+});
 Object.defineProperty(exports, "CharacterCounterField", {
   enumerable: true,
   get: function get() {
@@ -118,4 +124,5 @@ var _messages = require("./messages");
 var _fieldset = _interopRequireDefault(require("./fieldset"));
 var _requiredAsterisk = _interopRequireDefault(require("./required-asterisk"));
 var _useFormState = require("./use-form-state");
-var _characterCounterField = _interopRequireDefault(require("./character-counter-field"));
+var _characterCounterField = _interopRequireDefault(require("./character-counter-field"));
+var _characterCounter = _interopRequireDefault(require("./character-counter"));

package/dist/es2019/character-counter-field.js

@@ -3,7 +3,7 @@ import "./character-counter-field.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Fragment } from 'react';
-import { CharacterCounter } from './character-counter';
+import CharacterCounter from './character-counter';
 import Field from './field';
 import { ErrorMessage, HelperMessage, MessageWrapper } from './messages';
 // Override label specific margin block end to fix double spacing issue

package/dist/es2019/character-counter.compiled.css

@@ -1,6 +1,4 @@
 ._11c8dcr7{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._zulp12x7{gap:var(--ds-space-075,6px)}
-._1bah1q9y{justify-content:baseline}
 ._1e0c1txw{display:flex}
 ._1pfh1b66{margin-block-start:var(--ds-space-050,4px)}
 ._4cvr1h6o{align-items:center}

package/dist/es2019/character-counter.js

@@ -4,14 +4,16 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useContext, useEffect, useRef, useState } from 'react';
 import ErrorIcon from '@atlaskit/icon/core/status-error';
-import { Text } from '@atlaskit/primitives/compiled';
+import { Flex, Text } from '@atlaskit/primitives/compiled';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { FieldId } from './field-id-context';
 
 // Extracted styles for character counter message container
-const messageContainerStyles = null;
+const messageContainerStyles = {
+  root: "_11c8dcr7 _syaze6sf _1pfh1b66"
+};
 
-// Extracted styles for error icon wrapper
+// Extracted styles for error icon wrapper, need to use css to override the default height
 const errorIconWrapperStyles = null;
 
 // Error icon with wrapper for character count violations
@@ -32,7 +34,7 @@ const pluralize = count => `character${count !== 1 ? 's' : ''}`;
  * A character counter component that displays remaining characters for text input.
  * Displays messages for over or under the maximum or minimum character limits.
  */
-export const CharacterCounter = ({
+const CharacterCounter = ({
   maxCharacters,
   minCharacters,
   currentValue,
@@ -100,10 +102,11 @@ export const CharacterCounter = ({
   if (!displayText) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
-    "data-testid": testId
-  }, /*#__PURE__*/React.createElement("div", {
-    className: ax(["_zulp12x7 _11c8dcr7 _1e0c1txw _1bah1q9y _syaze6sf _1pfh1b66"])
+  return /*#__PURE__*/React.createElement(Flex, {
+    testId: testId
+  }, /*#__PURE__*/React.createElement(Flex, {
+    gap: "space.075",
+    xcss: messageContainerStyles.root
   }, displayAsError && /*#__PURE__*/React.createElement(ErrorIconWithWrapper, null), /*#__PURE__*/React.createElement(Text, {
     color: displayAsError ? 'color.text.danger' : 'color.text.subtlest',
     size: "small",
@@ -111,4 +114,5 @@ export const CharacterCounter = ({
   }, displayText)), /*#__PURE__*/React.createElement(VisuallyHidden, null, /*#__PURE__*/React.createElement("div", {
     "aria-live": "polite"
   }, announcementText)));
-};
+};
+export default CharacterCounter;

package/dist/es2019/index.js

@@ -10,4 +10,5 @@ export { HelperMessage, ErrorMessage, MessageWrapper, ValidMessage } from './mes
 export { default as Fieldset } from './fieldset';
 export { default as RequiredAsterisk } from './required-asterisk';
 export { useFormState } from './use-form-state';
-export { default as CharacterCounterField } from './character-counter-field';
+export { default as CharacterCounterField } from './character-counter-field';
+export { default as CharacterCounter } from './character-counter';

package/dist/esm/character-counter-field.js

@@ -6,7 +6,7 @@ import { ax, ix } from "@compiled/react/runtime";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { Fragment } from 'react';
-import { CharacterCounter } from './character-counter';
+import CharacterCounter from './character-counter';
 import Field from './field';
 import { ErrorMessage, HelperMessage, MessageWrapper } from './messages';
 // Override label specific margin block end to fix double spacing issue

package/dist/esm/character-counter.compiled.css

@@ -1,6 +1,4 @@
 ._11c8dcr7{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._zulp12x7{gap:var(--ds-space-075,6px)}
-._1bah1q9y{justify-content:baseline}
 ._1e0c1txw{display:flex}
 ._1pfh1b66{margin-block-start:var(--ds-space-050,4px)}
 ._4cvr1h6o{align-items:center}

package/dist/esm/character-counter.js

@@ -5,14 +5,16 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useContext, useEffect, useRef, useState } from 'react';
 import ErrorIcon from '@atlaskit/icon/core/status-error';
-import { Text } from '@atlaskit/primitives/compiled';
+import { Flex, Text } from '@atlaskit/primitives/compiled';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { FieldId } from './field-id-context';
 
 // Extracted styles for character counter message container
-var messageContainerStyles = null;
+var messageContainerStyles = {
+  root: "_11c8dcr7 _syaze6sf _1pfh1b66"
+};
 
-// Extracted styles for error icon wrapper
+// Extracted styles for error icon wrapper, need to use css to override the default height
 var errorIconWrapperStyles = null;
 
 // Error icon with wrapper for character count violations
@@ -37,7 +39,7 @@ var pluralize = function pluralize(count) {
  * A character counter component that displays remaining characters for text input.
  * Displays messages for over or under the maximum or minimum character limits.
  */
-export var CharacterCounter = function CharacterCounter(_ref) {
+var CharacterCounter = function CharacterCounter(_ref) {
   var maxCharacters = _ref.maxCharacters,
     minCharacters = _ref.minCharacters,
     currentValue = _ref.currentValue,
@@ -108,10 +110,11 @@ export var CharacterCounter = function CharacterCounter(_ref) {
   if (!displayText) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
-    "data-testid": testId
-  }, /*#__PURE__*/React.createElement("div", {
-    className: ax(["_zulp12x7 _11c8dcr7 _1e0c1txw _1bah1q9y _syaze6sf _1pfh1b66"])
+  return /*#__PURE__*/React.createElement(Flex, {
+    testId: testId
+  }, /*#__PURE__*/React.createElement(Flex, {
+    gap: "space.075",
+    xcss: messageContainerStyles.root
   }, displayAsError && /*#__PURE__*/React.createElement(ErrorIconWithWrapper, null), /*#__PURE__*/React.createElement(Text, {
     color: displayAsError ? 'color.text.danger' : 'color.text.subtlest',
     size: "small",
@@ -119,4 +122,5 @@ export var CharacterCounter = function CharacterCounter(_ref) {
   }, displayText)), /*#__PURE__*/React.createElement(VisuallyHidden, null, /*#__PURE__*/React.createElement("div", {
     "aria-live": "polite"
   }, announcementText)));
-};
+};
+export default CharacterCounter;

package/dist/esm/index.js

@@ -10,4 +10,5 @@ export { HelperMessage, ErrorMessage, MessageWrapper, ValidMessage } from './mes
 export { default as Fieldset } from './fieldset';
 export { default as RequiredAsterisk } from './required-asterisk';
 export { useFormState } from './use-form-state';
-export { default as CharacterCounterField } from './character-counter-field';
+export { default as CharacterCounterField } from './character-counter-field';
+export { default as CharacterCounter } from './character-counter';

package/dist/types/character-counter.d.ts

@@ -66,4 +66,5 @@ export interface CharacterCounterProps {
  * A character counter component that displays remaining characters for text input.
  * Displays messages for over or under the maximum or minimum character limits.
  */
-export declare const CharacterCounter: ({ maxCharacters, minCharacters, currentValue, overMaximumMessage, underMaximumMessage, underMinimumMessage, shouldShowAsError, inputId, testId, }: CharacterCounterProps) => JSX.Element | null;
+declare const CharacterCounter: ({ maxCharacters, minCharacters, currentValue, overMaximumMessage, underMaximumMessage, underMinimumMessage, shouldShowAsError, inputId, testId, }: CharacterCounterProps) => JSX.Element | null;
+export default CharacterCounter;

package/dist/types/index.d.ts

@@ -18,3 +18,5 @@ export type { OnSubmitHandler, FormApi } from './types';
 export { useFormState } from './use-form-state';
 export { default as CharacterCounterField } from './character-counter-field';
 export type { CharacterCounterFieldProps } from './character-counter-field';
+export { default as CharacterCounter } from './character-counter';
+export type { CharacterCounterProps } from './character-counter';

package/dist/types-ts4.5/character-counter.d.ts

@@ -66,4 +66,5 @@ export interface CharacterCounterProps {
  * A character counter component that displays remaining characters for text input.
  * Displays messages for over or under the maximum or minimum character limits.
  */
-export declare const CharacterCounter: ({ maxCharacters, minCharacters, currentValue, overMaximumMessage, underMaximumMessage, underMinimumMessage, shouldShowAsError, inputId, testId, }: CharacterCounterProps) => JSX.Element | null;
+declare const CharacterCounter: ({ maxCharacters, minCharacters, currentValue, overMaximumMessage, underMaximumMessage, underMinimumMessage, shouldShowAsError, inputId, testId, }: CharacterCounterProps) => JSX.Element | null;
+export default CharacterCounter;

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

@@ -18,3 +18,5 @@ export type { OnSubmitHandler, FormApi } from './types';
 export { useFormState } from './use-form-state';
 export { default as CharacterCounterField } from './character-counter-field';
 export type { CharacterCounterFieldProps } from './character-counter-field';
+export { default as CharacterCounter } from './character-counter';
+export type { CharacterCounterProps } from './character-counter';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/form",
-	"version": "15.1.1",
+	"version": "15.2.0",
 	"description": "A form allows people to input information.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -25,13 +25,13 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/css": "^0.18.0",
+		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/ds-lib": "^5.3.0",
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/icon": "^29.3.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^16.4.0",
-		"@atlaskit/tokens": "^8.6.0",
+		"@atlaskit/primitives": "^17.0.0",
+		"@atlaskit/tokens": "^9.0.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.6",
@@ -45,9 +45,10 @@
 	"devDependencies": {
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
+		"@af/suppress-react-warnings": "workspace:^",
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/banner": "^14.0.0",
-		"@atlaskit/button": "^23.8.0",
+		"@atlaskit/button": "^23.9.0",
 		"@atlaskit/checkbox": "^17.2.0",
 		"@atlaskit/codemod-utils": "^4.2.0",
 		"@atlaskit/datetime-picker": "^17.2.0",