@react-ui-org/react-ui 0.57.0 → 0.58.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-ui-org/react-ui",
   "description": "React UI is a themeable UI library for React apps.",
-  "version": "0.57.0",
+  "version": "0.58.0",
   "keywords": [
     "react",
     "ui",
@@ -31,6 +31,17 @@
   "engines": {
     "node": ">=20"
   },
+  "devEngines": {
+    "runtime": {
+      "name": "node",
+      "version": "22.x",
+      "onFail": "error"
+    },
+    "packageManager": {
+      "name": "npm",
+      "onFail": "error"
+    }
+  },
   "scripts": {
     "build": "webpack --mode=production && webpack --mode=development",
     "copy": "npm run copy:css && npm run copy:js",

package/src/components/Alert/Alert.jsx

@@ -1,9 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import {
-  RUIContext,
-  withGlobalProps,
-} from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
+import { TranslationsContext } from '../../providers/translations';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';
@@ -17,7 +15,7 @@ export const Alert = ({
   onClose,
   ...restProps
 }) => {
-  const { translations } = useContext(RUIContext);
+  const translations = useContext(TranslationsContext);
 
   return (
     <div

package/src/components/Alert/Alert.module.scss

@@ -25,8 +25,8 @@
         padding: theme.$padding;
     }
 
-    .close,
-    .icon {
+    .icon,
+    .close {
         height: settings.$min-height;
         color: var(--rui-local-foreground-color);
     }
@@ -46,7 +46,6 @@
         line-height: settings.$line-height;
     }
 
-    .message a,
     .message strong {
         font-weight: theme.$emphasis-font-weight;
         color: var(--rui-local-foreground-color);
@@ -73,6 +72,7 @@
             $variant-name: "color",
             $variant-value: $color,
             $properties: settings.$themeable-properties,
+            $inherit-link-color: true,
         );
     }
 }

package/src/components/Alert/README.md

@@ -41,6 +41,8 @@ Success alerts confirm that an operation has been processed successfully.
 ```docoff-react-preview
 <Alert color="success">
   <strong>Success:</strong> Settings have been successfully saved.
+  {' '}
+  <TextLink href="/" label="Undo" />
 </Alert>
 ```
 
@@ -53,7 +55,7 @@ suggest an action to resolve the problem.
 <Alert color="warning">
   <strong>Warning:</strong> Your credit card is going to expire soon.
   {' '}
-  <a href="/">Update my payment options</a>
+  <TextLink href="/" label="Update my payment options" />
 </Alert>
 ```
 
@@ -68,7 +70,7 @@ problem.
   <strong>Error:</strong> Cannot connect to the server. Is your internet
   connection working fine?
   {' '}
-  <a href="/">Try again</a>
+  <TextLink href="/" label="Try again" />
 </Alert>
 ```
 
@@ -80,6 +82,8 @@ This kind of alert can be used to display helpful information.
 <Alert color="help">
   <strong>Help:</strong> You should choose a password you don&apos;t use
   anywhere else.
+  {' '}
+  <TextLink href="/" label="Help me choose" />
 </Alert>
 ```
 
@@ -90,6 +94,8 @@ Another common, informative alert.
 ```docoff-react-preview
 <Alert color="info">
   <strong>Info:</strong> This feature depends on user&apos;s OS preferences.
+  {' '}
+  <TextLink href="/" label="Open preferences" />
 </Alert>
 ```
 
@@ -100,6 +106,8 @@ Neutral informative alert.
 ```docoff-react-preview
 <Alert>
   <strong>Note:</strong> This feature may not be available in all regions.
+  {' '}
+  <TextLink href="/" label="Show list of regions" />
 </Alert>
 ```
 
@@ -111,6 +119,8 @@ Light alert variant.
 <docoff-placeholder dark>
   <Alert color="light">
     <strong>Light alert:</strong> Stands out on dark backgrounds.
+    {' '}
+    <TextLink href="/" label="This is a link" />
   </Alert>
 </docoff-placeholder>
 ```
@@ -122,6 +132,8 @@ Dark alert variant.
 ```docoff-react-preview
 <Alert color="dark">
   <strong>Dark alert:</strong> Stands out on light backgrounds.
+  {' '}
+  <TextLink href="/" label="This is a link" />
 </Alert>
 ```
 
@@ -190,14 +202,14 @@ helps to improve its accessibility.
 
 ### Common Theming Options
 
-| Custom Property                                      | Description                                                  |
-|------------------------------------------------------|--------------------------------------------------------------|
-| `--rui-Alert__padding`                               | Padding between border and message                           |
-| `--rui-Alert__font-weight`                           | Message font weight                                          |
-| `--rui-Alert__border-width`                          | Border width                                                 |
-| `--rui-Alert__border-radius`                         | Corner radius                                                |
-| `--rui-Alert__emphasis__font-weight`                 | Font weight of text emphasised with `<strong>`               |
-| `--rui-Alert__stripe__width`                         | Width of the border at the start of the Alert                |
+| Custom Property                      | Description                                    |
+|--------------------------------------|------------------------------------------------|
+| `--rui-Alert__padding`               | Padding between border and message             |
+| `--rui-Alert__font-weight`           | Message font weight                            |
+| `--rui-Alert__border-width`          | Border width                                   |
+| `--rui-Alert__border-radius`         | Corner radius                                  |
+| `--rui-Alert__emphasis__font-weight` | Font weight of text emphasised with `<strong>` |
+| `--rui-Alert__stripe__width`         | Width of the border at the start of the Alert  |
 
 ### Theming Variants
 

package/src/components/Badge/Badge.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';

package/src/components/Button/Button.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';

package/src/components/ButtonGroup/ButtonGroup.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React, {
   useMemo,
 } from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootPriorityClassName } from '../_helpers/getRootPriorityClassName';

