carbon-react 102.5.0 → 102.6.0

package/lib/components/inline-inputs/inline-inputs.component.js

@@ -9,11 +9,9 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _row = require("../row");
-
 var _label = _interopRequireDefault(require("../../__internal__/label"));
 
-var _inlineInputs = _interopRequireDefault(require("./inline-inputs.style"));
+var _inlineInputs = _interopRequireWildcard(require("./inline-inputs.style"));
 
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 
@@ -23,9 +21,7 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-const columnWrapper = children => {
+const columnWrapper = (children, gutter) => {
   let inputs = children;
 
   if (!Array.isArray(inputs)) {
@@ -36,8 +32,10 @@ const columnWrapper = children => {
     // Input is never going to be re-ordered so we don't require a defined key
 
     /* eslint-disable react/no-array-index-key */
-    return /*#__PURE__*/_react.default.createElement(_row.Column, {
-      key: index
+    return /*#__PURE__*/_react.default.createElement(_inlineInputs.StyledInlineInput, {
+      key: index,
+      gutter: gutter,
+      "data-element": "inline-input"
     }, input);
   });
 };
@@ -53,14 +51,6 @@ const InlineInputs = props => {
     labelWidth
   } = props;
   const labelId = (0, _react.useRef)((0, _guid.default)());
-  const widthProps = {
-    inputWidth
-  };
-
-  if (labelWidth) {
-    widthProps.labelWidth = labelWidth;
-    widthProps.inputWidth = inputWidth || 100 - labelWidth;
-  }
 
   function renderLabel() {
     if (!label) return null;
@@ -78,13 +68,16 @@ const InlineInputs = props => {
     }));
   }
 
-  return /*#__PURE__*/_react.default.createElement(_inlineInputs.default, _extends({
+  return /*#__PURE__*/_react.default.createElement(_inlineInputs.default, {
     gutter: gutter,
     "data-component": "inline-inputs",
-    className: className
-  }, widthProps), renderLabel(), /*#__PURE__*/_react.default.createElement(_row.Row, {
-    gutter: gutter
-  }, columnWrapper(renderChildren())));
+    className: className,
+    labelWidth: labelWidth
+  }, renderLabel(), /*#__PURE__*/_react.default.createElement(_inlineInputs.StyledContentContainer, {
+    gutter: gutter,
+    "data-element": "inline-inputs-container",
+    inputWidth: inputWidth
+  }, columnWrapper(renderChildren(), gutter)));
 }; // Assign props over for demo site
 
 

package/lib/components/inline-inputs/inline-inputs.style.js

@@ -3,14 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.StyledInlineInput = exports.StyledContentContainer = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _row = _interopRequireDefault(require("../row/row.style"));
-
-var _column = _interopRequireDefault(require("../row/column/column.style"));
-
 var _inputPresentation = _interopRequireDefault(require("../../__internal__/input/input-presentation.style"));
 
 var _label = require("../../__internal__/label/label.style");
@@ -33,20 +29,46 @@ const spacings = {
   large: 32,
   "extra-large": 40
 };
-const StyledInlineInputs = _styledComponents.default.div`
-  display: flex;
-  align-items: center;
+const StyledInlineInput = _styledComponents.default.div`
+  flex: 1;
 
   ${({
+  gutter
+}) => (0, _styledComponents.css)`
+      margin-bottom: 0;
+      padding-left: ${spacings[gutter]}px;
+    `}
+`;
+exports.StyledInlineInput = StyledInlineInput;
+const StyledContentContainer = _styledComponents.default.div`
+  display: flex;
+  flex: ${({
   inputWidth
-}) => inputWidth && `
-    flex: 0 0 ${inputWidth}%;
-  `}
+}) => inputWidth ? `0 0 ${inputWidth}%` : 1};
+
+  ${({
+  gutter
+}) => (0, _styledComponents.css)`
+      margin-bottom: 0;
+      margin-left: -${spacings[gutter]}px;
+
+      ${gutter === "none" && (0, _styledComponents.css)`
+        ${StyledInlineInput} + ${StyledInlineInput} ${_inputPresentation.default} {
+          border-left: none;
+        }
+      `}
+    `}
+`;
+exports.StyledContentContainer = StyledContentContainer;
+const StyledInlineInputs = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
 
   ${_label.StyledLabelContainer} {
+    width: auto;
     margin-bottom: 0;
     padding-right: 16px;
-    width: ${({
+    flex: 0 0 ${({
   labelWidth
 }) => labelWidth ? `${labelWidth}%` : "auto"};
   }
@@ -58,30 +80,6 @@ const StyledInlineInputs = _styledComponents.default.div`
   [data-component="carbon-select"] input {
     width: 30px;
   }
-
-  ${_row.default} {
-    flex-grow: 1;
-  }
-
-  ${({
-  gutter
-}) => (0, _styledComponents.css)`
-      ${_row.default} {
-        margin-bottom: 0;
-        margin-left: -${spacings[gutter]}px;
-
-        > ${_column.default} {
-          margin-bottom: 0;
-          padding-left: ${spacings[gutter]}px;
-        }
-      }
-
-      ${gutter === "none" && (0, _styledComponents.css)`
-        ${_column.default} + ${_column.default} ${_inputPresentation.default} {
-          border-left: none;
-        }
-      `}
-    `}
 `;
 StyledInlineInputs.defaultProps = {
   theme: _base.default

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "102.5.0",
+  "version": "102.6.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {