@doist/reactist 27.4.0 → 28.0.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);
   });
 });
 
@@ -2764,9 +2776,9 @@ function ModalActions(_ref5) {
   }, children));
 }
 
-var modules_40c67f5b = {"tab":"faa5b46e","track":"_93de0ded","tab-neutral":"_82a91995","tab-themed":"f150e9da","track-neutral":"_10f229b4","track-themed":"_54f03992"};
+var modules_40c67f5b = {"tab":"_9f64e89a","fullTabList":"_49fe8e5a","track":"_1f449e3a","selected":"a8ac92b1","tab-neutral":"_6c6b8a2b","tab-themed":"_0eddd76d","track-neutral":"be66f12e","track-themed":"d21ccd50","selected-neutral":"_33211e81","selected-themed":"_4d1cbd10"};
 
-const _excluded$5 = ["children", "space"],
+const _excluded$5 = ["children", "space", "width", "align", "exceptionallySetClassName"],
       _excluded2$1 = ["children", "id", "renderMode"];
 const TabsContext = /*#__PURE__*/React__namespace.createContext(null);
 /**
@@ -2807,6 +2819,7 @@ function Tabs({
 const Tab = /*#__PURE__*/React__namespace.forwardRef(function Tab({
   children,
   id,
+  disabled,
   exceptionallySetClassName,
   render,
   onClick
@@ -2821,6 +2834,7 @@ const Tab = /*#__PURE__*/React__namespace.forwardRef(function Tab({
   return /*#__PURE__*/React__namespace.createElement(react.Tab, {
     id: id,
     ref: ref,
+    disabled: disabled,
     store: tabStore,
     render: render,
     className: className,
@@ -2834,11 +2848,42 @@ const Tab = /*#__PURE__*/React__namespace.forwardRef(function Tab({
 function TabList(_ref2) {
   let {
     children,
-    space
+    space,
+    width = 'maxContent',
+    align = 'start',
+    exceptionallySetClassName
   } = _ref2,
       props = _objectWithoutProperties(_ref2, _excluded$5);
 
   const tabContextValue = React__namespace.useContext(TabsContext);
+  const [selectedTabElement, setSelectedTabElement] = React__namespace.useState(null);
+  const [selectedTabStyle, setSelectedTabStyle] = React__namespace.useState({});
+  const tabListRef = React__namespace.useRef(null);
+  const selectedId = tabContextValue == null ? void 0 : tabContextValue.tabStore.useState('selectedId');
+  React__namespace.useLayoutEffect(() => {
+    function updateSelectedTabStyle() {
+      if (!selectedId || !tabListRef.current) {
+        return;
+      }
+
+      const tabs = tabListRef.current.querySelectorAll('[role="tab"]');
+      const selectedTab = Array.from(tabs).find(tab => tab.getAttribute('id') === selectedId);
+
+      if (selectedTab) {
+        setSelectedTabElement(selectedTab);
+        setSelectedTabStyle({
+          left: selectedTab.offsetLeft + "px",
+          width: selectedTab.offsetWidth + "px"
+        });
+      }
+    }
+
+    updateSelectedTabStyle();
+    window.addEventListener('resize', updateSelectedTabStyle);
+    return function cleanupEventListener() {
+      window.removeEventListener('resize', updateSelectedTabStyle);
+    };
+  }, [selectedId]);
 
   if (!tabContextValue) {
     return null;
@@ -2848,20 +2893,35 @@ function TabList(_ref2) {
     tabStore,
     variant
   } = tabContextValue;
+  const justifyContentAlignMap = {
+    start: 'flexStart',
+    end: 'flexEnd',
+    center: 'center'
+  };
   return (
     /*#__PURE__*/
-    // The extra <div> prevents <Inline>'s negative margins from collapsing when used in a flex container
-    // which will render the track with the wrong height
-    React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(react.TabList, _objectSpread2({
+    // This extra <Box> not only provides alignment for the tabs, but also prevents <Inline>'s
+    // negative margins from collapsing when used in a flex container which will render the
+    // track with the wrong height
+    React__namespace.createElement(Box$1, {
+      display: "flex",
+      justifyContent: width === 'full' ? 'center' : justifyContentAlignMap[align]
+    }, /*#__PURE__*/React__namespace.createElement(react.TabList, _objectSpread2({
       store: tabStore,
       render: /*#__PURE__*/React__namespace.createElement(Box$1, {
         position: "relative",
-        width: "maxContent"
-      })
+        width: width,
+        className: exceptionallySetClassName
+      }),
+      ref: tabListRef
     }, props), /*#__PURE__*/React__namespace.createElement(Box$1, {
       className: [modules_40c67f5b.track, modules_40c67f5b["track-" + variant]]
-    }), /*#__PURE__*/React__namespace.createElement(Inline, {
-      space: space
+    }), selectedTabElement ? /*#__PURE__*/React__namespace.createElement(Box$1, {
+      className: [modules_40c67f5b.selected, modules_40c67f5b["selected-" + variant]],
+      style: selectedTabStyle
+    }) : null, /*#__PURE__*/React__namespace.createElement(Inline, {
+      space: space,
+      exceptionallySetClassName: classNames__default["default"](width === 'full' ? modules_40c67f5b.fullTabList : null)
     }, children)))
   );
 }