@doist/reactist 27.4.0 → 27.5.0

package/dist/reactist.cjs.development.js

@@ -1982,7 +1982,9 @@ function BaseField({
   hidden,
   'aria-describedby': originalAriaDescribedBy,
   id: originalId,
-  characterCountPosition = 'below'
+  characterCountPosition = 'below',
+  endSlot,
+  endSlotPosition = 'bottom'
 }) {
   const id = useId(originalId);
   const messageId = useId();
@@ -2045,8 +2047,13 @@ function BaseField({
     space: "xsmall",
     hidden: hidden
   }, /*#__PURE__*/React__namespace.createElement(Box$1, {
+    display: "flex",
+    flexDirection: "row",
     className: [className, modules_540a88ff.container, tone === 'error' ? modules_540a88ff.error : null, variant === 'bordered' ? modules_540a88ff.bordered : null],
-    maxWidth: maxWidth
+    maxWidth: maxWidth,
+    alignItems: "center"
+  }, /*#__PURE__*/React__namespace.createElement(Box$1, {
+    flexGrow: 1
   }, label || auxiliaryLabel ? /*#__PURE__*/React__namespace.createElement(Box$1, {
     as: "span",
     display: "flex",
@@ -2061,7 +2068,7 @@ function BaseField({
   }, label) : null), auxiliaryLabel ? /*#__PURE__*/React__namespace.createElement(Box$1, {
     className: modules_540a88ff.auxiliaryLabel,
     paddingLeft: "small"
-  }, auxiliaryLabel) : null) : null, children(childrenProps)), message || characterCount ? /*#__PURE__*/React__namespace.createElement(Columns, {
+  }, auxiliaryLabel) : null) : null, children(childrenProps)), endSlot && endSlotPosition === 'fullHeight' ? endSlot : null), message || characterCount ? /*#__PURE__*/React__namespace.createElement(Columns, {
     align: "right",
     space: "small",
     maxWidth: maxWidth
@@ -2077,7 +2084,7 @@ function BaseField({
 
 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", "characterCountPosition"],
+const _excluded$d = ["variant", "id", "label", "value", "auxiliaryLabel", "message", "tone", "type", "maxWidth", "maxLength", "hidden", "aria-describedby", "startSlot", "endSlot", "onChange", "characterCountPosition", "endSlotPosition"],
       _excluded2$4 = ["onChange", "characterCountElement"];
 const TextField = /*#__PURE__*/React__namespace.forwardRef(function TextField(_ref, ref) {
   let {
@@ -2096,7 +2103,8 @@ const TextField = /*#__PURE__*/React__namespace.forwardRef(function TextField(_r
     startSlot,
     endSlot,
     onChange: originalOnChange,
-    characterCountPosition = 'below'
+    characterCountPosition = 'below',
+    endSlotPosition = 'bottom'
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$d);
 
@@ -2110,6 +2118,7 @@ const TextField = /*#__PURE__*/React__namespace.forwardRef(function TextField(_r
     (_internalRef$current = internalRef.current) == null ? void 0 : _internalRef$current.focus();
   }
 
+  const displayEndSlot = endSlot && (variant === 'default' || variant === 'bordered' && endSlotPosition === 'bottom');
   return /*#__PURE__*/React__namespace.createElement(BaseField, {
     variant: variant,
     id: id,
@@ -2122,7 +2131,10 @@ const TextField = /*#__PURE__*/React__namespace.forwardRef(function TextField(_r
     maxLength: maxLength,
     hidden: hidden,
     "aria-describedby": ariaDescribedBy,
-    characterCountPosition: characterCountPosition
+    characterCountPosition: characterCountPosition,
+    supportsStartAndEndSlots: true,
+    endSlot: endSlot,
+    endSlotPosition: variant === 'bordered' ? endSlotPosition : undefined
   }, _ref2 => {
     let {
       onChange,
@@ -2148,12 +2160,12 @@ const TextField = /*#__PURE__*/React__namespace.forwardRef(function TextField(_r
         originalOnChange == null ? void 0 : originalOnChange(event);
         onChange == null ? void 0 : onChange(event);
       }
-    })), endSlot || characterCountElement ? /*#__PURE__*/React__namespace.createElement(Box$1, {
+    })), displayEndSlot || characterCountElement ? /*#__PURE__*/React__namespace.createElement(Box$1, {
       className: modules_aaf25250.slot,
       display: "flex",
       marginRight: variant === 'bordered' ? '-xsmall' : 'xsmall',
       marginLeft: variant === 'bordered' ? 'xsmall' : '-xsmall'
-    }, characterCountElement, endSlot) : null);
+    }, characterCountElement, displayEndSlot ? endSlot : null) : null);
   });
 });