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

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

@@ -0,0 +1,71 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Button } from '../../../..';
+import styles from '../TableCell.scss';
+
+export const TableHeaderCell = ({
+  column,
+  id,
+  sort,
+}) => {
+  const sortDirection = sort && column.name === sort.column ? sort.direction : 'asc';
+  const isSortingActive = sort && column.name === sort.column;
+
+  return (
+    <th
+      className={isSortingActive ? styles.isTableHeadCellSortingActive : styles.tableHeadCell}
+      id={id}
+    >
+      {sort && column.isSortable && (
+        <div className={styles.sortButton}>
+          <Button
+            beforeLabel={
+              sortDirection === 'asc'
+                ? sort.ascendingIcon
+                : sort.descendingIcon
+            }
+            id={id && `${id}__sortButton`}
+            label={sortDirection}
+            labelVisibility="none"
+            onClick={() => sort.onClick(column.name, sortDirection)}
+            priority="flat"
+          />
+        </div>
+      )}
+      {column.label}
+    </th>
+  );
+};
+
+TableHeaderCell.defaultProps = {
+  id: undefined,
+  sort: null,
+};
+
+TableHeaderCell.propTypes = {
+  /**
+   * Table data column, optionally sortable. The `format` function can be used to process the
+   * column data before displaying them.
+   */
+  column: PropTypes.shape({
+    isSortable: PropTypes.bool,
+    label: PropTypes.string,
+    name: PropTypes.string.isRequired,
+  }).isRequired,
+  /**
+   * ID of the HTML <th> element and nested button for sorting.
+   */
+  id: PropTypes.string,
+  /**
+   * Sorting configuration required to make columns sortable.
+   */
+  sort: PropTypes.shape({
+    ascendingIcon: PropTypes.node.isRequired,
+    column: PropTypes.string.isRequired,
+    descendingIcon: PropTypes.node.isRequired,
+    direction: PropTypes.oneOf(['asc', 'desc']).isRequired,
+    onClick: PropTypes.func.isRequired,
+  }),
+};
+
+export default TableHeaderCell;

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

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

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.
 
@@ -169,6 +171,18 @@ accessible no matter the space they have around. Wrap Tabs into
   }}
 </Playground>
 