package/src/components/Card/Card.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';

package/src/components/Card/Card.module.scss

@@ -34,18 +34,19 @@
         box-shadow: theme.$raised-box-shadow;
     }
 
+    .isRootDisabled {
+        background-color: theme.$disabled-background-color;
+        opacity: theme.$disabled-opacity;
+    }
+
     @each $color in settings.$colors {
         @include collections.generate-class(
             $prefix: "rui-",
             $component-name: "Card",
             $variant-name: "color",
             $variant-value: $color,
+            $inherit-link-color: true,
             $properties: settings.$themeable-properties,
         );
     }
-
-    .isRootDisabled {
-        background-color: theme.$disabled-background-color;
-        opacity: theme.$disabled-opacity;
-    }
 }

package/src/components/Card/CardBody.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { transferProps } from '../../utils/transferProps';
 import styles from './Card.module.scss';
 

package/src/components/Card/CardFooter.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
 import { transferProps } from '../../utils/transferProps';
+import { withGlobalProps } from '../../providers/globalProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import styles from './Card.module.scss';
 

package/src/components/Card/README.md

@@ -154,6 +154,8 @@ To cover all possible needs of your project, Card is available in colors from
 <Card color="success">
   <CardBody>
     Hello! I&apos;m success variant of card.
+    {' '}
+    <TextLink href="/" label="This is a link" />
   </CardBody>
   <CardFooter>
     <Button label="Read more" priority="outline" color="success" />
@@ -162,6 +164,8 @@ To cover all possible needs of your project, Card is available in colors from
 <Card color="warning">
   <CardBody>
     Hello! I&apos;m warning variant of card.
+    {' '}
+    <TextLink href="/" label="This is a link" />
   </CardBody>
   <CardFooter>
     <Button label="Read more" priority="outline" color="warning" />
@@ -170,6 +174,8 @@ To cover all possible needs of your project, Card is available in colors from
 <Card color="danger">
   <CardBody>
     Hello! I&apos;m danger variant of card.
+    {' '}
+    <TextLink href="/" label="This is a link" />
   </CardBody>
   <CardFooter>
     <Button label="Read more" priority="outline" color="danger" />
@@ -178,6 +184,8 @@ To cover all possible needs of your project, Card is available in colors from
 <Card color="help">
   <CardBody>
     Hello! I&apos;m help variant of card.
+    {' '}
+    <TextLink href="/" label="This is a link" />
   </CardBody>
   <CardFooter>
     <Button label="Read more" priority="outline" color="help" />
@@ -186,6 +194,8 @@ To cover all possible needs of your project, Card is available in colors from
 <Card color="info">
   <CardBody>
     Hello! I&apos;m info variant of card.
+    {' '}
+    <TextLink href="/" label="This is a link" />
   </CardBody>
   <CardFooter>
     <Button label="Read more" priority="outline" color="info" />
@@ -194,6 +204,8 @@ To cover all possible needs of your project, Card is available in colors from
 <Card color="note">
   <CardBody>
     Hello! I&apos;m note variant of card.
+    {' '}
+    <TextLink href="/" label="This is a link" />
   </CardBody>
   <CardFooter>
     <Button label="Read more" priority="outline" color="note" />
@@ -202,6 +214,8 @@ To cover all possible needs of your project, Card is available in colors from
 <Card>
   <CardBody>
     Hello! I&apos;m light (default) variant of card.
+    {' '}
+    <TextLink href="/" label="This is a link" />
   </CardBody>
   <CardFooter>
     <Button label="Read more" priority="outline" color="dark" />
