@react-ui-org/react-ui 0.59.0 → 0.59.2

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.59.0",
+  "version": "0.59.2",
   "keywords": [
     "react",
     "ui",

package/src/components/Alert/README.md

@@ -32,7 +32,7 @@ See [API](#api) for all available options.
 ## Color Variants
 
 To cover all possible needs of your project, Alert is available in colors from
-[Feedback and Neutral color collections](/docs/foundation/collections#colors).
+[Feedback color collection](/docs/foundation/collections#colors).
 
 ### Success
 

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

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

package/src/components/Card/README.md

@@ -289,16 +289,17 @@ Separate your card actions with CardFooter. See
 
 ### Common Theming Options
 
-| Custom Property                                      | Description                                                  |
-|------------------------------------------------------|--------------------------------------------------------------|
-| `--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                      |
-| `--rui-Card--disabled__opacity`                      | Card opacity in disabled state                               |
+| Custom Property                          | Description                                    |
+|------------------------------------------|------------------------------------------------|
+| `--rui-Card__padding`                    | Padding shared by card header, body and footer |
+| `--rui-Card__border-width`               | Border width                                   |
+| `--rui-Card__border-color`               | Border color                                   |
+| `--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        |
+| `--rui-Card--disabled__opacity`          | Card opacity in disabled state                 |
 
 ### Theming Variants
 

package/src/components/Card/_theme.scss

@@ -1,5 +1,6 @@
 $padding: var(--rui-Card__padding);
 $border-width: var(--rui-Card__border-width);
+$border-color: var(--rui-Card__border-color);
 $border-radius: var(--rui-Card__border-radius);
 $background-color: var(--rui-Card__background-color);
 

package/src/components/FileInputField/FileInputField.jsx

@@ -1,5 +1,7 @@
 import PropTypes from 'prop-types';
 import React, {
+  useCallback,
+  useEffect,
   useContext,
   useImperativeHandle,
   useRef,
@@ -35,13 +37,6 @@ export const FileInputField = React.forwardRef((props, ref) => {
     ...restProps
   } = props;
 
-  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);
@@ -49,6 +44,31 @@ export const FileInputField = React.forwardRef((props, ref) => {
   const [selectedFileNames, setSelectedFileNames] = useState([]);
   const [isDragging, setIsDragging] = useState(false);
 
+  const internalInputRef = useRef();
+
+  const handleReset = useCallback((event) => {
+    setSelectedFileNames([]);
+    onFilesChanged([], event);
+  }, [onFilesChanged]);
+
+  // 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 in
+  // case someone wants to call input methods from outside the component.
+  useImperativeHandle(
+    ref,
+    () => {
+      // The reason of extending object instead of using spread operator is that
+      // if it is transformed to the object, it changes the reference of the object
+      // and its prototype chain.
+      const inputEl = internalInputRef?.current ?? {};
+      inputEl.resetState = () => {
+        handleReset(null);
+      };
+      return inputEl;
+    },
+    [handleReset],
+  );
+
   const handleFileChange = (files, event) => {
     if (files.length === 0) {
       setSelectedFileNames([]);
@@ -99,6 +119,24 @@ export const FileInputField = React.forwardRef((props, ref) => {
     }
   };
 
+  useEffect(() => {
+    const inputEl = internalInputRef.current;
+    if (!inputEl) {
+      return () => {};
+    }
+
+    const { form } = inputEl;
+    if (!form) {
+      return () => {};
+    }
+
+    form.addEventListener('reset', handleReset);
+
+    return () => {
+      form.removeEventListener('reset', handleReset);
+    };
+  }, [handleReset]);
+
   return (
     <div
       className={classNames(

package/src/components/FileInputField/README.md

@@ -236,6 +236,44 @@ set the `multiple` prop to `true`.
 />
 ```
 
+## Resetting Input State
+
+If you need to reset the input state, you can do it by calling the
+`resetState` method on the component's ref.
+
+```docoff-react-preview
+React.createElement(() => {
+  const fileInputRef = React.useRef();
+
+  return (
+    <Toolbar align="bottom">
+      <ToolbarItem>
+        <FileInputField
+          id="my-file"
+          label="Attachment"
+          onFilesChanged={() => {}}
+          ref={fileInputRef}
+        />
+      </ToolbarItem>
+      <ToolbarItem>
+        <Button
+          label="Reset file input state"
+          onClick={() => {
+            if (!fileInputRef.current) {
+              return;
+            }
+            fileInputRef.current.resetState();
+          }}
+        />
+      </ToolbarItem>
+    </Toolbar>
+  );
+});
+```
+
+You can also reset the input state by clicking the button with the `reset` type
+inside a form.
+
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you

package/src/components/FormLayout/README.md

@@ -300,7 +300,7 @@ This is a demo of all components supported by FormLayout.
 
 ```docoff-react-preview
 React.createElement(() => {
-  const [fieldLayout, setFieldLayout] = React.useState('vertical');
+  const [fieldLayout, setFieldLayout] = React.useState('horizontal');
   const [fruit, setFruit] = React.useState('apple');
   const [isDeliveryAddress, setIsDeliveryAddress] = React.useState(true);
   const [receiveNewsletter, setReceiveNewsletter] = React.useState(true);
@@ -323,16 +323,16 @@ React.createElement(() => {
       <Toolbar>
         <ToolbarItem>
           <ButtonGroup>
-            <Button
-              color={fieldLayout === 'vertical' ? 'selected' : 'secondary'}
-              label="Vertical layout"
-              onClick={() => setFieldLayout('vertical')}
-            />
             <Button
               color={fieldLayout === 'horizontal' ? 'selected' : 'secondary'}
               label="Horizontal layout"
               onClick={() => setFieldLayout('horizontal')}
             />
+            <Button
+              color={fieldLayout === 'vertical' ? 'selected' : 'secondary'}
+              label="Vertical layout"
+              onClick={() => setFieldLayout('vertical')}
+            />
           </ButtonGroup>
         </ToolbarItem>
       </Toolbar>
@@ -388,6 +388,7 @@ React.createElement(() => {
           rows={3}
         />
         <FileInputField
+          id="my-file"
           label="Attachment"
           onFilesChanged={() => {}}
         />

package/src/components/InputGroup/README.md

@@ -145,7 +145,7 @@ supports this kind of layout as well.
   label="Horizontal layout"
   layout="horizontal"
 >
-  <FileInputField label="Attachment" onFilesChanged={() => {}} />
+  <FileInputField id="my-file" label="Attachment" onFilesChanged={() => {}} />
   <Button label="Submit" />
 </InputGroup>
 ```

package/src/theme.scss

@@ -5,8 +5,7 @@
 @use "styles/theme-constants/svg";
 
 @layer theme {
-    :root,
-    :host {
+    :root {
         // ============================================================================================ //
         // GLOBAL TOKENS                                                                                //
         // ============================================================================================ //
@@ -826,6 +825,7 @@
 
         --rui-Card__padding: var(--rui-dimension-space-4);
         --rui-Card__border-width: var(--rui-dimension-border-width-1);
+        --rui-Card__border-color: var(--rui-color-border-primary);
         --rui-Card__border-radius: var(--rui-dimension-radius-2);
         --rui-Card__background-color: var(--rui-color-background-layer-1);
         --rui-Card--dense__padding: var(--rui-dimension-space-2);