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

package/src/components/InputGroup/README.md

@@ -60,13 +60,14 @@ See [API](#api) for all available options.
   Make sure your inputs fit their container, especially on small screens.
 
 - In the background, InputGroup uses the [`fieldset`][fieldset] element. Not
-  only it improves the [accessibility] of the group, it also allows you to make
-  use of its built-in features like disabling all nested inputs or pairing the
-  group with a form outside. Consult [the MDN docs][fieldset] to learn more.
+  only does it improve the [accessibility] of the group, it also allows you to
+  make use of its built-in features like disabling all nested inputs or pairing
+  the group with a form outside. Consult [the MDN docs][fieldset] to learn more.
 
 - InputGroup currently **supports grouping of**
   [TextField](/components/TextField), [SelectField](/components/SelectField),
-  and [Button](/components/Button) components.
+  [FileInputField](/components/FileInputField), and [Button](/components/Button)
+  components.
 
 - To group [Buttons](/components/Button) only, use the
   [ButtonGroup](/components/ButtonGroup) component which is designed
@@ -104,7 +105,7 @@ You can set the `size` property directly on InputGroup to be shared for all
 fields and buttons inside the group. This property is then passed over to
 individual elements. At the same time, it **cannot be overridden** on the
 fields' or buttons' level. While technically possible, from the design point of
-view it's undesirable to group elements of totally different types or sizes.
+view, it's undesirable to group elements of totally different types or sizes.
 
 ## Invisible Label
 
@@ -136,9 +137,9 @@ the input.
 
 ## Horizontal layout
 
-The default vertical layout is very easy to use and work with. However, there
-are situations where horizontal layout suits better — and that's why React UI
-supports this kind of layout as well.
+The default vertical layout is straightforward to use and work with. However,
+there are situations where horizontal layout suits better — and that's why
+React UI supports this kind of layout as well.
 
 ```docoff-react-preview
 <InputGroup
@@ -150,6 +151,57 @@ supports this kind of layout as well.
 </InputGroup>
 ```
 
+## Help Text
+
+You may provide one or more additional help texts to clarify how the input group
+should be filled.
+
+These messages are not semantically tied to the `children` elements, the
+connection should be expressed in textual form in the actual message.
+
+⚠️ Help texts passed to input elements' `helpText` prop are ignored within
+InputGroup.
+
+```docoff-react-preview
+React.createElement(() => {
+  const [fruit, setFruit] = React.useState('apple');
+  const options = [
+    {
+      label: 'Apple',
+      value: 'apple',
+    },
+    {
+      label: 'Pear',
+      value: 'pear',
+    },
+    {
+      label: 'Cherry',
+      value: 'cherry',
+    },
+  ];
+  return (
+    <InputGroup
+      label="Your favourite fruit"
+      helpTexts={[
+        "Choose one or more kinds of fruit to feel happy.",
+      ]}
+    >
+      <SelectField
+        label="Your favourite fruit"
+        onChange={(e) => setFruit(e.target.value)}
+        options={options}
+        value={fruit}
+      />
+      <TextField
+        label="Variety"
+        placeholder="Eg. Golden delicious"
+      />
+      <Button label="Submit" />
+    </InputGroup>
+  );
+})
+```
+
 ## States
 
 ### Disabled State
@@ -169,12 +221,15 @@ Validation states visually present the result of validation of the grouped
 inputs. Input group's validation state is taken from its child inputs. You
 should always **provide validation messages for states other than valid**
 directly through `validationTexts` prop so users know what happened and what
-action they should take or what options they have. These messages are not
-semantically tied to the `children` elements, the connection should be expressed
-in textual form in the actual message. The individual `children` elements must
-not show any `validationText`, they only show their respective `validationState`.
-Validation messages passed to input elements' `validationText` prop will be
-ignored.
+action they should take or what options they have.
+
+These messages are not semantically tied to the `children` elements, the
+connection should be expressed in textual form in the actual message. The
+individual `children` elements must not show any `validationText`, they only
+show their respective `validationState`.
+
+⚠️ Validation messages passed to input elements' `validationText` prop are
+ignored within InputGroup.
 
 👉 While there is a `required` property to visually denote the whole input group
 is required, there is no functional effect as there is no such HTML attribute

package/src/components/Modal/Modal.jsx

@@ -76,7 +76,12 @@ export const Modal = ({
   useModalScrollPrevention(preventScrollUnderneath);
 
   const onCancel = useCallback(
-    (e) => dialogOnCancelHandler(e, closeButtonRef, restProps.onCancel),
+    (e) => {
+      if (e.target !== internalDialogRef.current) {
+        return;
+      }
+      dialogOnCancelHandler(e, closeButtonRef, restProps.onCancel);
+    },
     [closeButtonRef, restProps.onCancel],
   );
   const onClick = useCallback(
@@ -121,7 +126,7 @@ export const Modal = ({
     onMouseDown,
   };
 
-  if (portalId === null) {
+  if (portalId === undefined) {
     return preRender(
       children,
       color,
@@ -152,14 +157,14 @@ Modal.defaultProps = {
   allowCloseOnEscapeKey: true,
   allowPrimaryActionOnEnterKey: true,
   autoFocus: true,
-  children: null,
-  closeButtonRef: null,
+  children: undefined,
+  closeButtonRef: undefined,
   color: undefined,
-  dialogRef: null,
-  portalId: null,
+  dialogRef: undefined,
+  portalId: undefined,
   position: 'center',
   preventScrollUnderneath: window.document.body,
-  primaryButtonRef: null,
+  primaryButtonRef: undefined,
   size: 'medium',
 };
 

package/src/components/Modal/ModalBody.jsx

@@ -30,7 +30,7 @@ export const ModalBody = ({
 };
 
 ModalBody.defaultProps = {
-  children: null,
+  children: undefined,
   scrolling: 'auto',
 };
 

package/src/components/Modal/ModalContent.jsx

@@ -24,7 +24,7 @@ export const ModalContent = ({
 };
 
 ModalContent.defaultProps = {
-  children: null,
+  children: undefined,
 };
 
 ModalContent.propTypes = {

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/README.md

@@ -405,10 +405,10 @@ to improve its accessibility.
 Head to [Forms Theming](/docs/customize/theming/forms) to see shared form theming
 options. On top of that, the following options are available for Radio.
 
-| Custom Property                                                    | Description                                    |
-|--------------------------------------------------------------------|------------------------------------------------|
-| `--rui-FormField--check__input--radio__border-radius`              | Input corner radius                            |
-| `--rui-FormField--check__input--radio--checked__background-image` | Checked input background image (inline, URL, …) |
+| Custom Property                                                    | Description                                      |
+|--------------------------------------------------------------------|--------------------------------------------------|
+| `--rui-FormField--check__input--radio__border-radius`              | Input corner radius                              |
+| `--rui-FormField--check__input--radio--checked__background-image`  | Checked input background image (inline, URL, …)  |
 
 [accessibility]: https://www.w3.org/WAI/tutorials/forms/grouping/
 [fieldset]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset

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/README.md

@@ -779,11 +779,11 @@ If you provide [ref], it is forwarded to the native HTML `<select>` element.
 Head to [Forms Theming](/docs/customize/theming/forms) to see shared form theming
 options. On top of that, the following options are available for SelectField.
 
-| Custom Property                                      | Description                                                  |
-|------------------------------------------------------|--------------------------------------------------------------|
-| `--rui-FormField--box--select__caret__border-style`  | SelectField arrow border style (e.g. `solid`)                |
-| `--rui-FormField--box--select__caret__background`    | SelectField arrow background (including `url()` or gradient) |
-| `--rui-FormField--box--select__option--disabled__color` | Text color of disabled SelectField options                |
+| Custom Property                                         | Description                                                  |
+|---------------------------------------------------------|--------------------------------------------------------------|
+| `--rui-FormField--box--select__caret__border-style`     | SelectField arrow border style (e.g. `solid`)                |
+| `--rui-FormField--box--select__caret__background`       | SelectField arrow background (including `url()` or gradient) |
+| `--rui-FormField--box--select__option--disabled__color` | Text color of disabled SelectField options                   |
 
 [React common props]: https://react.dev/reference/react-dom/components/common#common-props
 [ref]: https://reactjs.org/docs/refs-and-the-dom.html

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/README.md

@@ -277,15 +277,15 @@ If you provide [ref], it is forwarded to the native HTML `<input>` element.
 Head to [Forms Theming](/docs/customize/theming/forms) to see shared form theming
 options. On top of that, the following options are available for Toggle.
 
-| Custom Property                                                    | Description                                    |
-|--------------------------------------------------------------------|------------------------------------------------|
-| `--rui-FormField--check__input--toggle__width`             | Input width (height is shared with other check fields) |
-| `--rui-FormField--check__input--toggle__border-radius`             | Input corner radius                            |
-| `--rui-FormField--check__input--toggle__background-size`           | Input background size                          |
-| `--rui-FormField--check__input--toggle--default__background-image` | Background image of unchecked input            |
-| `--rui-FormField--check__input--toggle--default__background-position` | Background position of unchecked input      |
-| `--rui-FormField--check__input--toggle--checked__background-image` | Background image of checked input              |
-| `--rui-FormField--check__input--toggle--checked__background-position` | Background position of checked input        |
+| Custom Property                                                       | Description                                            |
+|-----------------------------------------------------------------------|--------------------------------------------------------|
+| `--rui-FormField--check__input--toggle__width`                        | Input width (height is shared with other check fields) |
+| `--rui-FormField--check__input--toggle__border-radius`                | Input corner radius                                    |
+| `--rui-FormField--check__input--toggle__background-size`              | Input background size                                  |
+| `--rui-FormField--check__input--toggle--default__background-image`    | Background image of unchecked input                    |
+| `--rui-FormField--check__input--toggle--default__background-position` | Background position of unchecked input                 |
+| `--rui-FormField--check__input--toggle--checked__background-image`    | Background image of checked input                      |
+| `--rui-FormField--check__input--toggle--checked__background-position` | Background position of checked input                   |
 
 [checkbox-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#additional_attributes
 [React common props]: https://react.dev/reference/react-dom/components/common#common-props

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"
+  ]
+}