@react-ui-org/react-ui 0.42.0 → 0.44.0

package/src/lib/components/Radio/Radio.jsx

@@ -0,0 +1,188 @@
+import PropTypes from 'prop-types';
+import React, { useContext } from 'react';
+import getRootValidationStateClassName from '../../helpers/getRootValidationStateClassName';
+import { resolveContextOrProp } from '../../helpers/resolveContextOrProp';
+import { withProviderContext } from '../../provider';
+import transferProps from '../../utils/transferProps';
+import { FormLayoutContext } from '../FormLayout';
+import styles from './Radio.scss';
+
+export const Radio = ({
+  disabled,
+  helpText,
+  id,
+  isLabelVisible,
+  label,
+  layout,
+  options,
+  required,
+  validationState,
+  validationText,
+  value,
+  ...restProps
+}) => {
+  const context = useContext(FormLayoutContext);
+
+  return (
+    <div
+      className={[
+        styles.root,
+        context ? styles.isRootInFormLayout : '',
+        resolveContextOrProp(context && context.layout, layout) === 'horizontal'
+          ? styles.rootLayoutHorizontal
+          : styles.rootLayoutVertical,
+        disabled ? styles.isRootDisabled : '',
+        required ? styles.isRootRequired : '',
+        getRootValidationStateClassName(validationState, styles),
+      ].join(' ')}
+      id={id}
+    >
+      <div
+        className={[
+          styles.label,
+          isLabelVisible ? '' : styles.isLabelHidden,
+        ].join(' ')}
+        id={id && `${id}__labelText`}
+      >
+        {label}
+      </div>
+      <div className={styles.field}>
+        <ul className={styles.list}>
+          {
+            options.map((option) => (
+              <li key={option.value}>
+                <label
+                  className={styles.option}
+                  htmlFor={id && `${id}__item__${option.value}`}
+                  id={id && `${id}__item__${option.value}__label`}
+                >
+                  <input
+                    {...transferProps(restProps)}
+                    className={styles.input}
+                    checked={restProps.onChange
+                      ? (value === option.value) || false
+                      : undefined}
+                    disabled={disabled || option.disabled}
+                    id={id && `${id}__item__${option.value}`}
+                    name={id}
+                    type="radio"
+                    value={option.value}
+                  />
+                  <span
+                    className={styles.optionLabel}
+                    id={id && `${id}__item__${option.value}__labelText`}
+                  >
+                    { option.label }
+                  </span>
+                </label>
+              </li>
+            ))
+          }
+        </ul>
+        {helpText && (
+          <div
+            className={styles.helpText}
+            id={id && `${id}__helpText`}
+          >
+            {helpText}
+          </div>
+        )}
+        {validationText && (
+          <div
+            className={styles.validationText}
+            id={id && `${id}__validationText`}
+          >
+            {validationText}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+Radio.defaultProps = {
+  disabled: false,
+  helpText: null,
+  id: undefined,
+  isLabelVisible: true,
+  layout: 'vertical',
+  required: false,
+  validationState: null,
+  validationText: null,
+  value: undefined,
+};
+
+Radio.propTypes = {
+  /**
+   * If `true`, the input will be disabled.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Optional help text.
+   */
+  helpText: PropTypes.node,
+  /**
+   * ID of the root HTML element.
+   *
+   * Also serves as base for ids of nested elements:
+   * * `<ID>__labelText`
+   * * `<ID>__helpText`
+   * * `<ID>__validationText`
+   *
+   * and of individual options (`<input>`):
+   * * `<ID>__item__<VALUE>`
+   * * `<ID>__item__<VALUE>__label`
+   * * `<ID>__item__<VALUE>__labelText`
+   */
+  id: PropTypes.string,
+  /**
+   * If `false`, the label will be visually hidden (but remains accessible by assistive
+   * technologies).
+   */
+  isLabelVisible: PropTypes.bool,
+  /**
+   * Label of the group of options.
+   */
+  label: PropTypes.string.isRequired,
+  /**
+   * Layout of the field.
+   *
+   * Ignored if the component is rendered within `FormLayout` component
+   * as the value is inherited in such case.
+   */
+  layout: PropTypes.oneOf(['horizontal', 'vertical']),
+  /**
+   * Set of options to be chosen from.
+   */
+  options: PropTypes.arrayOf(PropTypes.shape({
+    disabled: PropTypes.bool,
+    label: PropTypes.string.isRequired,
+    value: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+    ]),
+  })).isRequired,
+  /**
+   * If `true`, the input will be required.
+   */
+  required: PropTypes.bool,
+  /**
+   * Alter the field to provide feedback based on validation result.
+   */
+  validationState: PropTypes.oneOf(['invalid', 'valid', 'warning']),
+  /**
+   * Validation message to be displayed.
+   */
+  validationText: PropTypes.node,
+  /**
+   * Value of the input.
+   */
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+  ]),
+};
+
+export const RadioWithContext = withProviderContext(Radio, 'Radio');
+
+export default RadioWithContext;

package/src/lib/components/{ui/Radio → Radio}/Radio.scss

