@economic/taco 2.7.4 → 2.7.5

package/dist/taco.cjs.development.js

@@ -10531,10 +10531,8 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
   }), flattenedChildren)), /*#__PURE__*/React__default.createElement(PopoverPrimitive.Portal, null, /*#__PURE__*/React__default.createElement(PopoverPrimitive.Content, {
     asChild: true,
     align: "start",
-    onOpenAutoFocus: event => {
+    onOpenAutoFocus: () => {
       var _internalRef$current;
-      event.preventDefault();
-      event.stopPropagation();
       (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.focus();
     },
     onCloseAutoFocus: event => {
@@ -17604,6 +17602,22 @@ const Textarea = /*#__PURE__*/React.forwardRef(function Textarea(props, ref) {
   }));
 });
 
+// By UX design, textarea should fold to min size when blured and extend to max 5 lines height when edited in enableTruncate mode,
+// for this reason we need to set min/max height limits for each font size value.
+const heights = {
+  small: {
+    min: 24,
+    max: 86
+  },
+  medium: {
+    min: 34,
+    max: 100
+  },
+  large: {
+    min: 40,
+    max: 140
+  }
+};
 const TextareaControl = /*#__PURE__*/React__default.forwardRef(function TextareaControl(props, externalRef) {
   const {
     onKeyDown: handleKeyDown,
@@ -17613,19 +17627,25 @@ const TextareaControl = /*#__PURE__*/React__default.forwardRef(function Textarea
     align,
     isCurrentRow,
     value,
+    fontSize,
     ...attributes
   } = props;
-  const textareaMaxHeight = 120;
-  const textareaMinHeight = 32;
+  const minMaxHeight = heights[fontSize];
   const columnMeta = column.columnDef.meta;
   const ref = useMergedRef(externalRef);
   React__default.useEffect(() => {
-    // If truncation is not enabled, then textarea should re-calculate it's height to fit with it's own content, when initialized.
-    if (ref !== null && ref !== void 0 && ref.current && !(columnMeta !== null && columnMeta !== void 0 && columnMeta.enableTruncate)) {
-      const textareaElement = ref === null || ref === void 0 ? void 0 : ref.current;
-      resizeTextArea(textareaElement);
+    if (ref !== null && ref !== void 0 && ref.current) {
+      // Need to reset textarea to min height when font size got changed and if column in enable truncate mode.
+      if (columnMeta !== null && columnMeta !== void 0 && columnMeta.enableTruncate) {
+        const textareaElement = ref === null || ref === void 0 ? void 0 : ref.current;
+        textareaElement.style.height = `${minMaxHeight.min}px`;
+        // If truncation is not enabled, then textarea should re-calculate it's height to fit with it's own content, when initialized or fonsSize got changed.
+      } else {
+        const textareaElement = ref === null || ref === void 0 ? void 0 : ref.current;
+        resizeTextArea(textareaElement);
+      }
     }
-  }, []);
+  }, [fontSize]);
   React__default.useEffect(() => {
     // If truncation is enabled, then textarea should only adjust to it's own content, when in detail mode.
     // Otherwise it should collapse to minimal height.
@@ -17634,7 +17654,7 @@ const TextareaControl = /*#__PURE__*/React__default.forwardRef(function Textarea
       if (isCellInDetailMode) {
         resizeTextArea(textareaElement);
       } else {
-        textareaElement.style.height = `${textareaMinHeight}px`;
+        textareaElement.style.height = `${minMaxHeight.min}px`;
       }
     }
   }, [isCellInDetailMode]);
@@ -17644,9 +17664,9 @@ const TextareaControl = /*#__PURE__*/React__default.forwardRef(function Textarea
     const textareaRect = textareaElement.getBoundingClientRect();
     const prevHeight = textareaRect.height;
     if (columnMeta !== null && columnMeta !== void 0 && columnMeta.enableTruncate) {
-      if (prevHeight < textareaMaxHeight) {
+      if (prevHeight < minMaxHeight.max) {
         textareaElement.style.height = 'inherit';
-        textareaElement.style.height = `${Math.min(textareaElement.scrollHeight, textareaMaxHeight)}px`;
+        textareaElement.style.height = `${Math.min(textareaElement.scrollHeight, minMaxHeight.max)}px`;
       }
     } else {
       textareaElement.style.height = 'inherit';
@@ -17683,13 +17703,13 @@ const TextareaControl = /*#__PURE__*/React__default.forwardRef(function Textarea
       // If truncation is enabled, then textarea should shring back to min height, when loosing focus.
       if (columnMeta !== null && columnMeta !== void 0 && columnMeta.enableTruncate) {
         const textareaElement = event.currentTarget;
-        textareaElement.style.height = `${textareaMinHeight}px`;
+        textareaElement.style.height = `${minMaxHeight.min}px`;
       }
     },
     className: cn(getCellAlignmentClasses$1(align), `z-20 h-fit resize-none`, {
-      [`!min-h-[${textareaMinHeight}px]`]: columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate,
+      [`!min-h-[${minMaxHeight.min}px]`]: columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate,
       '!yt-focus-dark': isCellInDetailMode,
-      [`h-[${textareaMinHeight}px]`]: !isCellInDetailMode && (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate),
+      [`h-[${minMaxHeight.min}px]`]: !isCellInDetailMode && (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate),
       // Only allow resizing when focused and truncation enabled
       'focus:resize-y': isCurrentRow && (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate)
     }),
@@ -17825,7 +17845,8 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
     return /*#__PURE__*/React__default.createElement(TextareaControl, Object.assign({}, props, {
       isCellInDetailMode: isCellInDetailMode,
       onKeyDown: handleInputKeyDown,
-      ref: refCallback
+      ref: refCallback,
+      fontSize: tableMeta.fontSize.size
     }));
   }
   return /*#__PURE__*/React__default.createElement(Input, Object.assign({}, attributes, {
@@ -17936,11 +17957,9 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
   const controlRenderer = (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.control;
   const className = cn('!px-[0.4375rem] py-[calc(var(--table3-row-padding)_-_0.06rem)]', {
     relative: (isCurrentRow || isHovered) && controlRenderer === 'textarea',
-    // Need to set higher z-index, so that the current row textarea (in expanded state) overlaps rows below
-    'z-10': isCurrentRow,
-    // When row is hovered and located below, then the hovered textarea overlaps the current row textarea(if the current row textarea is expanded to support multiple lines),
-    // as result we need to set lower z-index for the hovered row -> cell.
-    'z-0': isHovered
+    // Need to set higher z-index, so that the current row textarea (in expanded state, when positioned absolute) overlaps rows below,
+    // but at the same time it should not overlap the table headers which has z-10.
+    'z-[9]': isCurrentRow && controlRenderer === 'textarea'
   },
   // component overrides - grayscale for editing hover
   '[[role="row"][data-current="false"]:hover_&>*]:!grayscale [[role="row"][data-current="false"]:hover_&_.bg-white]:!bg-grey-100',