@react-ui-org/react-ui 0.58.0 → 0.59.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.58.0",
+  "version": "0.59.0",
   "keywords": [
     "react",
     "ui",
@@ -56,7 +56,7 @@
     "precopy": "rm -rf dist && mkdir dist",
     "prepublishOnly": "npm run build",
     "start": "webpack --watch --mode=development",
-    "stylelint": "stylelint \"src/**/*.scss\" --config stylelint.config.js",
+    "stylelint": "stylelint \"src/**/*.{css,scss}\" \"!src/docs/_assets/generated/**\" --config stylelint.config.js",
     "test": "npm run jest"
   },
   "dependencies": {
@@ -76,10 +76,11 @@
     "@babel/preset-env": "^7.24.7",
     "@babel/preset-react": "^7.24.7",
     "@babel/register": "^7.24.6",
+    "@happy-dom/jest-environment": "^16.6.0",
     "@stylistic/stylelint-config": "^1.0.1",
     "@svgr/webpack": "^8.1.0",
-    "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/react": "^16.0.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
     "@visionappscz/eslint-config-visionapps": "^1.7.0",
     "@visionappscz/stylelint-config": "^4.0.0",
@@ -97,7 +98,6 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
     "markdownlint-cli2": "^0.13.0",
     "mini-css-extract-plugin": "^2.9.0",
     "postcss": "^8.4.39",

package/src/components/Alert/Alert.jsx

@@ -2,8 +2,8 @@ import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 import { withGlobalProps } from '../../providers/globalProps';
 import { TranslationsContext } from '../../providers/translations';
-import { classNames } from '../../utils/classNames';
-import { transferProps } from '../../utils/transferProps';
+import { classNames } from '../../helpers/classNames/classNames';
+import { transferProps } from '../../helpers/transferProps';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';
 import styles from './Alert.module.scss';
 
@@ -69,9 +69,9 @@ Alert.propTypes = {
   children: PropTypes.node.isRequired,
   /**
    * Color variant to clarify importance and meaning of the alert. Implements
-   * [Feedback and Neutral color collections](/docs/foundation/collections#colors).
+   * [Feedback color collection](/docs/foundation/collections#colors).
    */
-  color: PropTypes.oneOf(['success', 'warning', 'danger', 'help', 'info', 'note', 'light', 'dark']),
+  color: PropTypes.oneOf(['success', 'warning', 'danger', 'help', 'info', 'note']),
   /**
    * Optional element to be displayed next to the alert body.
    */

package/src/components/Alert/README.md

@@ -111,32 +111,6 @@ Neutral informative alert.
 </Alert>
 ```
 
-### Light
-
-Light alert variant.
-
-```docoff-react-preview
-<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>
-```
-
-### Dark
-
-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>
-```
-
 ## Alerts with Icons
 
 An icon can (and should) accompany the message.

package/src/components/Alert/_settings.scss

@@ -1,4 +1,3 @@
-@use "sass:list";
 @use "sass:map";
 @use "../../styles/settings/collections";
 @use "../../styles/theme/typography";
@@ -8,5 +7,5 @@ $font-size: map.get(typography.$font-size-values, 1);
 $line-height: typography.$line-height-base;
 $min-height: calc(#{$font-size} * #{$line-height} + 2 * #{theme.$padding});
 
-$colors: list.join(collections.$feedback-colors, collections.$neutral-colors);
+$colors: collections.$feedback-colors;
 $themeable-properties: color, foreground-color, background-color;

package/src/components/Badge/Badge.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../providers/globalProps';
-import { classNames } from '../../utils/classNames';
-import { transferProps } from '../../utils/transferProps';
+import { classNames } from '../../helpers/classNames/classNames';
+import { transferProps } from '../../helpers/transferProps';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';
 import { getRootPriorityClassName } from '../_helpers/getRootPriorityClassName';
 import styles from './Badge.module.scss';

package/src/components/Button/Button.jsx

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

package/src/components/ButtonGroup/ButtonGroup.jsx

@@ -3,8 +3,8 @@ import React, {
   useMemo,
 } from 'react';
 import { withGlobalProps } from '../../providers/globalProps';
-import { classNames } from '../../utils/classNames';
-import { transferProps } from '../../utils/transferProps';
+import { classNames } from '../../helpers/classNames/classNames';
+import { transferProps } from '../../helpers/transferProps';
 import { getRootPriorityClassName } from '../_helpers/getRootPriorityClassName';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import styles from './ButtonGroup.module.scss';

package/src/components/Card/Card.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../providers/globalProps';
-import { classNames } from '../../utils/classNames';
-import { transferProps } from '../../utils/transferProps';
+import { classNames } from '../../helpers/classNames/classNames';
+import { transferProps } from '../../helpers/transferProps';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';
 import styles from './Card.module.scss';
 
@@ -18,7 +18,7 @@ export const Card = ({
     {...transferProps(restProps)}
     className={classNames(
       styles.root,
-      getRootColorClassName(color, styles),
+      color && getRootColorClassName(color, styles),
       dense && styles.isRootDense,
       raised && styles.isRootRaised,
       disabled && styles.isRootDisabled,
@@ -29,7 +29,7 @@ export const Card = ({
 );
 
 Card.defaultProps = {
-  color: 'light',
+  color: undefined,
   dense: false,
   disabled: false,
   raised: false,
@@ -45,9 +45,9 @@ Card.propTypes = {
   children: PropTypes.node.isRequired,
   /**
    * Color to clarify importance and meaning of the card. Implements
-   * [Feedback and Neutral color collections](/docs/foundation/collections#colors).
+   * [Feedback color collection](/docs/foundation/collections#colors).
    */
-  color: PropTypes.oneOf(['success', 'warning', 'danger', 'help', 'info', 'note', 'light', 'dark']),
+  color: PropTypes.oneOf(['success', 'warning', 'danger', 'help', 'info', 'note']),
   /**
    * Make the card more compact.
    */

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

@@ -12,9 +12,9 @@
         flex-direction: column;
         min-width: 0; // 1.
         color: var(--rui-local-color);
-        border: theme.$border-width solid var(--rui-local-border-color);
+        border: theme.$border-width solid var(--rui-local-border-color, transparent);
         border-radius: theme.$border-radius;
-        background-color: var(--rui-local-background-color);
+        background-color: var(--rui-local-background-color, theme.$background-color);
     }
 
     .body {

package/src/components/Card/CardBody.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../providers/globalProps';
-import { transferProps } from '../../utils/transferProps';
+import { transferProps } from '../../helpers/transferProps';
 import styles from './Card.module.scss';
 
 export const CardBody = ({

package/src/components/Card/CardFooter.jsx

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

package/src/components/Card/README.md

@@ -148,7 +148,7 @@ for card content.
 ## Color Variants
 
 To cover all possible needs of your project, Card is available in colors from
-[Feedback and Neutral color collections](/docs/foundation/collections#colors).
+[Feedback color collection](/docs/foundation/collections#colors).
 
 ```docoff-react-preview
 <Card color="success">
@@ -211,26 +211,6 @@ To cover all possible needs of your project, Card is available in colors from
     <Button label="Read more" priority="outline" color="note" />
   </CardFooter>
 </Card>
-<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" />
-  </CardFooter>
-</Card>
-<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" />
-  </CardFooter>
-</Card>
 ```
 
 ## States
@@ -314,6 +294,7 @@ Separate your card actions with CardFooter. See
 | `--rui-Card__padding`                                | Padding shared by card header, body and footer               |
 | `--rui-Card__border-width`                           | Border width                                                 |
 | `--rui-Card__border-radius`                          | Corner radius                                                |
+| `--rui-Card__background-color`                       | Card background color                                        |
 | `--rui-Card--dense__padding`                         | Padding of dense card                                        |
 | `--rui-Card--raised__box-shadow`                     | Box shadow of raised card                                    |
 | `--rui-Card--disabled__background-color`             | Card background color in disabled state                      |

package/src/components/Card/_settings.scss

@@ -1,5 +1,4 @@
-@use "sass:list";
 @use "../../styles/settings/collections";
 
-$colors: list.join(collections.$feedback-colors, collections.$neutral-colors);
+$colors: collections.$feedback-colors;
 $themeable-properties: color, border-color, background-color;

package/src/components/Card/_theme.scss

@@ -1,6 +1,7 @@
 $padding: var(--rui-Card__padding);
 $border-width: var(--rui-Card__border-width);
 $border-radius: var(--rui-Card__border-radius);
+$background-color: var(--rui-Card__background-color);
 
 $dense-padding: var(--rui-Card--dense__padding);
 $raised-box-shadow: var(--rui-Card--raised__box-shadow);

package/src/components/CheckboxField/CheckboxField.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 import { withGlobalProps } from '../../providers/globalProps';
-import { classNames } from '../../utils/classNames';
-import { transferProps } from '../../utils/transferProps';
+import { classNames } from '../../helpers/classNames/classNames';
+import { transferProps } from '../../helpers/transferProps';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
 import { FormLayoutContext } from '../FormLayout';
 import styles from './CheckboxField.module.scss';

package/src/components/FileInputField/FileInputField.jsx

@@ -1,10 +1,19 @@
 import PropTypes from 'prop-types';
-import React, { useContext } from 'react';
+import React, {
+  useContext,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
 import { withGlobalProps } from '../../providers/globalProps';
-import { classNames } from '../../utils/classNames';
-import { transferProps } from '../../utils/transferProps';
+import { classNames } from '../../helpers/classNames';
+import { transferProps } from '../../helpers/transferProps';
+import { TranslationsContext } from '../../providers/translations';
+import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
+import { InputGroupContext } from '../InputGroup';
+import { Text } from '../Text';
 import { FormLayoutContext } from '../FormLayout';
 import styles from './FileInputField.module.scss';
 
@@ -17,54 +26,156 @@ export const FileInputField = React.forwardRef((props, ref) => {
     isLabelVisible,
     label,
     layout,
+    multiple,
+    onFilesChanged,
     required,
+    size,
     validationState,
     validationText,
     ...restProps
   } = props;
 
-  const context = useContext(FormLayoutContext);
+  const internalInputRef = useRef();
+
+  // We need to have a reference to the input element to be able to call its methods,
+  // but at the same time we want to expose this reference to the parent component for
+  // case someone wants to call input methods from outside the component.
+  useImperativeHandle(ref, () => internalInputRef.current);
+
+  const formLayoutContext = useContext(FormLayoutContext);
+  const inputGroupContext = useContext(InputGroupContext);
+  const translations = useContext(TranslationsContext);
+
+  const [selectedFileNames, setSelectedFileNames] = useState([]);
+  const [isDragging, setIsDragging] = useState(false);
+
+  const handleFileChange = (files, event) => {
+    if (files.length === 0) {
+      setSelectedFileNames([]);
+      return;
+    }
+
+    // Mimic the native behavior of the `input` element: if multiple files are selected and the input
+    // does not accept multiple files, no files are processed.
+    if (files.length > 1 && !multiple) {
+      setSelectedFileNames([]);
+      return;
+    }
+
+    const fileNames = [];
+
+    [...files].forEach((file) => {
+      fileNames.push(file.name);
+    });
+
+    setSelectedFileNames(fileNames);
+    onFilesChanged(files, event);
+  };
+
+  const handleInputChange = (event) => {
+    handleFileChange(event.target.files, event);
+  };
+
+  const handleClick = () => {
+    internalInputRef?.current.click();
+  };
+
+  const handleDrop = (event) => {
+    event.preventDefault();
+    handleFileChange(event.dataTransfer.files, event);
+    setIsDragging(false);
+  };
+
+  const handleDragOver = (event) => {
+    if (!isDragging) {
+      setIsDragging(true);
+    }
+    event.preventDefault();
+  };
+
+  const handleDragLeave = () => {
+    if (isDragging) {
+      setIsDragging(false);
+    }
+  };
 
   return (
-    <label
+    <div
       className={classNames(
         styles.root,
         fullWidth && styles.isRootFullWidth,
-        context && styles.isRootInFormLayout,
-        resolveContextOrProp(context && context.layout, layout) === 'horizontal'
+        formLayoutContext && styles.isRootInFormLayout,
+        resolveContextOrProp(formLayoutContext && formLayoutContext.layout, layout) === 'horizontal'
           ? styles.isRootLayoutHorizontal
           : styles.isRootLayoutVertical,
-        disabled && styles.isRootDisabled,
+        resolveContextOrProp(inputGroupContext && inputGroupContext.disabled, disabled) && styles.isRootDisabled,
+        inputGroupContext && styles.isRootGrouped,
+        isDragging && styles.isRootDragging,
         required && styles.isRootRequired,
+        getRootSizeClassName(
+          resolveContextOrProp(inputGroupContext && inputGroupContext.size, size),
+          styles,
+        ),
         getRootValidationStateClassName(validationState, styles),
       )}
-      htmlFor={id}
-      id={id && `${id}__label`}
+      id={`${id}__root`}
+      onDragLeave={!disabled ? handleDragLeave : undefined}
+      onDragOver={!disabled ? handleDragOver : undefined}
+      onDrop={!disabled ? handleDrop : undefined}
     >
-      <div
+      <label
         className={classNames(
           styles.label,
-          !isLabelVisible && styles.isLabelHidden,
+          (!isLabelVisible || inputGroupContext) && styles.isLabelHidden,
         )}
-        id={id && `${id}__labelText`}
+        htmlFor={id}
+        id={`${id}__labelText`}
       >
         {label}
-      </div>
+      </label>
       <div className={styles.field}>
         <div className={styles.inputContainer}>
           <input
             {...transferProps(restProps)}
-            disabled={disabled}
+            className={styles.input}
+            disabled={resolveContextOrProp(inputGroupContext && inputGroupContext.disabled, disabled)}
             id={id}
-            ref={ref}
+            multiple={multiple}
+            onChange={handleInputChange}
+            ref={internalInputRef}
             required={required}
+            tabIndex={-1}
             type="file"
           />
+          <button
+            className={styles.dropZone}
+            disabled={resolveContextOrProp(inputGroupContext && inputGroupContext.disabled, disabled)}
+            onClick={handleClick}
+            type="button"
+          >
+            <Text lines={1}>
+              {!selectedFileNames.length && (
+                <>
+                  <span className={styles.dropZoneLink}>{translations.FileInputField.browse}</span>
+                  {' '}
+                  {translations.FileInputField.drop}
+                </>
+              )}
+              {selectedFileNames.length === 1 && selectedFileNames[0]}
+              {selectedFileNames.length > 1 && (
+                <>
+                  {selectedFileNames.length}
+                  {' '}
+                  {translations.FileInputField.filesSelected}
+                </>
+              )}
+            </Text>
+          </button>
         </div>
         {helpText && (
           <div
             className={styles.helpText}
-            id={id && `${id}__helpText`}
+            id={`${id}__helpText`}
           >
             {helpText}
           </div>
@@ -72,13 +183,13 @@ export const FileInputField = React.forwardRef((props, ref) => {
         {validationText && (
           <div
             className={styles.validationText}
-            id={id && `${id}__validationText`}
+            id={`${id}__validationText`}
           >
             {validationText}
           </div>
         )}
       </div>
-    </label>
+    </div>
   );
 });
 
@@ -86,10 +197,11 @@ FileInputField.defaultProps = {
   disabled: false,
   fullWidth: false,
   helpText: null,
-  id: undefined,
   isLabelVisible: true,
   layout: 'vertical',
+  multiple: false,
   required: false,
+  size: 'medium',
   validationState: null,
   validationText: null,
 };
@@ -116,7 +228,7 @@ FileInputField.propTypes = {
    * * `<ID>__helpText`
    * * `<ID>__validationText`
    */
-  id: PropTypes.string,
+  id: PropTypes.string.isRequired,
   /**
    * If `false`, the label will be visually hidden (but remains accessible by assistive
    * technologies).
@@ -134,10 +246,24 @@ FileInputField.propTypes = {
    *
    */
   layout: PropTypes.oneOf(['horizontal', 'vertical']),
+  /**
+   * If `true`, the input will accept multiple files.
+   */
+  multiple: PropTypes.bool,
+  /**
+   * Callback fired when the value of the input changes.
+   */
+  onFilesChanged: PropTypes.func.isRequired,
   /**
    * If `true`, the input will be required.
    */
   required: PropTypes.bool,
+  /**
+   * Size of the field.
+   *
+   * Ignored if the component is rendered within `InputGroup` component as the value is inherited in such case.
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
   /**
    * Alter the field to provide feedback based on validation result.
    */

package/src/components/FileInputField/FileInputField.module.scss

@@ -1,8 +1,16 @@
+// 1. The drop zone is constructed as a button to support keyboard operation.
+// 2. Prevent pointer events on all children of the root element to not to trigger drag events on children.
+
 @use "../../styles/tools/form-fields/box-field-elements";
 @use "../../styles/tools/form-fields/box-field-layout";
+@use "../../styles/tools/form-fields/box-field-sizes";
 @use "../../styles/tools/form-fields/foundation";
 @use "../../styles/tools/form-fields/variants";
 @use "../../styles/tools/accessibility";
+@use "../../styles/tools/links";
+@use "../../styles/tools/transition";
+@use "../../styles/tools/reset";
+@use "settings";
 
 @layer components.file-input-field {
     // Foundation
@@ -18,6 +26,54 @@
         @include box-field-elements.input-container();
     }
 
+    .input {
+        @include accessibility.hide-text();
+    }
+
+    .dropZone {
+        --rui-local-color: #{settings.$drop-zone-color};
+        --rui-local-border-color: #{settings.$drop-zone-border-color};
+        --rui-local-background: #{settings.$drop-zone-background-color};
+
+        @include reset.button(); // 1.
+        @include box-field-elements.base();
+
+        display: flex;
+        align-items: center;
+        justify-content: start;
+        font-weight: settings.$drop-zone-font-weight;
+        font-size: var(--rui-local-font-size);
+        line-height: settings.$drop-zone-line-height;
+        font-family: settings.$drop-zone-font-family;
+        border-style: dashed;
+    }
+
+    .isRootDragging .dropZone {
+        --rui-local-border-color: #{settings.$drop-zone-dragging-border-color};
+    }
+
+    .isRootDisabled .dropZone {
+        cursor: settings.$drop-zone-disabled-cursor;
+    }
+
+    .root:not(.isRootDisabled, .isRootDragging) .dropZone:hover {
+        --rui-local-border-color: #{settings.$drop-zone-hover-border-color};
+    }
+
+    .root:not(.isRootDisabled, .isRootDragging) .dropZone:active {
+        --rui-local-border-color: #{settings.$drop-zone-active-border-color};
+    }
+
+    .dropZoneLink {
+        @include links.base();
+
+        &::before {
+            content: "";
+            position: absolute;
+            inset: 0;
+        }
+    }
+
     .helpText,
     .validationText {
         @include foundation.help-text();
@@ -28,6 +84,18 @@
     }
 
     // States
+    .isRootDisabled {
+        --rui-local-color: #{settings.$drop-zone-disabled-color};
+        --rui-local-border-color: #{settings.$drop-zone-disabled-border-color};
+        --rui-local-background: #{settings.$drop-zone-disabled-background-color};
+
+        @include variants.disabled-state();
+    }
+
+    .isRootDisabled .dropZoneLink {
+        cursor: inherit;
+    }
+
     .isRootStateInvalid {
         @include variants.validation(invalid);
     }
@@ -56,10 +124,28 @@
     }
 
     .isRootFullWidth {
-        @include box-field-layout.full-width();
+        @include box-field-layout.full-width($input-element-selector: ".dropZone");
     }
 
     .isRootInFormLayout {
         @include box-field-layout.in-form-layout();
     }
+
+    // Sizes
+    .isRootSizeSmall {
+        @include box-field-sizes.size(small);
+    }
+
+    .isRootSizeMedium {
+        @include box-field-sizes.size(medium);
+    }
+
+    .isRootSizeLarge {
+        @include box-field-sizes.size(large);
+    }
+
+    // Groups
+    .isRootGrouped {
+        @include box-field-elements.in-group-layout($input-element-selector: ".dropZone");
+    }
 }