@@ -210,6 +224,8 @@ To cover all possible needs of your project, Card is available in colors from
 <Card color="dark">
   <CardBody>
     Hello! I&apos;m dark variant of card.
+    {' '}
+    <TextLink href="/" label="This is a link" />
   </CardBody>
   <CardFooter>
     <Button label="Read more" priority="outline" color="light" />
@@ -228,6 +244,8 @@ its interactive elements to disallow user's interaction.
 <Card disabled>
   <CardBody>
     Hello! I&apos;m a disabled card.
+    {' '}
+    <TextLink href="/" label="This is a link" />
   </CardBody>
   <CardFooter>
     <Button label="Read more" priority="outline" disabled />
@@ -236,6 +254,8 @@ its interactive elements to disallow user's interaction.
 <Card disabled raised>
   <CardBody>
     Hello! I&apos;m a disabled raised card.
+    {' '}
+    <TextLink href="/" label="This is a link" />
   </CardBody>
   <CardFooter>
     <Button label="Read more" priority="outline" disabled />
@@ -244,6 +264,8 @@ its interactive elements to disallow user's interaction.
 <Card color="success" disabled>
   <CardBody>
     Hello! I&apos;m a disabled success variant of card.
+    {' '}
+    <TextLink href="/" label="This is a link" />
   </CardBody>
   <CardFooter>
     <Button label="Read more" priority="outline" color="success" disabled />

