@dxc-technology/halstack-react 6.2.2 → 7.0.0

package/quick-nav/QuickNav.stories.tsx

@@ -11,33 +11,60 @@ export default {
   component: DxcQuickNav,
 };
 
+const defaultLinks = [
+  {
+    label: "Overview",
+  },
+  {
+    label: "Principles",
+    links: [{ label: "Color" }, { label: "Spacing" }, { label: "Typography" }],
+  },
+  {
+    label: "Components",
+    links: [
+      {
+        label: "Accordion",
+      },
+      {
+        label: "Button",
+      },
+    ],
+  },
+];
+
 const links = [
   {
     label: "Overview",
-    id: "overview",
     links: [
       {
         label: "Introduction",
-        id: "introduction",
+      },
+    ],
+  },
+  {
+    label: "Components",
+    links: [
+      {
+        label: "Introduction",
+      },
+      {
+        label: "Accordion",
       },
     ],
   },
   {
     label: "Principles very very very very very very very very long",
-    id: "principles",
     links: [
-      { label: "Color very very very very very very very very long", id: "color" },
-      { label: "Spacingveryveryveryveryveryveryveryverylong", id: "spacing" },
-      { label: "Typography", id: "typography" },
+      { label: "Color very very very very very very very very long" },
+      { label: "Spacingveryveryveryveryveryveryveryverylong" },
+      { label: "Typography" },
     ],
   },
   {
     label: "Componentsveryveryveryveryveryveryveryverylong",
-    id: "components",
     links: [
       {
         label: "Accordion",
-        id: "accordion",
       },
     ],
   },
@@ -48,19 +75,25 @@ export const Chromatic = () => (
     <ExampleContainer>
       <Title title="Default" level={4} />
       <QuickNavContainer>
-        <DxcQuickNav links={links}></DxcQuickNav>
+        <DxcQuickNav links={defaultLinks} />
+      </QuickNavContainer>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Text overflow" level={4} />
+      <QuickNavContainer>
+        <DxcQuickNav links={links} />
       </QuickNavContainer>
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-hover">
       <Title title="Link hovered" level={4} />
       <QuickNavContainer>
-        <DxcQuickNav links={links}></DxcQuickNav>
+        <DxcQuickNav links={links} />
       </QuickNavContainer>
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-focus">
       <Title title="Link focus" level={4} />
       <QuickNavContainer>
-        <DxcQuickNav links={links}></DxcQuickNav>
+        <DxcQuickNav links={links} />
       </QuickNavContainer>
     </ExampleContainer>
     <ExampleContainer>
@@ -87,7 +120,44 @@ export const Chromatic = () => (
               open source design system for insurance products and digital experiences. Our system provides all the
               tools and resources needed to create superior, beautiful but above all, functional user experiences.
             </DxcParagraph>
-            <Content id="introduction">
+            <Content id="overview-introduction">
+              <DxcHeading level={2} text="Introduction" margin={{ top: "xsmall", bottom: "xsmall" }} />
+              <DxcParagraph>
+                Design principles Halstack design principles are the fundamental part of DXC Technology's approach to
+                provide guidance for development teams in order to deliver delightful and consistent user experiences to
+                our customers: Balance Consistency Visual hierarchy All our components, design tokens, accessibility
+                guidelines, responsive design techniques, and layout proposals have been carefully curated by DXC design
+                and engineering teams with the objective of creating a unique visual language and ecosystem for our
+                applications. This is the DXC way of creating User Experiences. Open Source Halstack is an open source
+                design system, this means that we work towards DXC Technology bussines needs, but it is open for anyone
+                to use and contribute back to. We are charmed to receive external contributions to help us find bugs,
+                design new features, or help us improve the project documentation. If you're interested, definitely
+                check out our contribution guidelines.Design principles Halstack design principles are the fundamental
+                part of DXC Technology's approach to provide guidance for development teams in order to deliver
+                delightful and consistent user experiences to our customers: Balance Consistency Visual hierarchy All
+                our components, design tokens, accessibility guidelines, responsive design techniques, and layout
+                proposals have been carefully curated by DXC design and engineering teams with the objective of creating
+                a unique visual language and ecosystem for our applications. This is the DXC way of creating User
+                Experiences. Open Source Halstack is an open source design system, this means that we work towards DXC
+                Technology bussines needs, but it is open for anyone to use and contribute back to. We are charmed to
+                receive external contributions to help us find bugs, design new features, or help us improve the project
+                documentation. If you're interested, definitely check out our contribution guidelines.Design principles
+                Halstack design principles are the fundamental part of DXC Technology's approach to provide guidance for
+                development teams in order to deliver delightful and consistent user experiences to our customers:
+                Balance Consistency Visual hierarchy All our components, design tokens, accessibility guidelines,
+                responsive design techniques, and layout proposals have been carefully curated by DXC design and
+                engineering teams with the objective of creating a unique visual language and ecosystem for our
+                applications. This is the DXC way of creating User Experiences. Open Source Halstack is an open source
+                design system, this means that we work towards DXC Technology bussines needs, but it is open for anyone
+                to use and contribute back to. We are charmed to receive external contributions to help us find bugs,
+                design new features, or help us improve the project documentation. If you're interested, definitely
+                check out our contribution guidelines.
+              </DxcParagraph>
+            </Content>
+          </Content>
+          <Content id="components">
+            <DxcHeading level={1} text="Components" margin={{ top: "small", bottom: "xsmall" }} />
+            <Content id="components-introduction">
               <DxcHeading level={2} text="Introduction" margin={{ top: "xsmall", bottom: "xsmall" }} />
               <DxcParagraph>
                 Design principles Halstack design principles are the fundamental part of DXC Technology's approach to
@@ -121,10 +191,18 @@ export const Chromatic = () => (
                 check out our contribution guidelines.
               </DxcParagraph>
             </Content>
+            <Content id="components-accordion">
+              <DxcHeading level={2} text="Accordion" margin={{ top: "xsmall", bottom: "xsmall" }} />
+              <DxcParagraph>
+                Accordions are used to group similar content and hide or show it depending on user needs or preferences.
+                Accordions give users more granular control over the interface and help digest content in stages, rather
+                than all at once.
+              </DxcParagraph>
+            </Content>
           </Content>
-          <Content id="principles">
+          <Content id="principles-very-very-very-very-very-very-very-very-long">
             <DxcHeading level={1} text="Principles" margin={{ top: "small", bottom: "xsmall" }} />
-            <Content id="color">
+            <Content id="principles-very-very-very-very-very-very-very-very-long-color-very-very-very-very-very-very-very-very-long">
               <DxcHeading level={2} text="Color" margin={{ top: "xsmall", bottom: "xsmall" }} />
               <DxcParagraph>
                 The color palette is an essential asset as a communication resource of our design system. Halstack color
@@ -161,7 +239,7 @@ export const Chromatic = () => (
                 role-based color palettes and must not be used outside this context.
               </DxcParagraph>
             </Content>
-            <Content id="spacing">
+            <Content id="principles-very-very-very-very-very-very-very-very-long-spacingveryveryveryveryveryveryveryverylong">
               <DxcHeading level={2} text="Spacing" margin={{ top: "xsmall", bottom: "xsmall" }} />
               <DxcParagraph>
                 In the search of consistent alignment between the elements we provide a spacing scale based on a root
@@ -183,7 +261,7 @@ export const Chromatic = () => (
                 easily multiplied, they provide flexible and consistent, yet distinct enough, steps between them.
               </DxcParagraph>
             </Content>
-            <Content id="typography">
+            <Content id="principles-very-very-very-very-very-very-very-very-long-typography">
               <DxcHeading level={2} text="Typography" margin={{ top: "xsmall", bottom: "xsmall" }} />
               <DxcParagraph>
                 Our selected typography helps in structuring our user's experience based on the visual impact that it
@@ -220,9 +298,9 @@ export const Chromatic = () => (
               </DxcParagraph>
             </Content>
           </Content>
-          <Content id="components">
+          <Content id="componentsveryveryveryveryveryveryveryverylong">
             <DxcHeading level={1} text="Components" margin={{ top: "small", bottom: "xsmall" }} />
-            <Content id="accordion">
+            <Content id="componentsveryveryveryveryveryveryveryverylong-accordion">
               <DxcHeading level={2} text="Accordion" margin={{ top: "xsmall", bottom: "xsmall" }} />
               <DxcParagraph>
                 Accordions are used to group similar content and hide or show it depending on user needs or preferences.
@@ -233,7 +311,7 @@ export const Chromatic = () => (
           </Content>
         </ContentContainer>
         <QuickNavContainer>
-          <DxcQuickNav title="Sections" links={links}></DxcQuickNav>
+          <DxcQuickNav title="Sections" links={links} />
         </QuickNavContainer>
       </Container>
     </ExampleContainer>

package/radio-group/RadioGroup.js

@@ -27,7 +27,7 @@ var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabel
 
 var _Radio = _interopRequireDefault(require("./Radio"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -198,10 +198,12 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
     "aria-required": !disabled && !readonly && !optional,
     "aria-readonly": readonly,
     "aria-orientation": stacking === "column" ? "vertical" : "horizontal"
-  }, /*#__PURE__*/_react["default"].createElement("input", {
-    type: "hidden",
+  }, /*#__PURE__*/_react["default"].createElement(ValueInput, {
     name: name,
-    value: (_ref2 = value !== null && value !== void 0 ? value : innerValue) !== null && _ref2 !== void 0 ? _ref2 : ""
+    disabled: disabled,
+    value: (_ref2 = value !== null && value !== void 0 ? value : innerValue) !== null && _ref2 !== void 0 ? _ref2 : "",
+    readOnly: true,
+    "aria-hidden": "true"
   }), innerOptions.map(function (option, index) {
     return /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
       key: "radio-".concat(index),
@@ -269,7 +271,9 @@ var RadioGroup = _styledComponents["default"].div(_templateObject5 || (_template
   return props.theme.groupHorizontalGutter;
 });
 
-var Error = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  min-height: 1.5em;\n  color: ", ";\n  font-family: ", ";\n  font-size: 0.75rem;\n  font-weight: 400;\n  line-height: 1.5em;\n  margin-top: 0.5rem;\n"])), function (props) {
+var ValueInput = _styledComponents["default"].input(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  display: none;\n"])));
+
+var Error = _styledComponents["default"].span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  min-height: 1.5em;\n  color: ", ";\n  font-family: ", ";\n  font-size: 0.75rem;\n  font-weight: 400;\n  line-height: 1.5em;\n  margin-top: 0.5rem;\n"])), function (props) {
   return props.theme.errorMessageColor;
 }, function (props) {
   return props.theme.fontFamily;

package/radio-group/RadioGroup.test.js

@@ -90,14 +90,46 @@ describe("Radio Group component tests", function () {
     var radioGroup = getByRole("radiogroup");
     expect(radioGroup.getAttribute("aria-orientation")).toBe("horizontal");
   });
+  test("Sends its value when submitted", function () {
+    var handlerOnSubmit = jest.fn(function (e) {
+      e.preventDefault();
+      var formData = new FormData(e.target);
+      var formProps = Object.fromEntries(formData);
+      expect(formProps).toStrictEqual({
+        radiogroup: "5"
+      });
+    });
+
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement("form", {
+      onSubmit: handlerOnSubmit
+    }, /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+      name: "radiogroup",
+      label: "test-radio-group-label",
+      options: options
+    }), /*#__PURE__*/_react["default"].createElement("button", {
+      type: "submit"
+    }, "Submit"))),
+        getByText = _render3.getByText,
+        getByRole = _render3.getByRole,
+        getAllByRole = _render3.getAllByRole;
+
+    var radioGroup = getByRole("radiogroup");
+    var submit = getByText("Submit");
+
+    _userEvent["default"].click(radioGroup);
+
+    _userEvent["default"].click(getAllByRole("radio")[4]);
+
+    _userEvent["default"].click(submit);
+  });
   test("Disabled state renders with correct aria attribute, correct tabIndex values and it is not focusable by keyboard", function () {
-    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
       label: "test-radioGroup-label",
       options: options,
       disabled: true
     })),
-        getByRole = _render3.getByRole,
-        getAllByRole = _render3.getAllByRole;
+        getByRole = _render4.getByRole,
+        getAllByRole = _render4.getAllByRole;
 
     var radioGroup = getByRole("radiogroup");
     var radios = getAllByRole("radio");
@@ -132,13 +164,13 @@ describe("Radio Group component tests", function () {
     });
   });
   test("Disabled option renders with correct aria attribute, correct tabIndex value and it is not focusable by keyboard (focus 'jumps' the disabled option)", function () {
-    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
       name: "test",
       label: "test-radioGroup-label",
       options: singleDisabledOptions
     })),
-        getByRole = _render4.getByRole,
-        getAllByRole = _render4.getAllByRole;
+        getByRole = _render5.getByRole,
+        getAllByRole = _render5.getAllByRole;
 
     var radioGroup = getByRole("radiogroup");
     var radios = getAllByRole("radio");
@@ -165,14 +197,39 @@ describe("Radio Group component tests", function () {
     expect(radios[1].tabIndex).toBe(-1);
     expect(radios[2].tabIndex).toBe(-1);
   });
+  test("Disabled radio group doesn't send its value when submitted", function () {
+    var handlerOnSubmit = jest.fn(function (e) {
+      e.preventDefault();
+      var formData = new FormData(e.target);
+      var formProps = Object.fromEntries(formData);
+      expect(formProps).toStrictEqual({});
+    });
+
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement("form", {
+      onSubmit: handlerOnSubmit
+    }, /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+      name: "radiogroup",
+      defaultValue: "1",
+      disabled: true,
+      label: "test-radio-group-label",
+      options: options
+    }), /*#__PURE__*/_react["default"].createElement("button", {
+      type: "submit"
+    }, "Submit"))),
+        getByText = _render6.getByText;
+
+    var submit = getByText("Submit");
+
+    _userEvent["default"].click(submit);
+  });
   test("Error state renders with correct aria attributes", function () {
-    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
       label: "test-radioGroup-label",
       options: options,
       error: "Error message"
     })),
-        getByRole = _render5.getByRole,
-        getByText = _render5.getByText;
+        getByRole = _render7.getByRole,
+        getByText = _render7.getByText;
 
     var radioGroup = getByRole("radiogroup");
     var errorMessage = getByText("Error message");
@@ -184,14 +241,14 @@ describe("Radio Group component tests", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
 
-    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
       label: "test-radioGroup-label",
       options: options,
       onChange: onChange,
       onBlur: onBlur
     })),
