@doist/reactist 27.2.2 → 27.3.5

package/dist/reactist.cjs.development.js

@@ -1905,7 +1905,9 @@ function PasswordHiddenIcon(props) {
 
 var modules_540a88ff = {"container":"d5ff04da","auxiliaryLabel":"_8d2b52f1","bordered":"_49c37b27","error":"_922ff337","primaryLabel":"af23c791","loadingIcon":"_75edcef6"};
 
-const MAX_LENGTH_THRESHOLD = 10;
+// See: https://twist.com/a/1585/ch/765851/t/6664583/c/93631846 for latest spec
+
+const MAX_LENGTH_THRESHOLD = 0;
 
 function fieldToneToTextTone(tone) {
   return tone === 'error' ? 'danger' : tone === 'success' ? 'positive' : 'secondary';
@@ -1959,6 +1961,10 @@ function validateInputLength({
     tone: isNearMaxLength ? 'error' : 'neutral'
   };
 }
+/**
+ * BaseField is a base component that provides a consistent structure for form fields.
+ */
+
 
 function BaseField({
   variant = 'default',
@@ -1973,7 +1979,8 @@ function BaseField({
   maxLength,
   hidden,
   'aria-describedby': originalAriaDescribedBy,
-  id: originalId
+  id: originalId,
+  characterCountPosition = 'below'
 }) {
   const id = useId(originalId);
   const messageId = useId();
@@ -1984,6 +1991,16 @@ function BaseField({
   const [characterCount, setCharacterCount] = React__namespace.useState(inputLength.count);
   const [characterCountTone, setCharacterCountTone] = React__namespace.useState(inputLength.tone);
   const ariaDescribedBy = originalAriaDescribedBy != null ? originalAriaDescribedBy : message ? messageId : null;
+  /**
+   * Renders the character count element.
+   * If the characterCountPosition value is 'hidden', it returns null.
+   */
+
+  function renderCharacterCount() {
+    return characterCountPosition !== 'hidden' ? /*#__PURE__*/React__namespace.createElement(FieldCharacterCount, {
+      tone: characterCountTone
+    }, characterCount) : null;
+  }
 
   const childrenProps = _objectSpread2(_objectSpread2({
     id,
@@ -2004,8 +2021,10 @@ function BaseField({
       });
       setCharacterCount(inputLength.count);
       setCharacterCountTone(inputLength.tone);
-    }
+    },
 
+    // If the character count is inline, we pass it as a prop to the children element so it can be rendered inline
+    characterCountElement: characterCountPosition === 'inline' ? renderCharacterCount() : null
   });
 
   React__namespace.useEffect(function updateCharacterCountOnPropChange() {
@@ -2049,17 +2068,15 @@ function BaseField({
   }, /*#__PURE__*/React__namespace.createElement(FieldMessage, {
     id: messageId,
     tone: tone
-  }, message)) : null, characterCount ? /*#__PURE__*/React__namespace.createElement(Column, {
+  }, message)) : null, characterCountPosition === 'below' ? /*#__PURE__*/React__namespace.createElement(Column, {
     width: "content"
-  }, /*#__PURE__*/React__namespace.createElement(FieldCharacterCount, {
-    tone: characterCountTone
-  }, characterCount)) : null) : null);
+  }, renderCharacterCount()) : null) : null);
 }
 
-var modules_aaf25250 = {"inputWrapper":"f2de4e8d","readOnly":"ee26e40c","bordered":"_3afb1a56","error":"f3ff9f57","slot":"_3eb7b0ef"};
+var modules_aaf25250 = {"inputWrapper":"c8f65b3b","readOnly":"_326f2644","bordered":"_5252fd3d","error":"_0141b7ac","slot":"b79b851f"};
 
-const _excluded$d = ["variant", "id", "label", "value", "auxiliaryLabel", "message", "tone", "type", "maxWidth", "maxLength", "hidden", "aria-describedby", "startSlot", "endSlot", "onChange"],
-      _excluded2$4 = ["onChange"];
+const _excluded$d = ["variant", "id", "label", "value", "auxiliaryLabel", "message", "tone", "type", "maxWidth", "maxLength", "hidden", "aria-describedby", "startSlot", "endSlot", "onChange", "characterCountPosition"],
+      _excluded2$4 = ["onChange", "characterCountElement"];
 const TextField = /*#__PURE__*/React__namespace.forwardRef(function TextField(_ref, ref) {
   let {
     variant = 'default',
@@ -2076,7 +2093,8 @@ const TextField = /*#__PURE__*/React__namespace.forwardRef(function TextField(_r
     'aria-describedby': ariaDescribedBy,
     startSlot,
     endSlot,
-    onChange: originalOnChange
+    onChange: originalOnChange,
+    characterCountPosition = 'below'
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$d);
 
@@ -2101,10 +2119,12 @@ const TextField = /*#__PURE__*/React__namespace.forwardRef(function TextField(_r
     maxWidth: maxWidth,
     maxLength: maxLength,
     hidden: hidden,
-    "aria-describedby": ariaDescribedBy
+    "aria-describedby": ariaDescribedBy,
+    characterCountPosition: characterCountPosition
   }, _ref2 => {
     let {
-      onChange
+      onChange,
+      characterCountElement
     } = _ref2,
         extraProps = _objectWithoutProperties(_ref2, _excluded2$4);
 
@@ -2126,12 +2146,12 @@ const TextField = /*#__PURE__*/React__namespace.forwardRef(function TextField(_r
         originalOnChange == null ? void 0 : originalOnChange(event);
         onChange == null ? void 0 : onChange(event);
       }
-    })), endSlot ? /*#__PURE__*/React__namespace.createElement(Box$1, {
+    })), endSlot || characterCountElement ? /*#__PURE__*/React__namespace.createElement(Box$1, {
       className: modules_aaf25250.slot,
       display: "flex",
       marginRight: variant === 'bordered' ? '-xsmall' : 'xsmall',
       marginLeft: variant === 'bordered' ? 'xsmall' : '-xsmall'
-    }, endSlot) : null);
+    }, characterCountElement, endSlot) : null);
   });
 });