@atlaskit/form/dist/cjs/character-counter-field.js

A form allows people to input information.

/* character-counter-field.tsx generated by @compiled/babel-plugin v0.39.1 */
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = CharacterCounterField;
require("./character-counter-field.compiled.css");
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _runtime = require("@compiled/react/runtime");
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
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); }
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) { (0, _defineProperty2.default)(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; }
// Override label specific margin block end to fix double spacing issue
var fieldWrapperStyles = {
  root: "_14uxze3t"
};

// Override helper message margins to fix inconsistent spacing issue
var helperMessageWrapperStyles = {
  root: "_6rth1b66 _6ul5ze3t"
};
/**
 * __Character Counter Field__
 *
 * A field component that wraps the standard Field with automatic character count validation.
 * Validates minimum and maximum character limits and displays a character counter.
 */
function CharacterCounterField(_ref) {
  var maxCharacters = _ref.maxCharacters,
    minCharacters = _ref.minCharacters,
    children = _ref.children,
    userValidate = _ref.validate,
    overMaximumMessage = _ref.overMaximumMessage,
    underMaximumMessage = _ref.underMaximumMessage,
    underMinimumMessage = _ref.underMinimumMessage,
    helperMessage = _ref.helperMessage,
    defaultValue = _ref.defaultValue,
    id = _ref.id,
    isRequired = _ref.isRequired,
    isDisabled = _ref.isDisabled,
    label = _ref.label,
    elementAfterLabel = _ref.elementAfterLabel,
    name = _ref.name,
    testId = _ref.testId;
  // Default validation function for character limits
  // __TOO_SHORT__ and __TOO_LONG__ are default error codes recognised by the CharacterCounter component
  var validateCharacterCount = function validateCharacterCount(value) {
    var stringValue = String(value || '');
    var length = stringValue.length;

    // Check minimum length
    if (minCharacters !== undefined && length < minCharacters) {
      return '__TOO_SHORT__';
    }

    // Check maximum length
    if (maxCharacters !== undefined && length > maxCharacters) {
      return '__TOO_LONG__';
    }
    return undefined;
  };

  // Combine user validation and character validation
  // Any user defined validation takes priority over character validation
  // If there is no user defined validation for character limits e.g. used maxLength prior to CharacterCounterField,
  // use the default error codes and display the appropriate error message
  var combinedValidate = function combinedValidate(value, formState, fieldState) {
    // First run character validation
    var characterError = validateCharacterCount(value);

    // Then run user's custom validation if provided
    var userError = userValidate === null || userValidate === void 0 ? void 0 : userValidate(value, formState, fieldState);

    // If user validation returns a promise, handle it
    if (userError instanceof Promise) {
      return userError.then(function (error) {
        // User error takes priority over character validation
        return error || characterError;
      });
    }

    // User error takes priority over character validation
    return userError || characterError;
  };
  return /*#__PURE__*/React.createElement("div", {
    className: (0, _runtime.ax)([fieldWrapperStyles.root])
  }, /*#__PURE__*/React.createElement(_field.default, {
    defaultValue: defaultValue,
    id: id,
    isRequired: isRequired,
    isDisabled: isDisabled,
    label: label,
    elementAfterLabel: elementAfterLabel,
    name: name,
    testId: testId,
    validate: combinedValidate
  }, function (_ref2) {
    var extendedFieldProps = _ref2.fieldProps,
      error = _ref2.error,
      valid = _ref2.valid,
      meta = _ref2.meta;
    // Determine if error is a character count violation (handled by CharacterCounter)
    // or an external validation error (needs ErrorMessage)
    var isCharacterCountViolation = error === '__TOO_SHORT__' || error === '__TOO_LONG__';
    var showExternalError = error && !isCharacterCountViolation;
    var showCharacterCounter = (maxCharacters !== undefined || minCharacters !== undefined) && !showExternalError;

    // Extend aria-describedby to reference the appropriate message component
    var fieldPropsWithCounter = _objectSpread(_objectSpread({}, extendedFieldProps), {}, {
      'aria-describedby': showCharacterCounter ? "".concat(extendedFieldProps['aria-describedby'], " ").concat(extendedFieldProps.id, "-character-counter").trim() : extendedFieldProps['aria-describedby']
    });
    return /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement(_messages.MessageWrapper, null, helperMessage && /*#__PURE__*/React.createElement("div", {
      className: (0, _runtime.ax)([helperMessageWrapperStyles.root])
    }, /*#__PURE__*/React.createElement(_messages.HelperMessage, {
      testId: "".concat(testId, "-helper")
    }, helperMessage))), children({
      fieldProps: fieldPropsWithCounter,
      error: error,
      valid: valid,
      meta: meta
    }), /*#__PURE__*/React.createElement(_messages.MessageWrapper, null, showExternalError && /*#__PURE__*/React.createElement(_messages.ErrorMessage, {
      testId: "".concat(testId, "-error")
    }, error)), showCharacterCounter && /*#__PURE__*/React.createElement(_characterCounter.default, {
      maxCharacters: maxCharacters,
      minCharacters: minCharacters,
      currentValue: String(extendedFieldProps.value || ''),
      shouldShowAsError: isCharacterCountViolation,
      overMaximumMessage: overMaximumMessage,
      underMaximumMessage: underMaximumMessage,
      underMinimumMessage: underMinimumMessage,
      testId: "".concat(testId, "-character-counter")
    }));
  }));
}