@react-ui-org/react-ui 0.47.0 → 0.48.0

package/src/lib/components/ScrollView/ScrollView.scss

@@ -1,7 +1,7 @@
 // 1. Scrolling shadows are implemented as pseudo elements. This way we can customise them only
 //    with custom properties.
 //
-// 2. Stack scrolling shadows  over viewport content while keeping the content interactive.
+// 2. Stack scrolling shadows over viewport content while keeping the content interactive.
 //
 //    - `.scrollingShadows` is positioned absolutely over the `.root`, with auto `z-index` (this is
 //      important!), and with `overflow: hidden` to clip the shadows (ie. its pseudo elements).
@@ -27,7 +27,6 @@
 @use "../../styles/tools/scrollbar";
 @use "../../styles/tools/spacing";
 @use "../../styles/tools/transition";
-@use "theme";
 
 $_arrow-inner-spacing: spacing.of(2);
 $_arrow-outer-spacing: spacing.of(4);
@@ -45,6 +44,7 @@ $_arrow-outer-spacing: spacing.of(4);
     width: 100%; // 2.
     height: 100%; // 2.
     overflow: hidden; // 2.
+    pointer-events: none; // 2.
 
     &::before,
     &::after {
@@ -54,20 +54,16 @@ $_arrow-outer-spacing: spacing.of(4);
         position: absolute;
         z-index: 2; // 2.
         display: block;
-        width: var(--rui-local-shadow-width);
-        height: var(--rui-local-shadow-height);
         visibility: hidden;
         opacity: 0;
     }
 
     &::before {
         background: var(--rui-local-start-shadow-background);
-        box-shadow: var(--rui-local-start-shadow-box-shadow);
     }
 
     &::after {
         background: var(--rui-local-end-shadow-background);
-        box-shadow: var(--rui-local-end-shadow-box-shadow);
     }
 }
 
@@ -75,7 +71,6 @@ $_arrow-outer-spacing: spacing.of(4);
     z-index: 1; // 2.
     width: 100%;
     scroll-behavior: smooth;
-    -webkit-overflow-scrolling: touch;
 }
 
 .arrowPrev,
@@ -89,7 +84,6 @@ $_arrow-outer-spacing: spacing.of(4);
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--rui-local-arrow-color);
     visibility: hidden;
     opacity: 0;
 }
@@ -116,7 +110,8 @@ $_arrow-outer-spacing: spacing.of(4);
     width: 100%;
     padding-top: $_arrow-outer-spacing;
     padding-bottom: $_arrow-inner-spacing;
