@react-ui-org/react-ui 0.60.0 → 0.61.0

package/src/components/Popover/Popover.jsx

@@ -43,7 +43,7 @@ export const Popover = React.forwardRef((props, ref) => {
           getRootAlignmentClassName(placement, styles),
         )}
         ref={ref}
-        style={placementStyle ? cleanPlacementStyle(placementStyle) : null}
+        style={placementStyle ? cleanPlacementStyle(placementStyle) : undefined}
       >
         {children}
         <span className={styles.arrow} />
@@ -51,7 +51,7 @@ export const Popover = React.forwardRef((props, ref) => {
     </>
   );
 
-  if (portalId === null) {
+  if (portalId === undefined) {
     return PopoverEl;
   }
 
@@ -60,9 +60,9 @@ export const Popover = React.forwardRef((props, ref) => {
 
 Popover.defaultProps = {
   placement: 'bottom',
-  placementStyle: null,
-  popoverTargetId: null,
-  portalId: null,
+  placementStyle: undefined,
+  popoverTargetId: undefined,
+  portalId: undefined,
 };
 
 Popover.propTypes = {

package/src/components/Radio/Radio.jsx

@@ -113,14 +113,14 @@ export const Radio = ({
 
 Radio.defaultProps = {
   disabled: false,
-  helpText: null,
+  helpText: undefined,
   id: undefined,
   isLabelVisible: true,
   layout: 'vertical',
   renderAsRequired: false,
   required: false,
-  validationState: null,
-  validationText: null,
+  validationState: undefined,
+  validationText: undefined,
   value: undefined,
 };
 

package/src/components/ScrollView/ScrollView.jsx

@@ -297,7 +297,7 @@ ScrollView.defaultProps = {
   arrows: false,
   arrowsScrollStep: 200,
   autoScroll: 'off',
-  children: null,
+  children: undefined,
   debounce: 50,
   direction: 'vertical',
   endShadowBackground: 'linear-gradient(var(--rui-local-end-shadow-direction), rgba(255 255 255 / 1), rgba(255 255 255 / 0))',
@@ -305,10 +305,10 @@ ScrollView.defaultProps = {
   endShadowSize: '2em',
   id: undefined,
   nextArrowColor: undefined,
-  nextArrowElement: null,
+  nextArrowElement: undefined,
   nextArrowInitialOffset: '-0.5rem',
   prevArrowColor: undefined,
-  prevArrowElement: null,
+  prevArrowElement: undefined,
   prevArrowInitialOffset: '-0.5rem',
   scrollbar: true,
   shadows: true,

package/src/components/SelectField/SelectField.jsx

@@ -109,7 +109,7 @@ export const SelectField = React.forwardRef((props, ref) => {
             <div className={styles.bottomLine} />
           )}
         </div>
-        {helpText && (
+        {(helpText && !inputGroupContext) && (
           <div
             className={styles.helpText}
             id={id && `${id}__helpText`}
@@ -133,15 +133,15 @@ export const SelectField = React.forwardRef((props, ref) => {
 SelectField.defaultProps = {
   disabled: false,
   fullWidth: false,
-  helpText: null,
+  helpText: undefined,
   id: undefined,
   isLabelVisible: true,
   layout: 'vertical',
   renderAsRequired: false,
   required: false,
   size: 'medium',
-  validationState: null,
-  validationText: null,
+  validationState: undefined,
+  validationText: undefined,
   variant: 'outline',
 };
 
@@ -156,6 +156,9 @@ SelectField.propTypes = {
   fullWidth: PropTypes.bool,
   /**
    * Optional help text.
+   *
+   * Help text is never rendered when the component is placed into `InputGroup`.
+   * If a help text is needed, it must be defined on the `InputGroup` component instead.
    */
   helpText: PropTypes.node,
   /**
@@ -249,8 +252,8 @@ SelectField.propTypes = {
   /**
    * Validation message to be displayed.
    *
-   * Validation text is never rendered when the component is placed into `InputGroup`. Instead, the `InputGroup`
-   * component itself renders all validation texts of its nested components.
+   * Validation text is never rendered when the component is placed into `InputGroup`.
+   * If a validation text is needed, it must be defined on the `InputGroup` component instead.
    */
   validationText: PropTypes.node,
   /**

package/src/components/Table/Table.jsx

@@ -53,7 +53,7 @@ export const Table = ({
 
 Table.defaultProps = {
   id: undefined,
-  sort: null,
+  sort: undefined,
 };
 
 Table.propTypes = {

package/src/components/Table/_components/TableBodyCell/TableBodyCell.jsx

@@ -20,7 +20,7 @@ TableBodyCell.defaultProps = {
   format: undefined,
   id: undefined,
   isSortingActive: false,
-  value: null,
+  value: undefined,
 };
 
 TableBodyCell.propTypes = {

package/src/components/Table/_components/TableHeaderCell/TableHeaderCell.jsx

@@ -42,7 +42,7 @@ export const TableHeaderCell = ({
 
 TableHeaderCell.defaultProps = {
   id: undefined,
-  sort: null,
+  sort: undefined,
 };
 
 TableHeaderCell.propTypes = {

package/src/components/Tabs/TabsItem.jsx

@@ -45,11 +45,11 @@ export const TabsItem = ({
 );
 
 TabsItem.defaultProps = {
-  afterLabel: null,
-  beforeLabel: null,
+  afterLabel: undefined,
+  beforeLabel: undefined,
   id: undefined,
   isActive: false,
-  onClick: null,
+  onClick: undefined,
 };
 
 TabsItem.propTypes = {

package/src/components/Text/Text.jsx

@@ -42,7 +42,7 @@ export const Text = ({
 
 Text.defaultProps = {
   blockLevel: false,
-  children: null,
+  children: undefined,
   hyphens: 'none',
   lines: undefined,
   wordWrapping: 'normal',

package/src/components/TextArea/TextArea.jsx

@@ -93,14 +93,14 @@ export const TextArea = React.forwardRef((props, ref) => {
 TextArea.defaultProps = {
   disabled: false,
   fullWidth: false,
-  helpText: null,
+  helpText: undefined,
   id: undefined,
   isLabelVisible: true,
   layout: 'vertical',
   required: false,
   size: 'medium',
-  validationState: null,
-  validationText: null,
+  validationState: undefined,
+  validationText: undefined,
   variant: 'outline',
 };
 

package/src/components/TextField/TextField.jsx

@@ -32,7 +32,7 @@ export const TextField = React.forwardRef((props, ref) => {
   } = props;
   const formLayoutContext = useContext(FormLayoutContext);
   const inputGroupContext = useContext(InputGroupContext);
-  const hasSmallInput = (inputSize !== null) && (inputSize <= SMALL_INPUT_SIZE);
+  const hasSmallInput = (inputSize !== undefined) && (inputSize <= SMALL_INPUT_SIZE);
 
   return (
     <label
@@ -84,7 +84,7 @@ export const TextField = React.forwardRef((props, ref) => {
             <div className={styles.bottomLine} />
           )}
         </div>
-        {helpText && (
+        {(helpText && !inputGroupContext) && (
           <div
             className={styles.helpText}
             id={id && `${id}__helpText`}
@@ -108,16 +108,16 @@ export const TextField = React.forwardRef((props, ref) => {
 TextField.defaultProps = {
   disabled: false,
   fullWidth: false,
-  helpText: null,
+  helpText: undefined,
   id: undefined,
-  inputSize: null,
+  inputSize: undefined,
   isLabelVisible: true,
   layout: 'vertical',
   required: false,
   size: 'medium',
   type: 'text',
-  validationState: null,
-  validationText: null,
+  validationState: undefined,
+  validationText: undefined,
   variant: 'outline',
 };
 
@@ -132,6 +132,9 @@ TextField.propTypes = {
   fullWidth: PropTypes.bool,
   /**
    * Optional help text.
+   *
+   * Help text is never rendered when the component is placed into `InputGroup`.
+   * If a help text is needed, it must be defined on the `InputGroup` component instead.
    */
   helpText: PropTypes.node,
   /**
@@ -185,8 +188,8 @@ TextField.propTypes = {
   /**
    * Validation message to be displayed.
    *
-   * Validation text is never rendered when the component is placed into `InputGroup`. Instead, the `InputGroup`
-   * component itself renders all validation texts of its nested components.
+   * Validation text is never rendered when the component is placed into `InputGroup`.
+   * If a validation text is needed, it must be defined on the `InputGroup` component instead.
    */
   validationText: PropTypes.node,
   /**

package/src/components/Toggle/Toggle.jsx

@@ -81,14 +81,14 @@ export const Toggle = React.forwardRef((props, ref) => {
 
 Toggle.defaultProps = {
   disabled: false,
-  helpText: null,
+  helpText: undefined,
   id: undefined,
   isLabelVisible: true,
   labelPosition: 'after',
   renderAsRequired: false,
   required: false,
-  validationState: null,
-  validationText: null,
+  validationState: undefined,
+  validationText: undefined,
 };
 
 Toggle.propTypes = {

package/src/components/Toolbar/Toolbar.jsx

@@ -38,7 +38,7 @@ export const Toolbar = ({
 
 Toolbar.defaultProps = {
   align: 'top',
-  children: null,
+  children: undefined,
   dense: false,
   justify: 'start',
   nowrap: false,

package/src/components/Toolbar/ToolbarGroup.jsx

@@ -35,7 +35,7 @@ export const ToolbarGroup = ({
 
 ToolbarGroup.defaultProps = {
   align: 'top',
-  children: null,
+  children: undefined,
   dense: false,
   nowrap: false,
 };

package/src/components/Toolbar/ToolbarItem.jsx

@@ -29,7 +29,7 @@ export const ToolbarItem = ({
 };
 
 ToolbarItem.defaultProps = {
-  children: null,
+  children: undefined,
   flexible: false,
 };
 

package/src/providers/globalProps/GlobalPropsProvider.jsx

@@ -21,7 +21,7 @@ const GlobalPropsProvider = ({
 };
 
 GlobalPropsProvider.defaultProps = {
-  children: null,
+  children: undefined,
   globalProps: {},
 };
 

package/src/providers/translations/TranslationsProvider.jsx

@@ -21,7 +21,7 @@ const TranslationsProvider = ({
 };
 
 TranslationsProvider.defaultProps = {
-  children: null,
+  children: undefined,
   translations: {},
 };
 

package/src/styles/settings/_breakpoints.scss

@@ -1,3 +1,5 @@
+// Keep this file in sync with values in `tests/playwright/constants/breakpoints.ts`
+
 $values: (
     xs: 0,
     sm: 36em,

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": false,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src",
+    "tests"
+  ]
+}