-        getByRole = _render6.getByRole,
-        getAllByRole = _render6.getAllByRole;
+        getByRole = _render8.getByRole,
+        getAllByRole = _render8.getAllByRole;
 
     var radioGroup = getByRole("radiogroup");
     expect(radioGroup.getAttribute("aria-required")).toBe("true");
@@ -218,15 +275,15 @@ describe("Radio Group component tests", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
 
-    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
       label: "test-radioGroup-label",
       value: "",
       options: options,
       onChange: onChange,
       onBlur: onBlur
     })),
-        getByRole = _render7.getByRole,
-        getAllByRole = _render7.getAllByRole;
+        getByRole = _render9.getByRole,
+        getAllByRole = _render9.getAllByRole;
 
     var radioGroup = getByRole("radiogroup");
     expect(radioGroup.getAttribute("aria-required")).toBe("true");
@@ -245,7 +302,7 @@ describe("Radio Group component tests", function () {
   test("The 'defaultValue' gives the radio group an initial value when it is uncontrolled", function () {
     var onChange = jest.fn();
 
-    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
       defaultValue: "2",
       name: "test",
       label: "test-radio-group-label",
@@ -253,8 +310,8 @@ describe("Radio Group component tests", function () {
       options: options,
       onChange: onChange
     })),
-        getAllByRole = _render8.getAllByRole,
-        container = _render8.container;
+        getAllByRole = _render10.getAllByRole,
+        container = _render10.container;
 
     var radio = getAllByRole("radio")[1];
     var submitInput = container.querySelector("input[name=\"test\"]");
@@ -266,7 +323,7 @@ describe("Radio Group component tests", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
 
-    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
       name: "test",
       label: "test-radio-group-label",
       helperText: "test-radio-group-helper-text",
@@ -276,9 +333,9 @@ describe("Radio Group component tests", function () {
       optional: true,
       optionalItemLabel: "No selection"
     })),
-        getByRole = _render9.getByRole,
-        getByText = _render9.getByText,
-        container = _render9.container;
+        getByRole = _render11.getByRole,
+        getByText = _render11.getByText,
+        container = _render11.container;
 
     var radioGroup = getByRole("radiogroup");
     expect(radioGroup.getAttribute("aria-required")).toBe("false");
@@ -299,7 +356,7 @@ describe("Radio Group component tests", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
 
-    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
       name: "test",
       value: "2",
       label: "test-radio-group-label",
@@ -308,9 +365,9 @@ describe("Radio Group component tests", function () {
       onChange: onChange,
       onBlur: onBlur
     })),
-        getByRole = _render10.getByRole,
-        getAllByRole = _render10.getAllByRole,
-        container = _render10.container;
+        getByRole = _render12.getByRole,
+        getAllByRole = _render12.getAllByRole,
+        container = _render12.container;
 
     var radioGroup = getByRole("radiogroup");
     var radios = getAllByRole("radio");
@@ -332,16 +389,16 @@ describe("Radio Group component tests", function () {
   test("Select an option by clicking on its label", function () {
     var onChange = jest.fn();
 
-    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
       name: "test",
       label: "test-radio-group-label",
       helperText: "test-radio-group-helper-text",
       options: options,
       onChange: onChange
     })),
-        getByText = _render11.getByText,
-        getAllByRole = _render11.getAllByRole,
-        container = _render11.container;
+        getByText = _render13.getByText,
+        getAllByRole = _render13.getAllByRole,
+        container = _render13.container;
 
     var radioLabel = getByText("Option 09");
     var checkedRadio = getAllByRole("radio")[8];
@@ -359,15 +416,15 @@ describe("Radio Group component tests", function () {
   test("Select an option by clicking on its radio input", function () {
     var onChange = jest.fn();
 
-    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
       name: "test",
       label: "test-radio-group-label",
       helperText: "test-radio-group-helper-text",
       options: options,
       onChange: onChange
     })),
-        getAllByRole = _render12.getAllByRole,
-        container = _render12.container;
+        getAllByRole = _render14.getAllByRole,
+        container = _render14.container;
 
     var checkedRadio = getAllByRole("radio")[6];
     var submitInput = container.querySelector("input[name=\"test\"]");
@@ -384,7 +441,7 @@ describe("Radio Group component tests", function () {
   test("Select an option that is already checked does not call onChange event but gives the focus", function () {
     var onChange = jest.fn();
 
-    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
       defaultValue: "2",
       name: "test",
       label: "test-radio-group-label",
@@ -392,7 +449,7 @@ describe("Radio Group component tests", function () {
       options: options,
       onChange: onChange
     })),
-        getAllByRole = _render13.getAllByRole;
+        getAllByRole = _render15.getAllByRole;
 
     var checkedRadio = getAllByRole("radio")[1];
     expect(checkedRadio.tabIndex).toBe(0);
@@ -406,16 +463,16 @@ describe("Radio Group component tests", function () {
   test("The 'space' key checks the current focused option if anyone is checked", function () {
     var onChange = jest.fn();
 
-    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
       name: "test",
       label: "test-radio-group-label",
       helperText: "test-radio-group-helper-text",
       options: options,
       onChange: onChange
     })),
-        getByRole = _render14.getByRole,
-        getAllByRole = _render14.getAllByRole,
-        container = _render14.container;
+        getByRole = _render16.getByRole,
+        getAllByRole = _render16.getAllByRole,
+        container = _render16.container;
 
     var radioGroup = getByRole("radiogroup");
     var checkedRadio = getAllByRole("radio")[0];
@@ -437,7 +494,7 @@ describe("Radio Group component tests", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
 
-    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
       name: "test",
       label: "test-radio-group-label",
       helperText: "test-radio-group-helper-text",
@@ -445,9 +502,9 @@ describe("Radio Group component tests", function () {
       onChange: onChange,
       onBlur: onBlur
     })),
-        getByRole = _render15.getByRole,
-        getAllByRole = _render15.getAllByRole,
-        container = _render15.container;
+        getByRole = _render17.getByRole,
+        getAllByRole = _render17.getAllByRole,
+        container = _render17.container;
 
     var radioGroup = getByRole("radiogroup");
     var radios = getAllByRole("radio");
@@ -480,7 +537,7 @@ describe("Radio Group component tests", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
 
-    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
       defaultValue: "8",
       name: "test",
       label: "test-radio-group-label",
@@ -489,9 +546,9 @@ describe("Radio Group component tests", function () {
       onChange: onChange,
       onBlur: onBlur
     })),
-        getByRole = _render16.getByRole,
-        getAllByRole = _render16.getAllByRole,
-        container = _render16.container;
+        getByRole = _render18.getByRole,
+        getAllByRole = _render18.getAllByRole,
+        container = _render18.container;
 
     var radioGroup = getByRole("radiogroup");
     var radios = getAllByRole("radio");
@@ -529,7 +586,7 @@ describe("Radio Group component tests", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
 
-    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
       defaultValue: "2",
       name: "test",
       label: "test-radio-group-label",
@@ -538,9 +595,9 @@ describe("Radio Group component tests", function () {
       onChange: onChange,
       onBlur: onBlur
     })),
-        getByRole = _render17.getByRole,
-        getAllByRole = _render17.getAllByRole,
-        container = _render17.container;
+        getByRole = _render19.getByRole,
+        getAllByRole = _render19.getAllByRole,
+        container = _render19.container;
 
     var radioGroup = getByRole("radiogroup");
     var radios = getAllByRole("radio");
@@ -577,16 +634,16 @@ describe("Radio Group component tests", function () {
   test("Keyboard focus movement continues from the last radio input clicked", function () {
     var onChange = jest.fn();
 
-    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
       name: "test",
       label: "test-radio-group-label",
       helperText: "test-radio-group-helper-text",
       options: options,
       onChange: onChange
     })),
-        getByRole = _render18.getByRole,
-        getAllByRole = _render18.getAllByRole,
-        container = _render18.container;
+        getByRole = _render20.getByRole,
+        getAllByRole = _render20.getAllByRole,
+        container = _render20.container;
 
     var radioGroup = getByRole("radiogroup");
     var radios = getAllByRole("radio");
@@ -625,7 +682,7 @@ describe("Radio Group component tests", function () {
   test("Readonly radio group lets the user move the focus, but neither click nor keyboard press changes the value", function () {
     var onChange = jest.fn();
 
-    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
       name: "test",
       label: "test-radio-group-label",
       helperText: "test-radio-group-helper-text",
@@ -633,9 +690,9 @@ describe("Radio Group component tests", function () {
       onChange: onChange,
       readonly: true
     })),
-        getByRole = _render19.getByRole,
-        getAllByRole = _render19.getAllByRole,
-        container = _render19.container;
+        getByRole = _render21.getByRole,
+        getAllByRole = _render21.getAllByRole,
+        container = _render21.container;
 
     var radioGroup = getByRole("radiogroup");
     var radios = getAllByRole("radio");

package/resultsetTable/ResultsetTable.js

@@ -214,9 +214,7 @@ var TableContainer = _styledComponents["default"].div(_templateObject || (_templ
 
 var PaginatorContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])([""])));
 
-var TableRowGroup = _styledComponents["default"].tbody(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  > div:nth-child(1) {\n    position: absolute;\n    left: calc(50% - 68.5px);\n    bottom: calc(50% - 68.5px - 30px);\n  }\n  & tr {\n    height: ", ";\n  }\n"])), function (props) {
-  return props.theme.rowHeight || "70px";
-});
+var TableRowGroup = _styledComponents["default"].tbody(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  > div:nth-child(1) {\n    position: absolute;\n    left: calc(50% - 68.5px);\n    bottom: calc(50% - 68.5px - 30px);\n  }\n"])));
 
 var SortIcon = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  top: 409px;\n  left: 390px;\n  height: 14px;\n  cursor: pointer;\n  color: ", ";\n\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"])), function (props) {
   return props.theme.sortIconColor;