@desynova-digital/components 9.3.20 → 9.3.21

package/atoms/inputText/inputText.js

@@ -80,7 +80,7 @@ var _InputText = function InputText(_ref) {
     value: props.value,
     theme: theme,
     error: props.error
-  }, errorMesssage || "") : "", maxLength && showLengthCount && /*#__PURE__*/_react["default"].createElement(CountWrappper, null, props.value.length, "/", maxLength), type == "password" || passwordButton ? /*#__PURE__*/_react["default"].createElement(PasswordToggleButton, {
+  }, errorMesssage) : "", maxLength && showLengthCount && /*#__PURE__*/_react["default"].createElement(CountWrappper, null, props.value.length, "/", maxLength), type == "password" || passwordButton ? /*#__PURE__*/_react["default"].createElement(PasswordToggleButton, {
     type: "button",
     className: "password-toggle",
     onClick: function onClick() {

package/molecules/table/table.js

@@ -377,7 +377,8 @@ var Table = /*#__PURE__*/function (_Component) {
         });
         var allRegularColumns = (0, _toConsumableArray2["default"])(_this.columns);
         _this.defaultShowColumns = (0, _toConsumableArray2["default"])(allRegularColumns);
-        _this.extraColumns = (0, _toConsumableArray2["default"])(allRegularColumns);
+        // Only truncated columns belong in the expanded row; avoid duplicating visible fields.
+        _this.extraColumns = [];
         var maxRegularColumns = _this.props.showActions ? _this.props.maxShowNoOfColumns - 1 : _this.props.maxShowNoOfColumns;
         var needsTruncation = _this.columns.length > maxRegularColumns;
         if (needsTruncation) {
@@ -387,7 +388,9 @@ var Table = /*#__PURE__*/function (_Component) {
             (_this$defaultShowColu2 = _this.defaultShowColumns).push.apply(_this$defaultShowColu2, (0, _toConsumableArray2["default"])(_this.actionIconCol));
           }
           _this.defaultShowColumns.push(extraColumnsSchema);
-          _this.extraColumns.splice(0, maxRegularColumns);
+
+          // Keep overflow fields in schema order, after the main row's column limit.
+          _this.extraColumns = allRegularColumns.slice(maxRegularColumns);
         } else if (_this.props.showActions && _this.actionIconCol.length > 0) {
           var _this$defaultShowColu3;
           (_this$defaultShowColu3 = _this.defaultShowColumns).push.apply(_this$defaultShowColu3, (0, _toConsumableArray2["default"])(_this.actionIconCol));
@@ -548,21 +551,29 @@ var Table = /*#__PURE__*/function (_Component) {
                 width: "100%"
               });
             }
-            if (!_this.hasNestedRows(item)) {
+            // Plain overflow fields can expand even when the row has no nested table.
+            if (!_this.state.extraColumns.length && !_this.hasNestedRows(item)) {
               return null;
             }
             return /*#__PURE__*/_react["default"].createElement(ExpandToggle, {
+              $preserveActionPosition: _this.props.preserveActionPosition,
               className: "expand-toggle".concat(_this.state.showExtraRow === idx ? " is-expanded" : ""),
               onClick: function onClick(e) {
                 _this.toggleExtraDetails(e, idx);
               }
-            }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+            }, _this.props.preserveActionPosition ? /*#__PURE__*/_react["default"].createElement(_icon["default"], {
               theme: _this.props.theme,
               name: "right-arrow-chevron",
               width: 12,
               height: 12,
               color: "none",
               stroke: _tokens.colors[_this.props.theme].table.tdColor
+            }) : /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+              theme: _this.props.theme,
+              name: "triangle-carat",
+              width: 10,
+              height: 6,
+              color: _tokens.colors[_this.props.theme].table.tdColor
             }));
           }
         /**
@@ -956,7 +967,9 @@ var Table = /*#__PURE__*/function (_Component) {
       var lastLeftField = null;
       for (var i = 0; i < visibleColumns.length; i += 1) {
         var column = visibleColumns[i];
-        var structural = STRUCTURAL_LEFT_FIELDS.includes(column.field);
+        // Only the leading nested-table toggle is structural; the trailing toggle after Actions
+        // should use normal cell styling instead of the left-pinned background and shadow.
+        var structural = STRUCTURAL_LEFT_FIELDS.includes(column.field) && (column.field !== "extra_columns" || _this.props.preserveActionPosition);
         if (structural || isPinned(column.pinned_left)) {
           var width = toPxNumber(_this.getColumnWidth(column));
           if (width === undefined) {
@@ -1900,7 +1913,7 @@ var Table = /*#__PURE__*/function (_Component) {
             }, cellRenderer(item, column, index)));
           }
           return filler;
-        }), fillerIndex >= _this5.defaultShowColumns.length && _this5.renderFillerCell("".concat(index, "-filler-end"))), (_this5.state.showExtraRow === index || _this5.state.closingExtraRow === index) && _this5.hasNestedRows(item) ? /*#__PURE__*/_react["default"].createElement(Table.Row, {
+        }), fillerIndex >= _this5.defaultShowColumns.length && _this5.renderFillerCell("".concat(index, "-filler-end"))), (_this5.state.showExtraRow === index || _this5.state.closingExtraRow === index) && (_this5.state.extraColumns.length > 0 || _this5.hasNestedRows(item)) ? /*#__PURE__*/_react["default"].createElement(Table.Row, {
           theme: _this5.props.theme,
           key: "row-" + index + "extra"
         }, /*#__PURE__*/_react["default"].createElement(Table.Cell, {
@@ -1912,7 +1925,26 @@ var Table = /*#__PURE__*/function (_Component) {
           // className="tableHolder"
         }, /*#__PURE__*/_react["default"].createElement(NestedRowReveal, {
           open: _this5.state.showExtraRow === index
-        }, _this5.hasNestedRows(item) ? /*#__PURE__*/_react["default"].createElement(NestedTableHolder, {
+        }, _this5.state.extraColumns.length > 0 && /*#__PURE__*/_react["default"].createElement(NestedTableHolder, null, /*#__PURE__*/_react["default"].createElement(Table.Card, {
+          theme: theme,
+          width: "100%"
+        }, /*#__PURE__*/_react["default"].createElement(TableInner.Element, {
+          theme: theme
+        }, /*#__PURE__*/_react["default"].createElement(Table.Header, {
+          theme: theme,
+          columns: _this5.state.extraColumns,
+          selectedColumns: _this5.getFieldArr(_this5.state.extraColumns),
+          onSort: _this5.props.onSort,
+          displayAs: "extraDetails"
+        }), /*#__PURE__*/_react["default"].createElement(Table.Body, null, /*#__PURE__*/_react["default"].createElement(Table.Row, {
+          theme: theme
+        }, _this5.state.extraColumns.map(function (column) {
+          return /*#__PURE__*/_react["default"].createElement(TableInner.Cell, {
+            theme: theme,
+            key: column.field,
+            column: column
+          }, (column.children || _this5.defaultCellRenderer)(item, column, index));
+        })))))), _this5.hasNestedRows(item) ? /*#__PURE__*/_react["default"].createElement(NestedTableHolder, {
           className: "nested-table-holder",
           style: _this5.state.viewportWidth ? {
             width: "".concat(_this5.state.viewportWidth, "px")
@@ -2268,7 +2300,13 @@ TableInner.Cell = _styledComponents["default"].td(_templateObject10 || (_templat
 }, function (props) {
   return props.maxWidth || "175px";
 });
-var ExpandToggle = _styledComponents["default"].div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  svg {\n    transform: rotate(0deg);\n    transform-origin: 50% 50%;\n    transition: transform 0.25s ease-in-out;\n  }\n\n  &.is-expanded svg {\n    transform: rotate(90deg);\n  }\n\n\n  @media (prefers-reduced-motion: reduce) {\n    svg {\n      transition: none;\n    }\n  }\n\n  path {\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    transition: stroke 0.3s ease-out;\n  }\n\n  &:hover path {\n    stroke: #60bef8;\n  }\n"])));
+var ExpandToggle = _styledComponents["default"].div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  svg {\n    transform: rotate(0deg);\n    transform-origin: 50% 50%;\n    transition: transform 0.25s ease-in-out;\n  }\n\n  &.is-expanded svg {\n    transform: rotate(", "deg);\n  }\n\n\n  @media (prefers-reduced-motion: reduce) {\n    svg {\n      transition: none;\n    }\n  }\n\n  path {\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    transition: ", " 0.3s ease-out;\n  }\n\n  &:hover path {\n    ", ": #60bef8;\n  }\n"])), function (props) {
+  return props.$preserveActionPosition ? 90 : 180;
+}, function (props) {
+  return props.$preserveActionPosition ? "stroke" : "fill";
+}, function (props) {
+  return props.$preserveActionPosition ? "stroke" : "fill";
+});
 var NestedReveal = _styledComponents["default"].div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n  overflow: hidden;\n  transition: height ", "ms ease,\n    opacity ", "ms ease;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n"])), NESTED_REVEAL_MS, NESTED_REVEAL_MS);
 var NestedRowReveal = /*#__PURE__*/function (_Component2) {
   function NestedRowReveal(props) {

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@desynova-digital/components",
-  "version": "9.3.20",
+  "version": "9.3.21",
   "description": "Components for Desynova Digital",
   "main": "index.js",
   "author": "desynova-digital",
   "license": "MIT",
   "repository": "desynova-digital",
   "dependencies": {
-    "@desynova-digital/tokens": "9.3.20",
+    "@desynova-digital/tokens": "9.3.21",
     "prop-types": "^15.7.2",
     "styled-components": "^4.3.2"
   },