react-magma-dom 3.2.0-next.4 → 3.2.0-next.6

package/dist/components/CharacterCounter/CharacterCounter.d.ts

@@ -1,5 +1,9 @@
 import * as React from 'react';
 export interface CharacterCounterProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Identifier to associate Character Counter with Input.
+     */
+    id: string;
     /**
      * Total number of characters in an input.
      */

package/dist/components/CharacterCounter/CharacterCounter.stories.d.ts

@@ -6,6 +6,7 @@ export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("
 export declare const WithChildren: {
     (args: any): JSX.Element;
     args: {
+        id?: string;
         inputLength?: number;
         isInverse?: boolean;
         maxLength?: number;
@@ -21,7 +22,6 @@ export declare const WithChildren: {
         dir?: string;
         draggable?: boolean | "true" | "false";
         hidden?: boolean;
-        id?: string;
         lang?: string;
         placeholder?: string;
         slot?: string;
@@ -272,6 +272,7 @@ export declare const WithChildren: {
 export declare const TextArea: {
     (args: any): JSX.Element;
     args: {
+        id?: string;
         inputLength?: number;
         isInverse?: boolean;
         maxLength?: number;
@@ -287,7 +288,6 @@ export declare const TextArea: {
         dir?: string;
         draggable?: boolean | "true" | "false";
         hidden?: boolean;
-        id?: string;
         lang?: string;
         placeholder?: string;
         slot?: string;

package/dist/components/Input/InputMessage.d.ts

@@ -8,5 +8,6 @@ export interface InputMessageProps extends React.HTMLAttributes<HTMLDivElement>
      */
     inputSize?: InputSize;
     isInverse?: boolean;
+    maxLength?: number;
 }
 export declare const InputMessage: React.FunctionComponent<InputMessageProps>;

package/dist/esm/index.js

@@ -4990,7 +4990,7 @@ var InputBase = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
   }, children));
 });
 
-var _excluded$j = ["children", "id", "isInverse", "hasError"];
+var _excluded$j = ["children", "id", "isInverse", "hasError", "maxLength"];
 
 var _templateObject$f, _templateObject2$6;
 
@@ -5027,10 +5027,20 @@ var InputMessage = function InputMessage(_ref) {
       id = _ref.id,
       isInverse = _ref.isInverse,
       hasError = _ref.hasError,
+      maxLength = _ref.maxLength,
       other = _objectWithoutPropertiesLoose(_ref, _excluded$j);
 
-  var theme = useContext(ThemeContext);
-  return createElement(Announce, null, createElement(Message, Object.assign({}, other, {
+  var theme = useContext(ThemeContext); //Conditional wrapper based on maxLength, allows Character Counter to render without the Announce component for accessibility purposes.
+
+  function AnnounceWrapper(props) {
+    if (maxLength) {
+      return props.children;
+    }
+
+    return createElement(Announce, null, props.children);
+  }
+
+  return createElement(AnnounceWrapper, null, createElement(Message, Object.assign({}, other, {
     "data-testid": "inputMessage",
     id: id,
     isInverse: isInverse,
@@ -10045,7 +10055,7 @@ var CalendarMonth = function CalendarMonth(props) {
   })))));
 };
 
-var _excluded$I = ["children", "inputLength", "maxLength", "testId", "isInverse"];
+var _excluded$I = ["children", "id", "inputLength", "maxLength", "testId", "isInverse"];
 
 var _templateObject$A;
 
@@ -10059,14 +10069,30 @@ function buildFontWeight(props) {
 
 var StyledInputMessage = /*#__PURE__*/_styled(InputMessage)(_templateObject$A || (_templateObject$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-weight: ", ";\n"])), buildFontWeight);
 var CharacterCounter = /*#__PURE__*/forwardRef(function (props) {
-  var inputLength = props.inputLength,
+  var id = props.id,
+      inputLength = props.inputLength,
       maxLength = props.maxLength,
       testId = props.testId,
       isInverse = props.isInverse,
       rest = _objectWithoutPropertiesLoose(props, _excluded$I);
 
   var i18n = useContext(I18nContext);
-  var isOverMaxLength = inputLength > maxLength; // As the user types, this calculates the remaining characters set by maxLength which counts down to zero then counts up if over the limit.
+  var isOverMaxLength = inputLength > maxLength; // Gets percentage value of total characters within Input to let aria-live have dynamic states.
+
+  var getPercentage = inputLength / maxLength * 100; // Returns aria-live states based on percentage of characters within Input.
+
+  function getAriaLiveState() {
+    if (getPercentage >= 80) {
+      if (getPercentage > 100) {
+        return 'assertive';
+      }
+
+      return 'polite';
+    }
+
+    return 'off';
+  } // As the user types, this calculates the remaining characters set by maxLength which counts down to zero then counts up if over the limit.
+
 
   var characterLimit = maxLength > inputLength ? maxLength - inputLength : inputLength - maxLength;
   /*
@@ -10107,8 +10133,10 @@ var CharacterCounter = /*#__PURE__*/forwardRef(function (props) {
   }
 
   return createElement("div", Object.assign({
-    "data-testid": testId
+    "data-testid": testId,
+    id: id
   }, rest), createElement(StyledInputMessage, {
+    "aria-live": getAriaLiveState(),
     hasError: isOverMaxLength,
     isInverse: isInverse,
     inputLength: inputLength,
@@ -10144,7 +10172,7 @@ var FormFieldContainer = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var theme = useContext(ThemeContext);
   var isInverse = useIsInverse(isInverseProp);
-  var descriptionId = errorMessage || helperMessage ? fieldId + "__desc" : null;
+  var descriptionId = errorMessage || helperMessage || maxLength ? fieldId + "__desc" : null;
   return createElement(InverseContext.Provider, {
     value: {
       isInverse: isInverse
@@ -10162,6 +10190,7 @@ var FormFieldContainer = /*#__PURE__*/forwardRef(function (props, ref) {
     size: inputSize,
     style: labelStyle
   }, isLabelVisuallyHidden ? createElement(VisuallyHidden, null, labelText) : labelText), children, typeof maxLength === 'number' && createElement(CharacterCounter, {
+    id: descriptionId,
     inputLength: inputLength,
     isInverse: isInverse,
     maxLength: maxLength,
@@ -10193,7 +10222,7 @@ var Input = /*#__PURE__*/forwardRef(function (props, ref) {
       other = _objectWithoutPropertiesLoose(props, _excluded$K);
 
   var id = useGenerateId(defaultId);
-  var descriptionId = errorMessage || helperMessage ? id + "__desc" : null;
+  var descriptionId = errorMessage || helperMessage || maxLength ? id + "__desc" : null;
   var isInverse = useIsInverse(props.isInverse);
 
   var _useState = useState(0),