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

package/src/lib/components/TextArea/TextArea.jsx

@@ -7,29 +7,29 @@ import { getRootValidationStateClassName } from '../_helpers/getRootValidationSt
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
 import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
-import withForwardedRef from '../withForwardedRef';
 import styles from './TextArea.scss';
 
-export const TextArea = ({
-  cols,
-  disabled,
-  forwardedRef,
-  fullWidth,
-  helpText,
-  id,
-  isLabelVisible,
-  label,
-  layout,
-  placeholder,
-  required,
-  rows,
-  size,
-  validationState,
-  validationText,
-  value,
-  variant,
-  ...restProps
-}) => {
+export const TextArea = React.forwardRef((props, ref) => {
+  const {
+    cols,
+    disabled,
+    fullWidth,
+    helpText,
+    id,
+    isLabelVisible,
+    label,
+    layout,
+    placeholder,
+    required,
+    rows,
+    size,
+    validationState,
+    validationText,
+    value,
+    variant,
+    ...restProps
+  } = props;
+
   const context = useContext(FormLayoutContext);
 
   return (
@@ -68,7 +68,7 @@ export const TextArea = ({
             disabled={disabled}
             id={id}
             placeholder={placeholder}
-            ref={forwardedRef}
+            ref={ref}
             required={required}
             rows={rows}
             value={value}
@@ -96,18 +96,18 @@ export const TextArea = ({
       </div>
     </label>
   );
-};
+});
 
 TextArea.defaultProps = {
   cols: null,
   disabled: false,
-  forwardedRef: undefined,
   fullWidth: false,
   helpText: null,
   id: undefined,
   isLabelVisible: true,
   layout: 'vertical',
   placeholder: null,
+  ref: undefined,
   required: false,
   rows: 3,
   size: 'medium',
@@ -126,14 +126,6 @@ TextArea.propTypes = {
    * If `true`, the input will be disabled.
    */
   disabled: PropTypes.bool,
-  /**
-   * Reference forwarded to the `textarea` 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.
    */
@@ -172,6 +164,14 @@ TextArea.propTypes = {
   /**
    * If `true`, the input will be required.
    */
+  /**
+   * Reference forwarded to the `textarea` element.
+   */
+  ref: PropTypes.oneOfType([
+    PropTypes.func,
+    // eslint-disable-next-line react/forbid-prop-types
+    PropTypes.shape({ current: PropTypes.any }),
+  ]),
   required: PropTypes.bool,
   /**
    * The number of visible text lines for the control.
@@ -202,6 +202,6 @@ TextArea.propTypes = {
   variant: PropTypes.oneOf(['filled', 'outline']),
 };
 
-export const TextAreaWithGlobalProps = withForwardedRef(withGlobalProps(TextArea, 'TextArea'));
+export const TextAreaWithGlobalProps = withGlobalProps(TextArea, 'TextArea');
 
 export default TextAreaWithGlobalProps;

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

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

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

@@ -12,7 +12,7 @@ import {
   Playground,
   Props,
 } from 'docz'
-import { TextField } from './TextField'
+import { TextField } from '../..'
 
 ## Basic Usage
 
@@ -189,8 +189,8 @@ attribute to achieve that effect (doesn't work for `number` input type though).
 by `inputSize` API option) is
 [not available for `number` input type][input-number-size]. TextField supports
 `inputSize` option for all types of inputs, so you can use it whenever you find
-it suitable. Just keep in mind the `size` attribute will not be present for
-numeric inputs.
+it suitable. Just keep in mind the `size` attribute will not be present in the
+DOM for numeric inputs.
 
 <Playground>
   <TextField

package/src/lib/components/TextField/TextField.jsx

@@ -7,31 +7,30 @@ import { getRootValidationStateClassName } from '../_helpers/getRootValidationSt
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
 import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
-import withForwardedRef from '../withForwardedRef';
 import styles from './TextField.scss';
 
 const SMALL_INPUT_SIZE = 10;
 
-export const TextField = ({
-  disabled,
-  forwardedRef,
-  fullWidth,
-  helpText,
-  id,
-  inputSize,
-  isLabelVisible,
-  label,
-  layout,
-  placeholder,
-  required,
-  size,
-  type,
-  validationState,
-  validationText,
-  value,
-  variant,
-  ...restProps
-}) => {
+export const TextField = React.forwardRef((props, ref) => {
+  const {
+    disabled,
+    fullWidth,
+    helpText,
+    id,
+    inputSize,
+    isLabelVisible,
+    label,
+    layout,
+    placeholder,
+    required,
+    size,
+    type,
+    validationState,
+    validationText,
+    value,
+    variant,
+    ...restProps
+  } = props;
   const context = useContext(FormLayoutContext);
   const hasSmallInput = (inputSize !== null) && (inputSize <= SMALL_INPUT_SIZE);
 
@@ -73,7 +72,7 @@ export const TextField = ({
             disabled={disabled}
             id={id}
             placeholder={placeholder}
-            ref={forwardedRef}
+            ref={ref}
             required={required}
             size={type !== 'number' ? inputSize : null}
             type={type}
@@ -102,11 +101,10 @@ export const TextField = ({
       </div>
     </label>
   );
-};
+});
 
 TextField.defaultProps = {
   disabled: false,
-  forwardedRef: undefined,
   fullWidth: false,
   helpText: null,
   id: undefined,
@@ -114,6 +112,7 @@ TextField.defaultProps = {
   isLabelVisible: true,
   layout: 'vertical',
   placeholder: null,
+  ref: undefined,
   required: false,
   size: 'medium',
   type: 'text',
@@ -128,14 +127,6 @@ TextField.propTypes = {
    * If `true`, the input will be disabled.
    */
   disabled: PropTypes.bool,
-  /**
-   * Reference forwarded to the `input` 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.
    */
@@ -153,7 +144,7 @@ TextField.propTypes = {
    */
   id: PropTypes.string,
   /**
-   * Treat the field differently when it's inside a FormLayout. Do not set manually!
+   * Width of the input field. Translated as `size` attribute for input types other than `number`.
    */
   inputSize: PropTypes.number,
   /**
@@ -176,6 +167,14 @@ TextField.propTypes = {
    * Optional example value.
    */
   placeholder: PropTypes.string,
+  /**
+   * Reference forwarded to the `input` element.
+   */
+  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.
    */
@@ -209,6 +208,6 @@ TextField.propTypes = {
   variant: PropTypes.oneOf(['filled', 'outline']),
 };
 
-export const TextFieldWithGlobalProps = withForwardedRef(withGlobalProps(TextField, 'TextField'));
+export const TextFieldWithGlobalProps = withGlobalProps(TextField, 'TextField');
 
 export default TextFieldWithGlobalProps;

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

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

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

@@ -10,7 +10,7 @@ import {
   Playground,
   Props,
 } from 'docz'
-import { TextLink } from './TextLink'
+import { TextLink } from '../..'
 
 TextLink allows users to follow navigation.
 

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

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

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

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

package/src/lib/components/Toggle/Toggle.jsx

@@ -5,24 +5,24 @@ import { classNames } from '../../utils/classNames';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
 import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
-import withForwardedRef from '../withForwardedRef';
 import styles from './Toggle.scss';
 
-export const Toggle = ({
-  checked,
-  disabled,
-  forwardedRef,
-  helpText,
-  id,
-  isLabelVisible,
-  label,
-  labelPosition,
-  required,
-  validationState,
-  validationText,
-  value,
-  ...restProps
-}) => {
+export const Toggle = React.forwardRef((props, ref) => {
+  const {
+    checked,
+    disabled,
+    helpText,
+    id,
+    isLabelVisible,
+    label,
+    labelPosition,
+    required,
+    validationState,
+    validationText,
+    value,
+    ...restProps
+  } = props;
+
   const context = useContext(FormLayoutContext);
 
   return (
@@ -56,7 +56,7 @@ export const Toggle = ({
           disabled={disabled}
           id={id}
           name={id}
-          ref={forwardedRef}
+          ref={ref}
           required={required}
           type="checkbox"
           value={value}
@@ -80,16 +80,16 @@ export const Toggle = ({
       )}
     </label>
   );
-};
+});
 
 Toggle.defaultProps = {
   checked: undefined,
   disabled: false,
-  forwardedRef: undefined,
   helpText: null,
   id: undefined,
   isLabelVisible: true,
   labelPosition: 'after',
+  ref: undefined,
   required: false,
   validationState: null,
   validationText: null,
@@ -105,14 +105,6 @@ Toggle.propTypes = {
    * If `true`, the input will be disabled.
    */
   disabled: PropTypes.bool,
-  /**
-   * Reference forwarded to the `input` element.
-   */
-  forwardedRef: PropTypes.oneOfType([
-    PropTypes.func,
-    // eslint-disable-next-line react/forbid-prop-types
-    PropTypes.shape({ current: PropTypes.any }),
-  ]),
   /**
    * Optional help text.
    */
@@ -138,6 +130,14 @@ Toggle.propTypes = {
    * Placement of the label relative to the input.
    */
   labelPosition: PropTypes.oneOf(['before', 'after']),
+  /**
+   * Reference forwarded to the `input` element.
+   */
+  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.
    */
@@ -159,6 +159,6 @@ Toggle.propTypes = {
   ]),
 };
 
-export const ToggleWithGlobalProps = withForwardedRef(withGlobalProps(Toggle, 'Toggle'));
+export const ToggleWithGlobalProps = withGlobalProps(Toggle, 'Toggle');
 
 export default ToggleWithGlobalProps;

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

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

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

@@ -11,12 +11,14 @@ import {
   Props,
 } from 'docz'
 import { Placeholder } from '../../../docs/_components/Placeholder/Placeholder'
-import { CheckboxField } from '../CheckboxField/CheckboxField'
-import { Button } from '../Button/Button'
-import { ButtonGroup } from '../ButtonGroup/ButtonGroup'
-import { Toolbar } from './Toolbar'
-import { ToolbarGroup } from './ToolbarGroup'
-import { ToolbarItem } from './ToolbarItem'
+import {
+  CheckboxField,
+  Button,
+  ButtonGroup,
+  Toolbar,
+  ToolbarGroup,
+  ToolbarItem,
+} from '../..'
 
 The responsive Toolbar layout is a versatile tool that allows spacing, grouping,
 and aligning inline items.

package/src/lib/components/_helpers/transferProps.js

@@ -1,7 +1,7 @@
 export const transferProps = ({
   children,
   className,
-  forwardedRef,
+  ref,
   staticContext,
   ...restProps
 }) => restProps;

package/src/lib/index.js

@@ -1,15 +1,15 @@
 // Components
-export { default as Alert } from './components/Alert';
-export { default as Badge } from './components/Badge';
-export { default as Button } from './components/Button';
+export { Alert } from './components/Alert';
+export { Badge } from './components/Badge';
+export { Button } from './components/Button';
 export { ButtonGroup } from './components/ButtonGroup';
 export {
   Card,
   CardBody,
   CardFooter,
 } from './components/Card';
-export { default as CheckboxField } from './components/CheckboxField';
-export { default as FileInputField } from './components/FileInputField';
+export { CheckboxField } from './components/CheckboxField';
+export { FileInputField } from './components/FileInputField';
 export {
   FormLayout,
   FormLayoutCustomField,
@@ -18,25 +18,33 @@ export {
   Grid,
   GridSpan,
 } from './components/Grid';
-export { default as Modal } from './components/Modal';
-export { default as Paper } from './components/Paper';
+export {
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalTitle,
+} from './components/Modal';
+export { Paper } from './components/Paper';
 export {
   Popover,
   PopoverWrapper,
 } from './components/Popover';
-export { default as Radio } from './components/Radio';
-export { default as ScrollView } from './components/ScrollView';
-export { default as SelectField } from './components/SelectField';
+export { Radio } from './components/Radio';
+export { ScrollView } from './components/ScrollView';
+export { SelectField } from './components/SelectField';
 export {
   Tabs,
   TabsItem,
 } from './components/Tabs';
-export { default as Table } from './components/Table';
-export { default as Text } from './components/Text';
-export { default as TextArea } from './components/TextArea';
-export { default as TextField } from './components/TextField';
-export { default as TextLink } from './components/TextLink';
-export { default as Toggle } from './components/Toggle';
+export { Table } from './components/Table';
+export { Text } from './components/Text';
+export { TextArea } from './components/TextArea';
+export { TextField } from './components/TextField';
+export { TextLink } from './components/TextLink';
+export { Toggle } from './components/Toggle';
 export {
   Toolbar,
   ToolbarGroup,

package/src/lib/provider/withGlobalProps.jsx

@@ -1,8 +1,12 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import RUIContext from './RUIContext';
 
 export default (Component, componentName) => {
-  const WithGlobalPropsComponent = (props) => (
+  const WithGlobalPropsComponent = ({
+    forwardedRef,
+    ...rest
+  }) => (
     <RUIContext.Consumer>
       {({ globalProps }) => {
         const contextGlobalProps = globalProps ? globalProps[componentName] : null;
@@ -10,12 +14,25 @@ export default (Component, componentName) => {
         return (
           <Component
             {...contextGlobalProps}
-            {...props}
+            {...rest}
+            ref={forwardedRef}
           />
         );
       }}
     </RUIContext.Consumer>
   );
 
-  return WithGlobalPropsComponent;
+  WithGlobalPropsComponent.defaultProps = {
+    forwardedRef: undefined,
+  };
+
+  WithGlobalPropsComponent.propTypes = {
+    forwardedRef: PropTypes.oneOfType([
+      PropTypes.func,
+      // eslint-disable-next-line react/forbid-prop-types
+      PropTypes.shape({ current: PropTypes.any }),
+    ]),
+  };
+
+  return React.forwardRef((props, ref) => (<WithGlobalPropsComponent {...props} forwardedRef={ref} />));
 };

package/src/lib/theme.scss

@@ -196,13 +196,6 @@
     --rui-FormLayout--horizontal__label__width--auto: auto;
     --rui-FormLayout--horizontal__label__width--limited: fit-content(50%);
 
-    //
-    // Grid
-    // ====
-
-    --rui-Grid__column-gap: var(--rui-spacing-4);
-    --rui-Grid__row-gap: var(--rui-spacing-4);
-
     //
     // Toolbar
     // =======
@@ -850,24 +843,21 @@
     --rui-FormField--check--checked__border-color: var(--rui-color-active);
     --rui-FormField--check--checked__check-background-color: var(--rui-color-active);
 
-    //
-    // TextLink
-    // ========
-
-    --rui-TextLink__color: var(--rui-link-color);
-    --rui-TextLink__text-decoration: var(--rui-link-decoration);
-    --rui-TextLink--hover__color: var(--rui-link-hover-color);
-    --rui-TextLink--hover__text-decoration: var(--rui-link-hover-decoration);
-
     //
     // Modal
     // =====
 
+    --rui-Modal__padding-x: var(--rui-spacing-4);
+    --rui-Modal__padding-y: var(--rui-spacing-4);
     --rui-Modal__background: var(--rui-color-white);
-    --rui-Modal__box-shadow: var(--rui-elevation-2);
+    --rui-Modal__box-shadow: none;
+    --rui-Modal__separator__width: var(--rui-border-width);
+    --rui-Modal__separator__color: var(--rui-color-gray-100);
+    --rui-Modal__header__gap: var(--rui-spacing-2);
     --rui-Modal__outer-spacing--xs: var(--rui-spacing-2);
     --rui-Modal__outer-spacing--sm: var(--rui-spacing-6);
-    --rui-Modal__footer__background: var(--rui-color-gray-100);
+    --rui-Modal__footer__background: var(--rui-color-white);
+    --rui-Modal__footer__gap: var(--rui-spacing-2);
     --rui-Modal__backdrop__background: rgb(0 0 0 / 50%);
     --rui-Modal--auto__min-width: 18rem;
     --rui-Modal--auto__max-width: 60rem;
@@ -894,7 +884,7 @@
     // Popover
     // =======
 
-    --rui-Popover__width: 15rem;
+    --rui-Popover__max-width: 15rem;
     --rui-Popover__padding: var(--rui-spacing-3);
     --rui-Popover__border-width: 0;
     --rui-Popover__border-color: transparent;
@@ -903,13 +893,6 @@
     --rui-Popover__background-color: var(--rui-color-white);
     --rui-Popover__box-shadow: var(--rui-elevation-2);
 
-    //
-    // ScrollView
-    // ==========
-
-    --rui-ScrollView__arrow__initial-offset: -0.5rem;
-    --rui-ScrollView__shadow__initial-offset: -1rem;
-
     //
     // Tabs
     // ====
@@ -961,4 +944,13 @@
     --rui-Tabs__item--active__box-shadow: var(--rui-Tabs__item__box-shadow);
     --rui-Tabs__item--active__shift-y: -0.25em;
     --rui-Tabs__item--active__label__shift-y: 0;
+
+    //
+    // TextLink
+    // ========
+
+    --rui-TextLink__color: var(--rui-link-color);
+    --rui-TextLink__text-decoration: var(--rui-link-decoration);
+    --rui-TextLink--hover__color: var(--rui-link-hover-color);
+    --rui-TextLink--hover__text-decoration: var(--rui-link-hover-decoration);
 }

package/src/lib/translations/en.js

@@ -2,7 +2,7 @@ export default {
   Alert: {
     close: 'Close',
   },
-  Modal: {
+  ModalCloseButton: {
     close: 'Close',
   },
   ScrollView: {

package/src/lib/components/Grid/_theme.scss

@@ -1,11 +0,0 @@
-$responsive-properties: (
-    columns: 1fr,
-    column-gap: var(--rui-Grid__column-gap),
-    rows: auto,
-    row-gap: var(--rui-Grid__row-gap),
-    auto-flow: initial,
-    align-content: initial,
-    align-items: initial,
-    justify-content: initial,
-    justify-items: initial,
-);

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

@@ -1,2 +0,0 @@
-$arrow-initial-offset: var(--rui-ScrollView__arrow__initial-offset);
-$shadow-initial-offset: var(--rui-ScrollView__shadow__initial-offset);

package/src/lib/components/withForwardedRef.jsx

@@ -1,11 +0,0 @@
-import React from 'react';
-
-export default (WrappedComponent) => {
-  const withForwardedRef = (props, ref) => (
-    <WrappedComponent {...props} forwardedRef={ref} />
-  );
-
-  withForwardedRef.displayName = `withForwardedRef(${WrappedComponent.name || WrappedComponent.name})`;
-
-  return React.forwardRef(withForwardedRef);
-};