-    transform: translateY(theme.$arrow-initial-offset);
+    color: var(--rui-local-prev-arrow-color);
+    transform: translateY(var(--rui-local-prev-arrow-initial-offset));
 }
 
 .isRootVertical .arrowPrev .arrowIcon {
@@ -130,7 +125,8 @@ $_arrow-outer-spacing: spacing.of(4);
     width: 100%;
     padding-top: $_arrow-inner-spacing;
     padding-bottom: $_arrow-outer-spacing;
-    transform: translateY(calc(-1 * #{theme.$arrow-initial-offset}));
+    color: var(--rui-local-next-arrow-color);
+    transform: translateY(calc(-1 * var(--rui-local-next-arrow-initial-offset)));
 }
 
 .isRootHorizontal {
@@ -143,7 +139,7 @@ $_arrow-outer-spacing: spacing.of(4);
     left: 0;
     padding-right: $_arrow-inner-spacing;
     padding-left: $_arrow-outer-spacing;
-    transform: translateX(theme.$arrow-initial-offset);
+    transform: translateX(var(--rui-local-prev-arrow-initial-offset));
 }
 
 .isRootHorizontal .arrowPrev .arrowIcon {
@@ -156,7 +152,7 @@ $_arrow-outer-spacing: spacing.of(4);
     bottom: 0;
     padding-right: $_arrow-outer-spacing;
     padding-left: $_arrow-inner-spacing;
-    transform: translateX(calc(-1 * #{theme.$arrow-initial-offset}));
+    transform: translateX(calc(-1 * var(--rui-local-next-arrow-initial-offset)));
 }
 
 .isRootHorizontal .arrowNext .arrowIcon {
@@ -167,16 +163,19 @@ $_arrow-outer-spacing: spacing.of(4);
 .isRootVertical .scrollingShadows::after {
     right: 0;
     left: 0;
+    width: auto;
 }
 
 .isRootVertical .scrollingShadows::before {
     top: 0;
-    transform: translateY(theme.$shadow-initial-offset);
+    height: var(--rui-local-start-shadow-size);
+    transform: translateY(var(--rui-local-start-shadow-initial-offset));
 }
 
 .isRootVertical .scrollingShadows::after {
     bottom: 0;
-    transform: translateY(calc(-1 * #{theme.$shadow-initial-offset}));
+    height: var(--rui-local-end-shadow-size);
+    transform: translateY(calc(-1 * var(--rui-local-end-shadow-initial-offset)));
 }
 
 .isRootHorizontal .viewport {
@@ -193,16 +192,19 @@ $_arrow-outer-spacing: spacing.of(4);
 .isRootHorizontal .scrollingShadows::after {
     top: 0;
     bottom: 0;
+    height: auto;
 }
 
 .isRootHorizontal .scrollingShadows::before {
     left: 0;
-    transform: translateX(theme.$shadow-initial-offset);
+    width: var(--rui-local-start-shadow-size);
+    transform: translateX(var(--rui-local-start-shadow-initial-offset));
 }
 
 .isRootHorizontal .scrollingShadows::after {
     right: 0;
-    transform: translateX(calc(-1 * #{theme.$shadow-initial-offset}));
+    width: var(--rui-local-end-shadow-size);
+    transform: translateX(calc(-1 * var(--rui-local-end-shadow-initial-offset)));
 }
 
 .isRootScrolledAtStart .scrollingShadows::before,

package/src/lib/components/ScrollView/index.js

@@ -1 +1 @@
-export { default } from './ScrollView';
+export { default as ScrollView } from './ScrollView';

package/src/lib/components/SelectField/README.mdx

@@ -12,7 +12,7 @@ import {
   Playground,
   Props,
 } from 'docz'
-import { SelectField } from './SelectField'
+import { SelectField } from '../..'
 
 ## Basic Usage
 
@@ -79,7 +79,7 @@ See [API](#api) for all available options.
   entered.
 
 - In case of a large amount of options, consider **grouping related items
-  together** by nesting them (implements the `optgroup` HTML element).
+  together** by nesting them.
 
 👉 We use the **native `select`** HTML element to improve user experience on
 mobile devices by using the native select of the platform.
@@ -240,6 +240,70 @@ Full-width fields span the full width of a parent:
   }}
 </Playground>
 
+## Grouping Related Options
+
+For a large amount of options you can group related items together by nesting
+them (implements the `optgroup` HTML element).
+
+<Playground>
+  {() => {
+    const [crop, setCrop] = React.useState('apple');
+    const options = [
+      {
+        label: 'Fruits',
+        options: [
+          {
+            label: 'Apple',
+            value: 'apple',
+          },
+          {
+            label: 'Banana',
+            value: 'banana',
+          },
+          {
+            label: 'Grapefruit',
+            value: 'grapefruit',
+          },
+        ],
+      },
+      {
+        label: 'Vegetables',
+        options: [
+          {
+            label: 'Beetroot',
+            value: 'beetroot',
+          },
+          {
+            label: 'Carrot',
+            value: 'carrot',
+          },
+          {
+            label: 'Tomato',
+            value: 'tomato',
+          },
+        ],
+      },
+    ];
+    return (
+      <>
+        <SelectField
+          label="Your favourite crop"
+          onChange={(e) => setCrop(e.target.value)}
+          options={options}
+          value={crop}
+        />
+        <SelectField
+          label="Your favourite crop"
+          onChange={(e) => setCrop(e.target.value)}
+          options={options}
+          value={crop}
+          variant="filled"
+        />
+      </>
+    );
+  }}
+</Playground>
+
 ## Invisible Label
 
 While it may be acceptable for login screens with just a few fields or for other

package/src/lib/components/SelectField/SelectField.jsx

@@ -7,27 +7,28 @@ import { getRootValidationStateClassName } from '../_helpers/getRootValidationSt
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
 import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
-import withForwardedRef from '../withForwardedRef';
+import { Option } from './_components/Option';
 import styles from './SelectField.scss';
 
-export const SelectField = ({
-  disabled,
-  forwardedRef,
-  fullWidth,
-  helpText,
-  id,
-  isLabelVisible,
-  label,
-  layout,
-  options,
-  required,
-  size,
-  validationState,
-  validationText,
-  value,
-  variant,
-  ...restProps
-}) => {
+export const SelectField = React.forwardRef((props, ref) => {
+  const {
+    disabled,
+    fullWidth,
+    helpText,
+    id,
+    isLabelVisible,
+    label,
+    layout,
+    options,
+    required,
+    size,
+    validationState,
+    validationText,
+    value,
+    variant,
+    ...restProps
+  } = props;
+
   const context = useContext(FormLayoutContext);
 
   return (
@@ -64,21 +65,36 @@ export const SelectField = ({
             className={styles.input}
             disabled={disabled}
             id={id}
-            ref={forwardedRef}
+            ref={ref}
             required={required}
             value={value}
           >
             {
-              options.map((option) => (
-                <option
-                  disabled={option.disabled}
-                  id={id && `${id}__item__${option.value}`}
-                  key={option.value}
-                  value={option.value}
-                >
-                  {option.label}
-                </option>
-              ))
+              options.map((option) => {
+                if ('options' in option) {
+                  return (
+                    <optgroup
+                      key={option.key ?? option.label}
+                      label={option.label}
+                    >
+                      {option.options.map((optgroupOption) => (
+                        <Option
+                          key={optgroupOption.key ?? optgroupOption.value}
+                          {...optgroupOption}
+                          {...(id && { id: `${id}__item__${optgroupOption.key ?? optgroupOption.value}` })}
+                        />
+                      ))}
+                    </optgroup>
+                  );
+                }
+                return (
+                  <Option
+                    key={option.key ?? option.value}
+                    {...option}
+                    {...(id && { id: `${id}__item__${option.key ?? option.value}` })}
+                  />
+                );
+              })
             }
           </select>
           <div className={styles.caret}>
@@ -107,16 +123,16 @@ export const SelectField = ({
       </div>
     </label>
   );
-};
+});
 
 SelectField.defaultProps = {
   disabled: false,
-  forwardedRef: undefined,
   fullWidth: false,
   helpText: null,
   id: undefined,
   isLabelVisible: true,
   layout: 'vertical',
+  ref: undefined,
   required: false,
   size: 'medium',
   validationState: null,
@@ -130,14 +146,6 @@ SelectField.propTypes = {
    * If `true`, the input will be disabled.
    */
   disabled: PropTypes.bool,
-  /**
-   * Reference forwarded to the `select` element.
-   */
-  forwardedRef: PropTypes.oneOfType([
-    PropTypes.func,
-    // eslint-disable-next-line react/forbid-prop-types
-    PropTypes.shape({ current: PropTypes.any }),
-  ]),
   /**
    * If `true`, the field will span the full width of its parent.
    */
@@ -157,6 +165,9 @@ SelectField.propTypes = {
    *
    * and of individual options:
    * * `<ID>__item__<VALUE>`
+   *
+   * If `key` in the option definition object is set,
+   * then `option.key` is used instead of `option.value` in place of `<VALUE>`.
    */
   id: PropTypes.string,
   /**
@@ -177,15 +188,48 @@ SelectField.propTypes = {
   layout: PropTypes.oneOf(['horizontal', 'vertical']),
   /**
    * Set of options to be chosen from.
+   *
+   * Either set of individual or grouped options is acceptable.
+   *
+   * For generating unique IDs the `option.value` is normally used. For cases when this is not practical or
+   * the `option.value` values are not unique the `option.key` attribute can be set manually.
+   * The same applies for the `label` value of grouped options which is supposed to be unique.
+   * To ensure uniqueness `key` attribute can be set manually.
+   */
+  options: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.shape({
+        key: PropTypes.string,
+        label: PropTypes.string.isRequired,
+        options: PropTypes.arrayOf(PropTypes.shape({
+          disabled: PropTypes.bool,
+          key: PropTypes.string,
+          label: PropTypes.string.isRequired,
+          value: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.number,
+          ]),
+        })),
+      }),
+    ),
+    PropTypes.arrayOf(PropTypes.shape({
+      disabled: PropTypes.bool,
+      key: PropTypes.string,
+      label: PropTypes.string.isRequired,
+      value: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number,
+      ]),
+    })),
+  ]).isRequired,
+  /**
+   * Reference forwarded to the `select` element.
    */
-  options: PropTypes.arrayOf(PropTypes.shape({
-    disabled: PropTypes.bool,
-    label: PropTypes.string.isRequired,
-    value: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-    ]),
-  })).isRequired,
+  ref: PropTypes.oneOfType([
+    PropTypes.func,
+    // eslint-disable-next-line react/forbid-prop-types
+    PropTypes.shape({ current: PropTypes.any }),
+  ]),
   /**
    * If `true`, the input will be required.
    */
@@ -215,6 +259,6 @@ SelectField.propTypes = {
   variant: PropTypes.oneOf(['filled', 'outline']),
 };
 
-export const SelectFieldWithGlobalProps = withForwardedRef(withGlobalProps(SelectField, 'SelectField'));
+export const SelectFieldWithGlobalProps = withGlobalProps(SelectField, 'SelectField');
 
 export default SelectFieldWithGlobalProps;

package/src/lib/components/SelectField/_components/Option/Option.jsx

@@ -0,0 +1,46 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export const Option = ({
+  disabled,
+  id,
+  label,
+  value,
+}) => (
+  <option
+    disabled={disabled}
+    id={id}
+    value={value}
+  >
+    {label}
+  </option>
+);
+
+Option.defaultProps = {
+  disabled: false,
+  id: undefined,
+};
+
+Option.propTypes = {
+  /**
+   * If `true` the option cannot be selected.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * ID of an individual option.
+   */
+  id: PropTypes.string,
+  /**
+   * Option label.
+   */
+  label: PropTypes.string.isRequired,
+  /**
+   * Option value.
+   */
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+  ]).isRequired,
+};
+
+export default Option;

package/src/lib/components/SelectField/_components/Option/index.js

@@ -0,0 +1 @@
+export { default as Option } from './Option';

package/src/lib/components/SelectField/index.js

@@ -1 +1 @@
-export { default } from './SelectField';
+export { default as SelectField } from './SelectField';

package/src/lib/components/Table/README.mdx

@@ -13,8 +13,10 @@ import {
   Props,
 } from 'docz'
 import Icon from '../../../docs/_components/Icon'
-import ScrollView from '../ScrollView'
-import { Table } from './Table'
+import {
+  ScrollView,
+  Table,
+} from '../..'
 
 ## Basic Usage
 

package/src/lib/components/Table/Table.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../provider';
-import Button from '../Button';
+import { Button } from '../..';
 import styles from './Table.scss';
 
 export class Table extends React.Component {

package/src/lib/components/Table/index.js

@@ -1 +1 @@
-export { default } from './Table';
+export { default as Table } from './Table';

package/src/lib/components/Tabs/README.mdx

@@ -11,9 +11,11 @@ import {
   Props,
 } from 'docz'
 import { Icon } from '../../../docs/_components/Icon/Icon'
-import ScrollView from '../ScrollView'
-import { Tabs } from './Tabs'
-import { TabsItem } from './TabsItem'
+import {
+  ScrollView,
+  Tabs,
+  TabsItem,
+} from '../..'
 
 Tabs separate related content into groups within a single context.
 

package/src/lib/components/Tabs/TabsItem.scss

@@ -47,8 +47,7 @@
     line-height: 1;
     text-decoration: none;
     color: theme.$item-color;
-    border-width: theme.$item-border-width;
-    border-style: solid;
+    border: theme.$item-border-width solid;
     border-color: theme.$item-border-color;
     border-top-left-radius: theme.$item-border-radius;
     border-top-right-radius: theme.$item-border-radius;

package/src/lib/components/Text/README.mdx

@@ -11,13 +11,15 @@ import {
   Props,
 } from 'docz'
 import { Placeholder } from '../../../docs/_components/Placeholder/Placeholder'
-import { Toolbar } from '../Toolbar/Toolbar'
-import { ToolbarGroup } from '../Toolbar/ToolbarGroup'
-import { ToolbarItem } from '../Toolbar/ToolbarItem'
-import { Button } from '../Button/Button'
-import { ButtonGroup } from '../ButtonGroup/ButtonGroup'
-import { TextField } from '../TextField/TextField'
-import { Text } from './Text'
+import {
+  Button,
+  ButtonGroup,
+  Text,
+  TextField,
+  Toolbar,
+  ToolbarGroup,
+  ToolbarItem,
+} from '../..'
 
 Text is a tiny component to control wrapping of text content.
 

package/src/lib/components/Text/index.js

@@ -1 +1 @@
-export { default } from './Text';
+export { default as Text } from './Text';

package/src/lib/components/TextArea/README.mdx

@@ -12,7 +12,7 @@ import {
   Playground,
   Props,
 } from 'docz'
-import { TextArea } from './TextArea'
+import { TextArea } from '../..'
 
 ## Basic Usage