+## Forwarding HTML Attributes
+
+In addition to the options below in the [component's API](#api) section, you
+can specify [React synthetic events] or **any HTML attribute you like.** All
+attributes that don't interfere with the API are forwarded to the `<nav>` HTML
+element in case of `Tabs` component and to the `<li>` HTML element in
+case of `TabsItem`. This enables making the component interactive and helps
+to improve its accessibility.
+
+👉 Refer to the MDN reference for the full list of supported attributes of the
+[nav] and [li] element.
+
 ## API
 
 <Props table of={Tabs} />
@@ -218,3 +232,7 @@ Where:
 - `<PROPERTY>` is one of `font-weight`, `color`, `border-width`, `border-color`,
   `background-color`, `box-shadow`, `shift-y` (shifts vertically the whole
   item), or `label__shift-y` (tweaks vertical position of tab label).
+
+[React synthetic events]: https://reactjs.org/docs/events.html
+[nav]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav#attributes
+[li]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li#attributes

package/src/lib/components/Tabs/Tabs.jsx

@@ -1,13 +1,18 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../provider';
+import { transferProps } from '../_helpers/transferProps';
 import styles from './Tabs.scss';
 
 export const Tabs = ({
   children,
   id,
+  ...restProps
 }) => (
-  <nav id={id}>
+  <nav
+    {...transferProps(restProps)}
+    id={id}
+  >
     <ul
       className={styles.list}
       id={id && `${id}__list`}

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

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../provider';
+import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
 import styles from './TabsItem.scss';
 
@@ -12,8 +13,10 @@ export const TabsItem = ({
   isActive,
   label,
   onClick,
+  ...restProps
 }) => (
   <li
+    {...transferProps(restProps)}
     className={classNames(
       styles.root,
       isActive && styles.isRootActive,

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.
 
@@ -212,6 +214,22 @@ will override automatic break point selection in `auto` mode when present.
   }}
 </Playground>
 
+## Forwarding HTML Attributes
+
+In addition to the options below in the [component's API](#api) section, you
+can specify [React synthetic events] or **any HTML attribute you like.** All
+attributes that don't interfere with the API are forwarded either to the
+`<span>` or to the `<div>` HTML element in case that `blockLevel` is set to
+`true`. This enables making the component interactive and helps to improve its
+accessibility.
+
+👉 Refer to the MDN reference for the full list of supported attributes of the
+[span] and [div] element.
+
 ## API
 
 <Props table of={Text} />
+
+[React synthetic events]: https://reactjs.org/docs/events.html
+[span]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span#attributes
+[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes

package/src/lib/components/Text/Text.jsx

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../provider';
+import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { getRootClampClassName } from './_helpers/getRootClampClassName';
@@ -12,9 +13,9 @@ export const Text = ({
   blockLevel,
   children,
   hyphens,
-  id,
   lines,
   wordWrapping,
+  ...restProps
 }) => {
   if (isChildrenEmpty(children)) {
     return null;
@@ -24,6 +25,7 @@ export const Text = ({
 
   return (
     <HtmlElement
+      {...transferProps(restProps)}
       className={(hyphens !== 'none' || lines > 0 || wordWrapping !== 'normal')
         ? classNames(
           getRootClampClassName(lines, styles),
@@ -31,7 +33,6 @@ export const Text = ({
           getRootWordWrappingClassName(wordWrapping, styles),
         )
         : undefined}
-      id={id}
       style={(lines > 1) ? { '--rui-custom-lines': lines } : undefined}
     >
       {children}
@@ -43,7 +44,6 @@ Text.defaultProps = {
   blockLevel: false,
   children: null,
   hyphens: 'none',
-  id: undefined,
   lines: undefined,
   wordWrapping: 'normal',
 };
@@ -61,10 +61,6 @@ Text.propTypes = {
    * Turn on hyphenation. Head to [Hyphens](#hyphens) to learn more.
    */
   hyphens: PropTypes.oneOf(['none', 'auto', 'manual']),
-  /**
-   * Optional ID of the root HTML element.
-   */
-  id: PropTypes.string,
   /**
    * Optional number of lines. If exceeded, the content is truncated and appended by an ellipsis (`…`).
    */

package/src/lib/components/Text/Text.scss

@@ -5,7 +5,7 @@
 // 2. Different approaches are used for single and multiline texts because the latter approach
 //    doesn't always work for single-line texts.
 
-.rootClampSingleLine {
+.isRootClampSingleLine {
     display: block; // 2.
     overflow: hidden;
     text-overflow: ellipsis;
@@ -13,7 +13,7 @@
 }
 
 // stylelint-disable property-no-vendor-prefix, value-no-vendor-prefix
-.rootClampMultiLine {
+.isRootClampMultiLine {
     display: -webkit-box; // 2.
     -webkit-line-clamp: var(--rui-custom-lines);
     -webkit-box-orient: vertical;
@@ -22,19 +22,19 @@
 }
 // stylelint-enable property-no-vendor-prefix, value-no-vendor-prefix
 
-.rootHyphensAuto {
+.isRootHyphensAuto {
     hyphens: auto;
 }
 
-.rootHyphensManual {
+.isRootHyphensManual {
     hyphens: manual;
 }
 
-.rootWordWrappingAnywhere {
+.isRootWordWrappingAnywhere {
     word-break: break-all;
 }
 
-.rootWordWrappingLongWords {
+.isRootWordWrappingLongWords {
     word-break: break-word; // 1.
     overflow-wrap: anywhere;
 }

package/src/lib/components/Text/_helpers/getRootClampClassName.js

@@ -1,10 +1,10 @@
 export const getRootClampClassName = (lines, styles) => {
   if (lines === 1) {
-    return styles.rootClampSingleLine;
+    return styles.isRootClampSingleLine;
   }
 
   if (lines > 1) {
-    return styles.rootClampMultiLine;
+    return styles.isRootClampMultiLine;
   }
 
   return null;

package/src/lib/components/Text/_helpers/getRootHyphensClassName.js

@@ -1,10 +1,10 @@
 export const getRootHyphensClassName = (hyphens, styles) => {
   if (hyphens === 'auto') {
-    return styles.rootHyphensAuto;
+    return styles.isRootHyphensAuto;
   }
 
   if (hyphens === 'manual') {
-    return styles.rootHyphensManual;
+    return styles.isRootHyphensManual;
   }
 
   return null;

package/src/lib/components/Text/_helpers/getRootWordWrappingClassName.js

@@ -1,10 +1,10 @@
 export const getRootWordWrappingClassName = (wordWrapping, styles) => {
   if (wordWrapping === 'anywhere') {
-    return styles.rootWordWrappingAnywhere;
+    return styles.isRootWordWrappingAnywhere;
   }
 
   if (wordWrapping === 'long-words') {
-    return styles.rootWordWrappingLongWords;
+    return styles.isRootWordWrappingLongWords;
   }
 
   return null;

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
 
@@ -142,31 +142,6 @@ to achieve that effect.
   />
 </Playground>
 
-## Forwarding HTML Attributes
-
-When you want to improve the accessibility of your text fields even further, you
-can **add whatever HTML attribute you like.** All attributes that don't
-interfere with [component's API](#api) are forwarded to the native HTML input.
-
-<Playground>
-  <TextArea
-    label="Address"
-    autoComplete="street-address"
-    minLength={3}
-    maxLength={80}
-  />
-  <TextArea
-    label="Address"
-    variant="filled"
-    autoComplete="street-address"
-    minLength={3}
-    maxLength={80}
-  />
-</Playground>
-
-👉 Refer to the MDN reference for the full list of
-[supported attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#Attributes).
-
 ## Invisible Label
 
 In some cases, it may be convenient to visually hide the field label. The label
@@ -346,12 +321,38 @@ It's possible to disable the whole input.
   />
 </Playground>
 
-## API
+## Forwarding HTML Attributes
 
-In addition to the options below, you can specify [React synthetic events] or
-any custom HTML attributes that do not interfere with the API, and they will be
-passed to the `<textarea>` HTML element. This enables making the component
-interactive and helps improve its [accessibility](#forwarding-html-attributes).
+In addition to the options below in the [component's API](#api) section, you
+can specify [React synthetic events] or you can **add whatever HTML attribute
+you like.** All attributes that don't interfere with the API are forwarded to
+the native HTML `<textarea>`. This enables making the component interactive and
+to helps to improve its accessibility.
+
+<Playground>
+  <TextArea
+    label="Address"
+    autoComplete="street-address"
+    minLength={3}
+    maxLength={80}
+  />
+  <TextArea
+    label="Address"
+    variant="filled"
+    autoComplete="street-address"
+    minLength={3}
+    maxLength={80}
+  />
+</Playground>
+
+👉 Refer to the MDN reference for the full list of supported attributes of the
+[textarea] element.
+
+## Forwarding ref
+
+If you provide [ref], it is forwarded to the native HTML `<textarea>` element.
+
+## API
 
 <Props table of={TextArea} />
 
@@ -361,3 +362,5 @@ Head to [Forms Theming](/customize/theming/forms) to see shared form theming
 options.
 
 [React synthetic events]: https://reactjs.org/docs/events.html
+[textarea]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes
+[ref]: https://reactjs.org/docs/refs-and-the-dom.html

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

@@ -7,29 +7,25 @@ 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 {
+    disabled,
+    fullWidth,
+    helpText,
+    id,
+    isLabelVisible,
+    label,
+    layout,
+    required,
+    size,
+    validationState,
+    validationText,
+    variant,
+    ...restProps
+  } = props;
+
   const context = useContext(FormLayoutContext);
 
   return (
@@ -39,13 +35,13 @@ export const TextArea = ({
         fullWidth && styles.isRootFullWidth,
         context && styles.isRootInFormLayout,
         resolveContextOrProp(context && context.layout, layout) === 'horizontal'
-          ? styles.rootLayoutHorizontal
-          : styles.rootLayoutVertical,
+          ? styles.isRootLayoutHorizontal
+          : styles.isRootLayoutVertical,
         disabled && styles.isRootDisabled,
         required && styles.isRootRequired,
         getRootSizeClassName(size, styles),
         getRootValidationStateClassName(validationState, styles),
-        variant === 'filled' ? styles.rootVariantFilled : styles.rootVariantOutline,
+        variant === 'filled' ? styles.isRootVariantFilled : styles.isRootVariantOutline,
       )}
       htmlFor={id}
       id={id && `${id}__label`}
@@ -64,14 +60,10 @@ export const TextArea = ({
           <textarea
             {...transferProps(restProps)}
             className={styles.input}
-            cols={cols}
             disabled={disabled}
             id={id}
-            placeholder={placeholder}
-            ref={forwardedRef}
+            ref={ref}
             required={required}
-            rows={rows}
-            value={value}
           />
           {variant === 'filled' && (
             <div className={styles.bottomLine} />
@@ -96,44 +88,27 @@ 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,
   required: false,
-  rows: 3,
   size: 'medium',
   validationState: null,
   validationText: null,
-  value: undefined,
   variant: 'outline',
 };
 
 TextArea.propTypes = {
-  /**
-   * The number of visible text columns for the control.
-   */
-  cols: PropTypes.number,
   /**
    * 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.
    */
@@ -165,18 +140,10 @@ TextArea.propTypes = {
    * as the value is inherited in such case.
    */
   layout: PropTypes.oneOf(['horizontal', 'vertical']),
-  /**
-   * Optional example value.
-   */
-  placeholder: PropTypes.string,
   /**
    * If `true`, the input will be required.
    */
   required: PropTypes.bool,
-  /**
-   * The number of visible text lines for the control.
-   */
-  rows: PropTypes.number,
   /**
    * Size of the field.
    */
@@ -189,19 +156,12 @@ TextArea.propTypes = {
    * Validation message to be displayed.
    */
   validationText: PropTypes.node,
-  /**
-   * Value of the input.
-   */
-  value: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-  ]),
   /**
    * Design variant of the field, further customizable with CSS custom properties.
    */
   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/TextArea.scss

@@ -37,11 +37,11 @@
 }
 
 // Visual variants
-.rootVariantFilled {
+.isRootVariantFilled {
     @include variants.visual(box, $variant: filled);
 }
 
-.rootVariantOutline {
+.isRootVariantOutline {
     @include variants.visual(box, $variant: outline);
 }
 
@@ -64,12 +64,12 @@
 }
 
 // Layouts
-.rootLayoutVertical,
-.rootLayoutHorizontal {
+.isRootLayoutVertical,
+.isRootLayoutHorizontal {
     @include box-field-layout.vertical();
 }
 
-.rootLayoutHorizontal {
+.isRootLayoutHorizontal {
     @include box-field-layout.horizontal();
 }
 
@@ -82,14 +82,14 @@
 }
 
 // Sizes
-.rootSizeSmall {
+.isRootSizeSmall {
     @include box-field-sizes.size(small, $is-multiline: true);
 }
 
-.rootSizeMedium {
+.isRootSizeMedium {
     @include box-field-sizes.size(medium, $is-multiline: true);
 }
 
-.rootSizeLarge {
+.isRootSizeLarge {
     @include box-field-sizes.size(large, $is-multiline: true);
 }

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

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