@@ -1,12 +1,12 @@
-@use '../../../styles/tools/form-fields/box-field-elements';
-@use '../../../styles/tools/form-fields/box-field-layout';
-@use '../../../styles/tools/form-fields/foundation';
-@use '../../../styles/tools/form-fields/inline-field-elements';
-@use '../../../styles/tools/form-fields/inline-field-layout';
-@use '../../../styles/tools/form-fields/variants';
-@use '../../../styles/tools/accessibility';
-@use '../../../styles/tools/reset';
-@use '../../../styles/tools/spacing';
+@use '../../styles/tools/form-fields/box-field-elements';
+@use '../../styles/tools/form-fields/box-field-layout';
+@use '../../styles/tools/form-fields/foundation';
+@use '../../styles/tools/form-fields/inline-field-elements';
+@use '../../styles/tools/form-fields/inline-field-layout';
+@use '../../styles/tools/form-fields/variants';
+@use '../../styles/tools/accessibility';
+@use '../../styles/tools/reset';
+@use '../../styles/tools/spacing';
 
 // Foundation
 .root {

package/src/lib/components/{ui/ScrollView → ScrollView}/README.mdx

@@ -1,7 +1,7 @@
 ---
 name: ScrollView
-menu: 'UI'
-route: /components/ui/scroll-view
+menu: 'Miscellaneous'
+route: /components/scroll-view
 ---
 
 # ScrollView
@@ -12,11 +12,11 @@ import {
   Playground,
   Props,
 } from 'docz'
-import { Placeholder } from '../../../../docs/_components/Placeholder/Placeholder'
+import { Placeholder } from '../../../docs/_components/Placeholder/Placeholder'
 import Button from '../Button'
 import Radio from '../Radio'
-import { Toolbar } from '../../layout/Toolbar/Toolbar'
-import { ToolbarItem } from '../../layout/Toolbar/ToolbarItem'
+import { Toolbar } from '../Toolbar/Toolbar'
+import { ToolbarItem } from '../Toolbar/ToolbarItem'
 import {
   ScrollViewWithContext as ScrollView,
   ScrollView as ParsableScrollView,
@@ -219,7 +219,8 @@ property defined because it detects changes of these keys.
         <Toolbar>
           <ToolbarItem>
             <Radio
-              changeHandler={(e) => setDirection(e.target.value)}
+              label="Direction:"
+              onChange={(e) => setDirection(e.target.value)}
               options={[
                 {
                   label: 'Vertical',
@@ -230,13 +231,13 @@ property defined because it detects changes of these keys.
                   value: 'horizontal',
                 },
               ]}
-              label="Direction:"
               value={direction}
             />
           </ToolbarItem>
           <ToolbarItem>
             <Radio
-              changeHandler={(e) => setAutoScroll(e.target.value)}
+              label="Autoscroll:"
+              onChange={(e) => setAutoScroll(e.target.value)}
               options={[
                 {
                   label: 'Always',
@@ -247,14 +248,13 @@ property defined because it detects changes of these keys.
                   value: 'detectEnd',
                 },
               ]}
-              label="Autoscroll:"
               value={autoScroll}
             />
           </ToolbarItem>
           <ToolbarItem>
             <Button
               label="Add text"
-              clickHandler={
+              onClick={
                 () => setScrollViewContent(
                   `${scrollViewContent} ${generateRandomString()}`,
                 )

package/src/lib/components/{ui/ScrollView → ScrollView}/ScrollView.jsx

@@ -5,10 +5,10 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { useLoadResize } from '../../../hooks/useLoadResizeHook';
-import { useScrollPosition } from '../../../hooks/useScrollPositionHook';
-import { withProviderContext } from '../../../provider';
-import { getElementsPositionDifference } from '../../../services/elementPositionService';
+import { useLoadResize } from '../../hooks/useLoadResizeHook';
+import { useScrollPosition } from '../../hooks/useScrollPositionHook';
+import { withProviderContext } from '../../provider';
+import { getElementsPositionDifference } from '../../services/elementPositionService';
 import styles from './ScrollView.scss';
 
 // Function `getElementsPositionDifference` sometimes returns floating point values that results
@@ -315,10 +315,7 @@ ScrollView.propTypes = {
   /**
    * Content to be scrollable.
    */
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-  ]).isRequired,
+  children: PropTypes.node.isRequired,
   /**
    * Custom CSS to replace the default end scrolling shadow.
    */
@@ -350,8 +347,10 @@ ScrollView.propTypes = {
    */
   direction: PropTypes.oneOf(['horizontal', 'vertical']),
   /**
-   * ID of the root HTML element. It also serves as a prefix for important inner elements:
-   * `<ID>__content`, `<ID>__arrowPrevButton`, and `<ID>__arrowNextButton`.
+   * ID of the root HTML element. It also serves as base for nested elements:
+   * * `<ID>__content`
+   * * `<ID>__arrowPrevButton`
+   * * `<ID>__arrowNextButton`
    */
   id: PropTypes.string,
   /**

package/src/lib/components/{ui/ScrollView → ScrollView}/ScrollView.scss

@@ -21,12 +21,12 @@
 // 7. Hide content overflowing in the other direction because scrollbars would be unreachable under
 //    scrolling shadows.
 
-@use '../../../styles/tools/accessibility';
-@use '../../../styles/tools/caret';
-@use '../../../styles/tools/reset';
-@use '../../../styles/tools/scrollbar';
-@use '../../../styles/tools/spacing';
-@use '../../../styles/tools/transition';
+@use '../../styles/tools/accessibility';
+@use '../../styles/tools/caret';
+@use '../../styles/tools/reset';
+@use '../../styles/tools/scrollbar';
+@use '../../styles/tools/spacing';
+@use '../../styles/tools/transition';
 @use 'theme';
 
 $_arrow-inner-spacing: spacing.of(2);