Merge pull request #2803 from teamleadercrm/forward-ref-components

Forward ref components

CHANGELOG.md

@@ -8,18 +8,64 @@
 
 ### Removed
 
-## [23.0.0] - 2023-10-30
-
-### Removed
-
-- `Tooltip`: removed `horizontal` and `vertical` positions from the `tooltipPosition` options. Tooltips will still render to the opposite side in case there is not enough space on the chosen position. ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2796](https://github.com/teamleadercrm/ui/pull/2796)`
+## [23.1.0] - 2023-11-06
+
+### Changed
+
+- `WysiwygEditor`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `ValidationText`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `WarningText`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `SuccessText`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `HelpText`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `ErrorText`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Monospaced`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Marker`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Toggle`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `ToastContainer`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Toast`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Tag`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `TabGroup`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `SplitButton`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `RadioButton`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `ProgressTracker`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Pagination`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `OverviewPage`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Message`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `MarketingHeading2`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `MarketingHeading1`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `MarketingMarker`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `MarketingLockBadge`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `MarketingButtonGroup`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `LoadingBar`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `LabelValuePair`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Island`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `GridItem`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `EmptyState`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `DetailPage`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `DatePicker`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `DataGrid`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Counter`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Container`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Banner`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `AdvancedCollapsible`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `MarketingStatusLabel`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `MenuItem`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `MarketingMenuItem`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Label`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
+- `Bullet`: implementeed ref forwarding ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2803](https://github.com/teamleadercrm/ui/pull/2803)
 
 ## [23.0.1] - 2023-10-30
 
 ### Fixed
 
 - `Tooltip`: added missing `data-teamleader-ui="tooltip"` attribute ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2799](https://github.com/teamleadercrm/ui/pull/2799)`
 
+## [23.0.0] - 2023-10-30
+
+### Removed
+
+- `Tooltip`: removed `horizontal` and `vertical` positions from the `tooltipPosition` options. Tooltips will still render to the opposite side in case there is not enough space on the chosen position. ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2796](https://github.com/teamleadercrm/ui/pull/2796)`
+
 ## [22.3.5] - 2023-10-18
 
 ### Fixed

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@teamleader/ui",
   "description": "Teamleader UI library",
-  "version": "23.0.1",
+  "version": "23.1.0",
   "author": "Teamleader <[email protected]>",
   "bugs": {
     "url": "https://github.com/teamleadercrm/ui/issues"

src/components/advancedCollapsible/AdvancedCollapsible.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useState } from 'react';
+import React, { ReactNode, forwardRef, useState } from 'react';
 import { TextBody, Heading3 } from '../typography';
 import Icon from '../icon';
 import Box, { pickBoxProps } from '../box';
@@ -26,46 +26,47 @@ export interface AdvancedCollapsibleProps extends Omit<BoxProps, 'size'> {
   onChange?: (collapsed: boolean, event: React.MouseEvent) => void;
 }
 
-const AdvancedCollapsible: GenericComponent<AdvancedCollapsibleProps> = ({
-  children,
-  color = 'teal',
-  indent = true,
-  size = 'medium',
-  title,
-  defaultIsCollapsed = true,
-  onChange,
-  ...others
-}) => {
-  const [collapsed, setCollapsed] = useState(defaultIsCollapsed);
+const AdvancedCollapsible: GenericComponent<AdvancedCollapsibleProps> = forwardRef<
+  HTMLDivElement,
+  AdvancedCollapsibleProps
+>(
+  (
+    { children, color = 'teal', indent = true, size = 'medium', title, defaultIsCollapsed = true, onChange, ...others },
+    ref,
+  ) => {
+    const [collapsed, setCollapsed] = useState(defaultIsCollapsed);
 
-  const boxProps = pickBoxProps(others);
-  const TitleElement = size === 'large' ? Heading3 : TextBody;
+    const boxProps = pickBoxProps(others);
+    const TitleElement = size === 'large' ? Heading3 : TextBody;
 
-  const handleTitleClick = (event: React.MouseEvent) => {
-    if (onChange) {
-      onChange(!collapsed, event);
-    }
+    const handleTitleClick = (event: React.MouseEvent) => {
+      if (onChange) {
+        onChange(!collapsed, event);
+      }
 
-    setCollapsed(!collapsed);
-  };
+      setCollapsed(!collapsed);
+    };
 
-  return (
-    <Box data-teamleader-ui="advanced-collapsible">
-      <Box className={theme['title']} display="flex" alignItems="center" onClick={handleTitleClick} {...boxProps}>
-        <Icon color={color} tint="darkest">
-          {collapsed ? <IconChevronRightSmallOutline /> : <IconChevronDownSmallOutline />}
-        </Icon>
-        <TitleElement color={color} marginLeft={2} tint="darkest">
-          {size === 'medium' ? <strong>{title}</strong> : title}
-        </TitleElement>
-      </Box>
-      {!collapsed && (
-        <Box {...(indent && { className: theme['children-indent'] })} marginTop={2}>
-          {children}
+    return (
+      <Box data-teamleader-ui="advanced-collapsible" ref={ref}>
+        <Box className={theme['title']} display="flex" alignItems="center" onClick={handleTitleClick} {...boxProps}>
+          <Icon color={color} tint="darkest">
+            {collapsed ? <IconChevronRightSmallOutline /> : <IconChevronDownSmallOutline />}
+          </Icon>
+          <TitleElement color={color} marginLeft={2} tint="darkest">
+            {size === 'medium' ? <strong>{title}</strong> : title}
+          </TitleElement>
         </Box>
-      )}
-    </Box>
-  );
-};
+        {!collapsed && (
+          <Box {...(indent && { className: theme['children-indent'] })} marginTop={2}>
+            {children}
+          </Box>
+        )}
+      </Box>
+    );
+  },
+);
+
+AdvancedCollapsible.displayName = 'AdvancedCollapsible';
 
 export default AdvancedCollapsible;

src/components/banner/Banner.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import cx from 'classnames';
 
 import Box, { BoxProps, Padding } from '../box';
@@ -30,43 +30,42 @@ export interface BannerProps extends Omit<BoxProps, 'size'> {
   size?: Exclude<(typeof SIZES)[number], 'tiny' | 'smallest' | 'hero' | 'fullscreen'>;
 }
 
-const Banner = ({
-  children,
-  className,
-  color = 'white',
-  size = 'medium',
-  icon,
-  onClose,
-  fullWidth,
-  ...others
-}: BannerProps) => {
-  const classNames = cx(className, theme[color], theme['banner'], { [theme['banner_full-width']]: fullWidth });
+const Banner = forwardRef<HTMLElement, BannerProps>(
+  (
+    { children, className, color = 'white', size = 'medium', icon, onClose, fullWidth, ...others }: BannerProps,
+    ref,
+  ) => {
+    const classNames = cx(className, theme[color], theme['banner'], { [theme['banner_full-width']]: fullWidth });
 
-  return (
-    <Box
-      data-teamleader-ui="banner"
-      className={classNames}
-      color={color}
-      padding={PADDINGS[size]}
-      borderRadius={fullWidth ? 'square' : 'rounded'}
-      {...others}
-    >
-      <div className={theme['inner']}>
-        {icon && <span className={theme['icon']}>{icon}</span>}
-        <Box flex={1} element="span" paddingRight={onClose && 7}>
-          {children}
-        </Box>
-        {onClose && (
-          <IconButton
-            className={theme['close-button']}
-            icon={<IconCloseMediumOutline />}
-            color={color === 'white' ? 'neutral' : color}
-            onClick={onClose}
-          />
-        )}
-      </div>
-    </Box>
-  );
-};
+    return (
+      <Box
+        data-teamleader-ui="banner"
+        className={classNames}
+        color={color}
+        padding={PADDINGS[size]}
+        borderRadius={fullWidth ? 'square' : 'rounded'}
+        {...others}
+        ref={ref}
+      >
+        <div className={theme['inner']}>
+          {icon && <span className={theme['icon']}>{icon}</span>}
+          <Box flex={1} element="span" paddingRight={onClose && 7}>
+            {children}
+          </Box>
+          {onClose && (
+            <IconButton
+              className={theme['close-button']}
+              icon={<IconCloseMediumOutline />}
+              color={color === 'white' ? 'neutral' : color}
+              onClick={onClose}
+            />
+          )}
+        </div>
+      </Box>
+    );
+  },
+);
+
+Banner.displayName = 'Banner';
 
 export default Banner;

src/components/bullet/Bullet.tsx

@@ -1,9 +1,10 @@
-import React, { PureComponent } from 'react';
+import React, { forwardRef } from 'react';
 import Box from '../box';
 import cx from 'classnames';
 import theme from './theme.css';
 import { BoxProps } from '../box/Box';
 import { COLORS, SIZES, TINTS } from '../../constants';
+import { GenericComponent } from '../../@types/types';
 
 export interface BulletProps extends Omit<BoxProps, 'size' | 'ref'> {
   /** A border color to give to the counter */
@@ -18,9 +19,8 @@ export interface BulletProps extends Omit<BoxProps, 'size' | 'ref'> {
   size?: Exclude<(typeof SIZES)[number], 'tiny' | 'fullscreen' | 'smallest' | 'hero'>;
 }
 
-class Bullet extends PureComponent<BulletProps> {
-  render() {
-    const { className, color = 'neutral', size = 'medium', borderColor, borderTint, ...others } = this.props;
+const Bullet: GenericComponent<BulletProps> = forwardRef<HTMLElement, BulletProps>(
+  ({ className, color = 'neutral', size = 'medium', borderColor, borderTint, ...others }, ref) => {
     const classNames = cx(
       theme['bullet'],
       theme[color],
@@ -32,8 +32,10 @@ class Bullet extends PureComponent<BulletProps> {
       className,
     );
 
-    return <Box data-teamleader-ui="bullet" className={classNames} element="span" {...others} />;
-  }
-}
+    return <Box data-teamleader-ui="bullet" className={classNames} element="span" ref={ref} {...others} />;
+  },
+);
+
+Bullet.displayName = 'Bullet';
 
 export default Bullet;

src/components/container/Container.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, forwardRef } from 'react';
 import Box from '../box';
 import cx from 'classnames';
 import theme from './theme.css';
@@ -11,20 +11,24 @@ export interface ContainerProps extends Omit<BoxProps, 'ref'> {
   fixed?: boolean;
 }
 
-const Container: GenericComponent<ContainerProps> = ({ children, className, fixed, ...others }) => {
-  const classNames = cx(
-    theme['container'],
-    {
-      [theme['is-fixed']]: fixed,
-    },
-    className,
-  );
+const Container: GenericComponent<ContainerProps> = forwardRef<HTMLElement, ContainerProps>(
+  ({ children, className, fixed, ...others }, ref) => {
+    const classNames = cx(
+      theme['container'],
+      {
+        [theme['is-fixed']]: fixed,
+      },
+      className,
+    );
 
-  return (
-    <Box data-teamleader-ui="container" {...others} boxSizing="content-box" className={classNames}>
-      {children}
-    </Box>
-  );
-};
+    return (
+      <Box data-teamleader-ui="container" {...others} boxSizing="content-box" className={classNames} ref={ref}>
+        {children}
+      </Box>
+    );
+  },
+);
+
+Container.displayName = 'Container';
 
 export default Container;