package/src/components/CheckboxField/CheckboxField.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
@@ -15,6 +15,7 @@ export const CheckboxField = React.forwardRef((props, ref) => {
     isLabelVisible,
     label,
     labelPosition,
+    renderAsRequired,
     required,
     validationState,
     validationText,
@@ -30,7 +31,7 @@ export const CheckboxField = React.forwardRef((props, ref) => {
         context && context.layout === 'horizontal' ? styles.isRootLayoutHorizontal : styles.isRootLayoutVertical,
         labelPosition === 'before' && styles.hasRootLabelBefore,
         disabled && styles.isRootDisabled,
-        required && styles.isRootRequired,
+        (renderAsRequired || required) && styles.isRootRequired,
         getRootValidationStateClassName(validationState, styles),
       )}
       htmlFor={id}
@@ -82,6 +83,7 @@ CheckboxField.defaultProps = {
   id: undefined,
   isLabelVisible: true,
   labelPosition: 'after',
+  renderAsRequired: false,
   required: false,
   validationState: null,
   validationText: null,
@@ -120,7 +122,11 @@ CheckboxField.propTypes = {
    */
   labelPosition: PropTypes.oneOf(['before', 'after']),
   /**
-   * If `true`, the input will be required.
+   * If `true`, the input will be rendered as if it was required.
+   */
+  renderAsRequired: PropTypes.bool,
+  /**
+   * If `true`, the input will be made and rendered as required, regardless of the `renderAsRequired` prop.
    */
   required: PropTypes.bool,
   /**

package/src/components/CheckboxField/README.md

@@ -18,7 +18,13 @@ React.createElement(() => {
   return (
     <CheckboxField
       checked={agree}
-      label="I agree"
+      label={(
+          <>
+            I have read and agree with
+            {' '}
+            <TextLink href="#" label="terms and conditions" />
+          </>
+        )}
       onChange={() => setAgree(!agree)}
     />
   );
@@ -132,20 +138,44 @@ React.createElement(() => {
     <>
       <CheckboxField
         checked={agree}
-        label="I have read and agree with terms and conditions"
+        label={(
+          <>
+            I have read and agree with
+            {' '}
+            <TextLink href="#" label="terms and conditions" />
+          </>
+        )}
         onChange={() => setAgree(!agree)}
         validationState="valid"
       />
       <CheckboxField
         checked={agree}
-        label="I have read and agree with terms and conditions"
+        label={(
+          <>
+            I have read and agree with
+            {' '}
+            <TextLink href="#" label="terms and conditions" />
+          </>
+        )}
         onChange={() => setAgree(!agree)}
         validationState="warning"
-        validationText="Please wait 10 minutes until we verify your data."
+        validationText={(
+          <>
+            Please wait 10 minutes until we verify your data.
+            {' '}
+            <TextLink href="#" label="Cancel" />
+          </>
+        )}
       />
       <CheckboxField
         checked={agree}
-        label="I have read and agree with terms and conditions"
+        label={(
+          <>
+            I have read and agree with
+            {' '}
+            <TextLink href="#" label="terms and conditions" />
+          </>
+        )}
         onChange={() => setAgree(!agree)}
         required
         validationState="invalid"
@@ -156,6 +186,81 @@ React.createElement(() => {
 });
 ```
 
+### Required State
+
+The required state indicates that the input is mandatory. Required fields
+display an asterisk `*` after the label by default.
+
+```docoff-react-preview
+React.createElement(() => {
+  const [agree, setAgree] = React.useState(true);
+  return (
+    <CheckboxField
+      checked={agree}
+      label="I agree"
+      onChange={() => setAgree(!agree)}
+      required
+    />
+  );
+});
+```
+
+#### Styling the Required State
+
+All form fields in React UI can be
+[styled](/docs/customize/theming/forms/#required-state)
+to indicate the required state.
+
+However, you may find yourself in a situation where a form field is valid in
+both checked and unchecked states, for example to turn on or off a feature.
+If your project uses the label color as the primary means to indicate the
+required state of input fields and the usual asterisk `*` is omitted, you may
+want to keep the label color consistent for both states to avoid confusion.
+
+For this edge case, there is the `renderAsRequired` prop:
+
+```docoff-react-preview
+React.createElement(() => {
+  const [optional, setOptional] = React.useState(false);
+  const [renderAsRequired, setRenderAsRequired] = React.useState(false);
+  return (
+    <React.Fragment>
+      <style>
+      {`
+        .example {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 1rem 0.5rem;
+        }
+
+        .example--themed-form-fields {
+          --rui-FormField__label__color: var(--rui-color-text-secondary);
+          --rui-FormField--required__label__color: var(--rui-color-text-primary);
+          --rui-FormField--required__sign: '';
+        }
+      `}
+      </style>
+      <div class="example example--themed-form-fields">
+        <CheckboxField
+          checked={optional}
+          label="This field is optional"
+          onChange={() => setOptional(!optional)}
+        />
+        <CheckboxField
+          checked={renderAsRequired}
+          label="This field is optional but looks like required"
+          onChange={() => setRenderAsRequired(!renderAsRequired)}
+          renderAsRequired
+        />
+      </div>
+    </React.Fragment>
+  );
+});
+```
+
+It renders the field as if it was required, but doesn't add the `required`
+attribute to the actual input.
+
 ### Disabled State
 
 Disabled state makes the input unavailable.

package/src/components/FileInputField/FileInputField.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';

package/src/components/FormLayout/FormLayout.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useMemo } from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';

package/src/components/FormLayout/FormLayoutCustomField.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';

package/src/components/Grid/Grid.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { transferProps } from '../../utils/transferProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { generateResponsiveCustomProperties } from './_helpers/generateResponsiveCustomProperties';

package/src/components/Grid/GridSpan.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { transferProps } from '../../utils/transferProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { generateResponsiveCustomProperties } from './_helpers/generateResponsiveCustomProperties';

package/src/components/InputGroup/InputGroup.jsx

@@ -3,8 +3,7 @@ import React, {
   useContext,
   useMemo,
 } from 'react';
-import { Text } from '../Text';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
@@ -12,6 +11,7 @@ import { getRootValidationStateClassName } from '../_helpers/getRootValidationSt
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
 import { FormLayoutContext } from '../FormLayout';
+import { Text } from '../Text';
 import { InputGroupContext } from './InputGroupContext';
 import styles from './InputGroup.module.scss';
 

package/src/components/InputGroup/InputGroup.module.scss

@@ -1,7 +1,9 @@
 // 1. The class name is intentionally singular because it's targeted by other mixins too.
 // 2. Use a block-level display mode to prevent extra white space below grouped inputs in Safari.
-// 3. Prevent individual inputs from overlapping inside narrow containers.
-// 4. Legends are tricky to style, let's use a `div` instead.
+// 3. Let wide input groups honor the minimum input width and overflow horizontally without wrapping and distorting
+//    the inputs.
+// 4. Prevent individual inputs from overlapping inside narrow containers.
+// 5. Legends are tricky to style, let's use a `div` instead.
 //    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#styling_with_css
 
 @use "../../styles/tools/form-fields/box-field-elements";
@@ -19,12 +21,12 @@
         @include foundation.fieldset();
     }
 
-    // 4.
+    // 5.
     .legend {
         @include accessibility.hide-text();
     }
 
-    // 4.
+    // 5.
     .label {
         @include foundation.label();
     }
@@ -63,11 +65,13 @@
     .isRootLayoutVertical,
     .isRootLayoutHorizontal {
         @include box-field-layout.vertical();
+
+        max-width: none; // 3.
     }
 
     .isRootLayoutVertical .field,
     .isRootLayoutHorizontal .field {
-        max-width: none; // 3.
+        max-width: none; // 4.
     }
 
     .isRootLayoutHorizontal {

package/src/components/Modal/Modal.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { useRef } from 'react';
 import { createPortal } from 'react-dom';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getPositionClassName } from './_helpers/getPositionClassName';

package/src/components/Modal/ModalBody.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';