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

package/src/components/Toolbar/Toolbar.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
-import { classNames } from '../../utils/classNames';
-import { transferProps } from '../../utils/transferProps';
+import { withGlobalProps } from '../../providers/globalProps';
+import { classNames } from '../../helpers/classNames/classNames';
+import { transferProps } from '../../helpers/transferProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { getAlignClassName } from './_helpers/getAlignClassName';
 import { getJustifyClassName } from './_helpers/getJustifyClassName';

package/src/components/Toolbar/ToolbarGroup.jsx

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

package/src/components/Toolbar/ToolbarItem.jsx

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

package/src/components/_helpers/resolveContextOrProp.js

@@ -1,7 +1,10 @@
 export const resolveContextOrProp = (contextValue, propValue) => {
-  if (contextValue != null) {
-    return contextValue;
+  // We need to test:
+  //  * `false` - for when the `contextValue` is boolean
+  //  * `null` - for when the `contextValue` is non-boolean
+  if (contextValue === false || contextValue === null) {
+    return propValue;
   }
 
-  return propValue;
+  return contextValue;
 };

package/src/helpers/classNames/README.md

@@ -0,0 +1,65 @@
+# classNames
+
+The `classNames` helper function simplifies creating a string passable to
+the `class` / `className` attribute.
+
+It accepts multiple arguments, filters out invalid values, and returns a single
+string where the remaining parameters are joined by a space.
+
+## Usage
+
+To use `classNames` helper, you need to import it first:
+
+```js
+import { classNames } from '@react-ui-org/react-ui';
+```
+
+And use it:
+
+```docoff-react-preview
+<>
+  <div
+  className={classNames(
+    'd-block',
+    new Date('2025-01-01T00:00:00') < new Date() && 'text-danger',
+  )}
+  >
+  {(new Date()).toLocaleDateString()}
+  </div>
+  <div
+  className={classNames(
+    'd-block',
+    new Date('3000-01-01T00:00:00') < new Date() && 'text-danger',
+  )}
+  >
+  {(new Date()).toLocaleDateString()}
+  </div>
+</>
+```
+
+## Parameter Filtering
+
+The `classNames` function:
+
+* filters out all values that are not strings
+* filters out empty strings
+* filters out whitespace only strings
+
+<!-- markdownlint-disable MD010 -->
+```docoff-react-preview
+{classNames(
+  'class-1',
+  'class-2 class-3',
+  ' ',
+  ' ', // non-breakable space
+  '	', // tab
+  '',
+  0,
+  1,
+  null,
+  undefined,
+  true,
+  false,
+)}
+```
+<!-- markdownlint-enable MD010 -->

package/src/helpers/classNames/classNames.js

@@ -0,0 +1,11 @@
+export const classNames = (...classes) => {
+  const filteredClassNames = classes.filter(
+    (className) => typeof className === 'string'
+    && className.trim().length > 0,
+  );
+
+  return filteredClassNames.length > 0
+    ? filteredClassNames.join(' ')
+    // React does not render attributes whose value is `undefined` and we do not want an empty `class` attribute in HTML
+    : undefined;
+};

package/src/helpers/classNames/index.js

@@ -0,0 +1 @@
+export { classNames } from './classNames';

package/src/helpers/transferProps/README.md

@@ -0,0 +1,46 @@
+# transferProps
+
+The `transferProps` helper controls passing of props from the React component
+to the HTML element.
+
+It enables making the component interactive and helps to improve its
+accessibility. However some props should never be passed to the HTML element
+as it would break things. This function is used to filter them out. Among these
+props are:
+
+- `children`
+- `className`
+- `contentEditable`
+- `dangerouslySetInnerHtml`
+- `ref`
+- `staticContext`
+- `style`
+- `suppressContentEditableWarning`
+
+👉 When run in development mode, the function will log the error to the console
+if any invalid props are passed.
+
+## Basic Usage
+
+To use `transferProps` helper, you need to import it first:
+
+```js
+import { transferProps } from "@react-ui-org/react-ui";
+```
+
+And use it:
+
+```jsx
+const CustomComponent = ({
+  children,
+  id,
+  ...restProps
+}) => (
+  <div
+    {...transferProps(restProps)}
+    id={id && `${id}__customComponent`}
+  >
+    {children}
+  </div>
+);
+```

package/src/helpers/transferProps/index.js

@@ -0,0 +1 @@
+export { transferProps } from './transferProps';

package/src/index.js

@@ -57,9 +57,10 @@ export {
   ToolbarItem,
 } from './components/Toolbar';
 
-// Provider
-export { RUIProvider } from './provider';
+// Providers
+export { GlobalPropsProvider } from './providers/globalProps';
+export { TranslationsProvider } from './providers/translations';
 
-// Utils
-export { classNames } from './utils/classNames';
-export { transferProps } from './utils/transferProps';
+// Helpers
+export { classNames } from './helpers/classNames';
+export { transferProps } from './helpers/transferProps';

package/src/providers/globalProps/GlobalPropsContext.jsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const GlobalPropsContext = React.createContext({});
+
+export default GlobalPropsContext;

package/src/providers/globalProps/GlobalPropsProvider.jsx

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+import React, {
+  useContext,
+} from 'react';
+import { mergeDeep } from '../../utils/mergeDeep';
+import GlobalPropsContext from './GlobalPropsContext';
+
+const GlobalPropsProvider = ({
+  children,
+  globalProps,
+}) => {
+  const contextGlobalProps = useContext(GlobalPropsContext);
+
+  return (
+    <GlobalPropsContext.Provider
+      value={mergeDeep(contextGlobalProps, globalProps)}
+    >
+      {children}
+    </GlobalPropsContext.Provider>
+  );
+};
+
+GlobalPropsProvider.defaultProps = {
+  children: null,
+  globalProps: {},
+};
+
+GlobalPropsProvider.propTypes = {
+  children: PropTypes.node,
+  globalProps: PropTypes.shape({}),
+};
+
+export default GlobalPropsProvider;

package/src/providers/globalProps/index.js

@@ -0,0 +1,3 @@
+export { default as GlobalPropsContext } from './GlobalPropsContext';
+export { default as GlobalPropsProvider } from './GlobalPropsProvider';
+export { default as withGlobalProps } from './withGlobalProps';

package/src/{provider → providers/globalProps}/withGlobalProps.jsx

@@ -1,26 +1,24 @@
 import PropTypes from 'prop-types';
-import React from 'react';
-import RUIContext from './RUIContext';
+import React, {
+  useContext,
+} from 'react';
+import GlobalPropsContext from './GlobalPropsContext';
 
 export default (Component, componentName) => {
   const WithGlobalPropsComponent = ({
     forwardedRef,
     ...rest
-  }) => (
-    <RUIContext.Consumer>
-      {({ globalProps }) => {
-        const contextGlobalProps = globalProps ? globalProps[componentName] : null;
+  }) => {
+    const contextGlobalProps = useContext(GlobalPropsContext);
 
-        return (
-          <Component
-            {...contextGlobalProps}
-            {...rest}
-            ref={forwardedRef}
-          />
-        );
-      }}
-    </RUIContext.Consumer>
-  );
+    return (
+      <Component
+        {...contextGlobalProps[componentName] || {}}
+        {...rest}
+        ref={forwardedRef}
+      />
+    );
+  };
 
   WithGlobalPropsComponent.defaultProps = {
     forwardedRef: undefined,
@@ -29,6 +27,8 @@ export default (Component, componentName) => {
   WithGlobalPropsComponent.propTypes = {
     forwardedRef: PropTypes.oneOfType([
       PropTypes.func,
+
+      // The props can be of any type and here we need to support them all
       // eslint-disable-next-line react/forbid-prop-types
       PropTypes.shape({ current: PropTypes.any }),
     ]),

package/src/providers/translations/TranslationsContext.jsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import defaultTranslations from '../../translations/en';
+
+const RUIContext = React.createContext(defaultTranslations);
+
+export default RUIContext;

package/src/providers/translations/TranslationsProvider.jsx

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+import React, {
+  useContext,
+} from 'react';
+import { mergeDeep } from '../../utils/mergeDeep';
+import TranslationsContext from './TranslationsContext';
+
+const TranslationsProvider = ({
+  children,
+  translations,
+}) => {
+  const contextTranslations = useContext(TranslationsContext);
+
+  return (
+    <TranslationsContext.Provider
+      value={mergeDeep(contextTranslations, translations)}
+    >
+      {children}
+    </TranslationsContext.Provider>
+  );
+};
+
+TranslationsProvider.defaultProps = {
+  children: null,
+  translations: {},
+};
+
+TranslationsProvider.propTypes = {
+  children: PropTypes.node,
+  translations: PropTypes.shape({}),
+};
+
+export default TranslationsProvider;

package/src/providers/translations/index.js

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

package/src/styles/elements/_links.scss

@@ -1,12 +1,5 @@
-@use "../theme/links";
+@use "../tools/links";
 
 a {
-    text-decoration: links.$decoration;
-    color: links.$color;
-
-    &:hover,
-    &:focus {
-        text-decoration: links.$hover-decoration;
-        color: links.$hover-color;
-    }
+    @include links.base();
 }

package/src/styles/generic/_focus.scss

@@ -6,6 +6,6 @@
     outline: none;
 }
 
-:is(a, button, input, select, textarea, [type="button"], [type="submit"]) {
+:is(a, button, input, select, textarea, [type="button"], [type="submit"]):focus-visible {
     @include accessibility.focus-ring();
 }

package/src/styles/theme/_form-fields.scss

@@ -30,6 +30,25 @@ $horizontal-label-vertical-alignment: var(--rui-FormField--horizontal__label__ve
 $horizontal-field-vertical-alignment: var(--rui-FormField--horizontal__field__vertical-alignment);
 $horizontal-full-width-label-width: var(--rui-FormField--horizontal--full-width__label__width);
 
+// Form fields: links in validation states
+$link-validation-colors: (
+    invalid: (
+        default: var(--rui-color-feedback-danger),
+        hover: var(--rui-color-feedback-danger-hover),
+        active: var(--rui-color-feedback-danger-active),
+    ),
+    valid: (
+        default: var(--rui-color-feedback-success),
+        hover: var(--rui-color-feedback-success-hover),
+        active: var(--rui-color-feedback-success-active),
+    ),
+    warning: (
+        default: var(--rui-color-feedback-warning),
+        hover: var(--rui-color-feedback-warning-hover),
+        active: var(--rui-color-feedback-warning-active),
+    ),
+);
+
 // Form fields: disabled state
 $disabled-cursor: var(--rui-FormField--disabled__cursor);
 $disabled-opacity: var(--rui-FormField--disabled__opacity);

package/src/styles/theme/_links.scss

@@ -1,6 +1,7 @@
-$color: var(--rui-color-text-link);
+$color: var(--rui-local-link-color, var(--rui-color-text-link));
 $decoration: var(--rui-text-decoration-link);
-$hover-color: var(--rui-color-text-link-hover);
+$underline-offset: var(--rui-underline-offset-link);
+$hover-color: var(--rui-local-link-color-hover, var(--rui-color-text-link-hover));
 $hover-decoration: var(--rui-text-decoration-link-hover);
-$active-color: var(--rui-color-text-link-active);
+$active-color: var(--rui-local-link-color-active, var(--rui-color-text-link-active));
 $active-decoration: var(--rui-text-decoration-link-active);

package/src/styles/tools/_accessibility.scss

@@ -45,9 +45,7 @@
 }
 
 @mixin focus-ring() {
-    &:focus-visible {
-        outline: theme.$focus-outline;
-        outline-offset: theme.$focus-outline-offset;
-        box-shadow: theme.$focus-box-shadow;
-    }
+    outline: theme.$focus-outline;
+    outline-offset: theme.$focus-outline-offset;
+    box-shadow: theme.$focus-box-shadow;
 }

package/src/styles/tools/_collections.scss

@@ -1,6 +1,31 @@
+@use "sass:list";
+@use "sass:map";
+@use "../settings/collections";
 @use "string" as rui-string;
 
-// Mixin to generate CSS custom properties for a set of visual properties.
+// Function to get the parent collection category by value.
+//
+// 1. Returns **only the first** matching collection category.
+//
+// @param {String} $value - The value to get the category for.
+// @param {Map} $collections - The collections map to search in.
+
+@function _get-category-by-value($value, $collections) {
+    @each $category, $values in $collections {
+        @if list.index($values, $value) {
+            @return $category; // 1.
+        }
+    }
+
+    @error
+        "Supplied value \""
+        + $value
+        + "\" not found in any category ("
+        + map.keys($collections)
+        + ")";
+}
+
+// Mixin to generate CSS custom properties for a component theme.
 //
 // 1. Generates a CSS custom property for each property in the `$properties` list.
 // 2. Theming of the disabled state is optional, so the `default` theme options are used (via CSS custom property
@@ -15,7 +40,7 @@
 //
 // Example:
 //
-// @include generate-properties(
+// @include generate-component-properties(
 //     $prefix: "rui-",
 //     $component-name: "Card",
 //     $variant-name: "color",
@@ -29,7 +54,7 @@
 // --rui-local-border-color: var(--rui-Card--success__border-color);
 // --rui-local-background-color: var(--rui-Card--success__background-color);
 
-@mixin generate-properties(
+@mixin generate-component-properties(
     $prefix,
     $component-name,
     $modifier-value: null,
@@ -72,6 +97,32 @@
     }
 }
 
+// Mixin to generate CSS custom properties for links theme.
+//
+// @param {String} $prefix - The prefix for the CSS custom properties.
+// @param {String} $variant-value - The value of the variant.
+//
+// Example:
+//
+// @include generate-link-properties(
+//     $prefix: "rui-",
+//     $variant-value: "success",
+// );
+//
+// … will output:
+//
+// --rui-local-link-color: var(--rui-color-feedback-success);
+// --rui-local-link-color-hover: var(--rui-color-feedback-success-hover);
+// --rui-local-link-color-active: var(--rui-color-feedback-success-active);
+
+@mixin generate-link-properties($prefix, $variant-value) {
+    $color-category: _get-category-by-value($value: $variant-value, $collections: collections.$colors);
+
+    --#{$prefix}local-link-color: var(--rui-color-#{$color-category}-#{$variant-value});
+    --#{$prefix}local-link-color-hover: var(--rui-color-#{$color-category}-#{$variant-value}-hover);
+    --#{$prefix}local-link-color-active: var(--rui-color-#{$color-category}-#{$variant-value}-active);
+}
+
 // Mixin to generate CSS classes for a component variant.
 //
 // @param {String} $prefix - The prefix for the CSS custom properties.
@@ -81,6 +132,7 @@
 // @param {String} $variant-name - The name of the variant.
 // @param {String} $variant-value - The value of the variant.
 // @param {Boolean} $generate-interaction-states - Whether to generate interaction states (disabled, hover, active).
+// @param {Boolean} $inherit-link-color - Whether to inherit link color from the component variant.
 // @param {List} $properties - The list of properties to generate CSS custom properties for.
 //
 // Examples:
@@ -147,6 +199,7 @@
     $variant-name,
     $variant-value,
     $generate-interaction-states: false,
+    $inherit-link-color: false,
     $properties,
 ) {
     $modifier-class-name:
@@ -168,7 +221,7 @@
 
             @each $interaction-state, $interaction-state-selector in $interaction-state-selector-map {
                 #{$interaction-state-selector} {
-                    @include generate-properties(
+                    @include generate-component-properties(
                         $prefix: $prefix,
                         $component-name: $component-name,
                         $modifier-value: $modifier-value,
@@ -179,7 +232,7 @@
                 }
             }
         } @else {
-            @include generate-properties(
+            @include generate-component-properties(
                 $prefix: $prefix,
                 $component-name: $component-name,
                 $modifier-value: $modifier-value,
@@ -187,5 +240,9 @@
                 $properties: $properties,
             );
         }
+
+        @if $inherit-link-color {
+            @include generate-link-properties($prefix: $prefix, $variant-value: $variant-value);
+        }
     }
 }

package/src/styles/tools/_links.scss

@@ -0,0 +1,17 @@
+@use "../theme/links";
+
+@mixin base() {
+    text-decoration: links.$decoration;
+    text-underline-offset: links.$underline-offset;
+    color: links.$color;
+
+    &:hover {
+        text-decoration: links.$hover-decoration;
+        color: links.$hover-color;
+    }
+
+    &:active {
+        text-decoration: links.$active-decoration;
+        color: links.$active-color;
+    }
+}

package/src/styles/tools/form-fields/_box-field-elements.scss

@@ -4,6 +4,7 @@
 // 3. Let inputs properly fit various layout scenarios.
 // 4. Leave out space for SelectField caret.
 // 5. Use a block-level display mode to prevent extra white space below grouped inputs in Safari.
+// 6. Pull out the focused input from the group.
 
 @use "../../settings/form-fields" as settings;
 @use "../../theme/form-fields" as theme;
@@ -18,24 +19,29 @@
     max-width: 100%; // 3.
 }
 
-@mixin input() {
+@mixin base() {
     @include transition.add((opacity, color, border-color, background-color, box-shadow));
 
-    appearance: none;
     width: theme.$box-input-width;
     min-width: theme.$box-input-min-width;
     max-width: 100%; // 3.
     height: var(--rui-local-height);
     padding: var(--rui-local-padding-y) var(--rui-local-padding-x);
+    color: var(--rui-local-color);
+    border: theme.$box-border-width solid var(--rui-local-border-color);
+    border-radius: theme.$box-border-radius;
+    background: var(--rui-local-background);
+}
+
+@mixin input() {
+    @include base();
+
+    appearance: none;
     font-weight: settings.$box-input-font-weight;
     font-size: var(--rui-local-font-size);
     line-height: settings.$box-input-line-height;
     font-family: settings.$box-input-font-family;
     vertical-align: middle;
-    color: var(--rui-local-color);
-    border: theme.$box-border-width solid var(--rui-local-border-color);
-    border-radius: theme.$box-border-radius;
-    background: var(--rui-local-background);
     box-shadow: var(--rui-local-box-shadow);
 
     &::placeholder {
@@ -124,17 +130,23 @@
     }
 }
 
-@mixin in-group-layout() {
+@mixin in-group-layout($input-element-selector: ".input") {
+    // 6.
+    &:focus-within {
+        isolation: isolate;
+        z-index: 1;
+    }
+
     .inputContainer {
         display: block; // 5.
     }
 
-    &:not(:first-child) .input {
+    &:not(:first-child) #{$input-element-selector} {
         border-start-start-radius: var(--rui-local-inner-border-radius);
         border-end-start-radius: var(--rui-local-inner-border-radius);
     }
 
-    &:not(:last-child) .input {
+    &:not(:last-child) #{$input-element-selector} {
         border-start-end-radius: var(--rui-local-inner-border-radius);
         border-end-end-radius: var(--rui-local-inner-border-radius);
     }

package/src/styles/tools/form-fields/_box-field-layout.scss

@@ -166,14 +166,14 @@
     }
 }
 
-@mixin full-width() {
+@mixin full-width($input-element-selector: ".input") {
     display: flex;
     flex-direction: column;
     width: 100%;
 
     .field,
     .inputContainer,
-    .input {
+    #{$input-element-selector} {
         width: 100%;
     }