Merge pull request #110 from BouyguesTelecom/feature/add-forwardRef

add forward ref for some components

packages/react/components/accordion/Accordion.tsx

@@ -8,14 +8,16 @@ import { hashClass } from "@/helpers/hashClassesHelpers"
  * Accordion Component
  * @param className {string} Additionnal CSS Classes
  */
-const Accordion = ({
-  className,
-  testId,
-  ...others
-}: AccordionProps): React.JSX.Element => {
+const Accordion = React.forwardRef((props: AccordionProps, ref: React.LegacyRef<HTMLDivElement>) => {
+  const {
+    className,
+    testId,
+    ...others
+  } = props 
+
   const { styled } = useTrilogyContext()
   const classes = hashClass(styled, clsx("accordions", className))
-  return <section className={classes} {...others} data-testid={testId} />
-}
+  return <section ref={ref} className={classes} {...others} data-testid={testId} />
+})
 
 export default Accordion

packages/react/components/breadcrumb/Breadcrumb.tsx

@@ -11,17 +11,20 @@ import { useTrilogyContext } from "@/context"
  * - -------------------------- WEB PROPERTIES -------------------------------
  * @param className {string} Additionnal CSS Classes
  */
-const Breadcrumb = ({
-  children,
-  className,
-  testId,
-  accessibilityLabel,
-  ...others
-}: BreadcrumbWebProps): JSX.Element => {
+const Breadcrumb = React.forwardRef((props: BreadcrumbWebProps, ref: React.LegacyRef<HTMLElement>) => {
+  const {
+    children,
+    className,
+    testId,
+    accessibilityLabel,
+    ...others
+  } = props 
+
   const { styled } = useTrilogyContext()
 
   return (
     <nav
+      ref={ref}
       role='navigation'
       data-testid={testId}
       className={hashClass(styled, clsx("breadcrumb", className))}
@@ -31,6 +34,6 @@ const Breadcrumb = ({
       <ul>{children}</ul>
     </nav>
   )
-}
+})
 
 export default Breadcrumb

packages/react/components/card/Card.tsx

@@ -24,26 +24,28 @@ import { useTrilogyContext } from "@/context"
  * @param fullheight
  * @param markup {BoxMarkup} Clickable Card => CardMarkup.A Not clickable box => CardMarkup.DIV || null
  */
-const Card = ({
-  className,
-  background,
-  backgroundSrc,
-  inverted,
-  flat,
-  horizontal,
-  floating,
-  align,
-  justify,
-  skeleton,
-  onClick,
-  reversed,
-  testId,
-  markup,
-  to,
-  fullheight,
-  active,
-  ...others
-}: CardProps): JSX.Element => {
+const Card = React.forwardRef((props: CardProps, ref: React.LegacyRef<HTMLElement>) => {
+  const {
+    className,
+    background,
+    backgroundSrc,
+    inverted,
+    flat,
+    horizontal,
+    floating,
+    align,
+    justify,
+    skeleton,
+    onClick,
+    reversed,
+    testId,
+    markup,
+    to,
+    fullheight,
+    active,
+    ...others
+  } = props
+
   const [isLoading, setIsLoading] = useState<boolean>(skeleton || false)
   const { styled } = useTrilogyContext()
 
@@ -88,6 +90,7 @@ const Card = ({
         }}
         {...others}
         className={classes}
+        ref={ref as React.LegacyRef<HTMLAnchorElement>}
       />
     )
   }
@@ -99,8 +102,8 @@ const Card = ({
       className={classes}
       style={onClick && { ...hoverStyle }}
       {...others}
+      ref={ref as React.LegacyRef<HTMLDivElement>}
     />
   )
-}
-
+})
 export default Card

packages/react/components/chips/list/ChipsList.tsx

@@ -10,11 +10,13 @@ import { useTrilogyContext } from "@/context"
  * @param children {React.ReactNode}
  * @param multiple {boolean} Selection Multiple With checked icon
  */
-const ChipsList = ({
-  children,
-  multiple,
-  ...others
-}: ChipsListProps): JSX.Element => {
+const ChipsList = React.forwardRef((props: ChipsListProps, ref: React.LegacyRef<HTMLDivElement>) => {
+  const {
+    children,
+    multiple,
+    ...others
+  } = props 
+
   const { styled } = useTrilogyContext()
 
   const classes = hashClass(
@@ -23,10 +25,10 @@ const ChipsList = ({
   )
 
   return (
-    <div role={multiple ? "group" : "radiogroup"} className={classes} {...others}>
+    <div ref={ref} role={multiple ? "group" : "radiogroup"} className={classes} {...others}>
       {children}
     </div>
   )
-}
+})
 
 export default ChipsList

packages/react/components/columns/Columns.tsx

@@ -20,19 +20,21 @@ import { useTrilogyContext } from "@/context"
  * @param mobile {boolean} Responsive mode
  * @param flex {boolean} Flex direction
  */
-const Columns = ({
-  className,
-  multiline,
-  inlined,
-  mobile,
-  centered,
-  verticalCentered,
-  gapless,
-  marginSize,
-  flex,
-  marginless,
-  ...others
-}: ColumnsProps): JSX.Element => {
+const Columns = React.forwardRef((props:ColumnsProps, ref: React.LegacyRef<HTMLDivElement>) => {
+  const {
+    className,
+    multiline,
+    inlined,
+    mobile,
+    centered,
+    verticalCentered,
+    gapless,
+    marginSize,
+    flex,
+    marginless,
+    ...others
+  } = props
+
   const { styled } = useTrilogyContext()
 
   const classes = hashClass(
@@ -52,7 +54,7 @@ const Columns = ({
     )
   )
 
-  return <div className={classes} {...others} />
-}
+  return <div ref={ref} className={classes} {...others} />
+})
 
 export default Columns

packages/react/components/columns/item/ColumnsItem.tsx

@@ -30,28 +30,30 @@ import { getAlignClassName } from "@/objects"
  * @param fullhdOffset {ColumnsSize} Apply => is-offset-fullhd
  * @param align { Alignable | AlignableValues} align content
  */
-const ColumnsItem = ({
-  className,
-  size,
-  mobileSize,
-  tabletSize,
-  touchSize,
-  desktopSize,
-  widescreenSize,
-  fullhdSize,
-  offset,
-  mobileOffset,
-  tabletOffset,
-  touchOffset,
-  desktopOffset,
-  widescreenOffset,
-  fullhdOffset,
-  narrow,
-  verticalCenter,
-  centered,
-  align,
-  ...others
-}: ColumnsItemProps): JSX.Element => {
+const ColumnsItem = React.forwardRef((props: ColumnsItemProps, ref: React.LegacyRef<HTMLDivElement>) => {
+  const {
+    className,
+    size,
+    mobileSize,
+    tabletSize,
+    touchSize,
+    desktopSize,
+    widescreenSize,
+    fullhdSize,
+    offset,
+    mobileOffset,
+    tabletOffset,
+    touchOffset,
+    desktopOffset,
+    widescreenOffset,
+    fullhdOffset,
+    narrow,
+    verticalCenter,
+    centered,
+    align,
+    ...others
+  } = props 
+
   const { styled } = useTrilogyContext()
 
   const classes = hashClass(
@@ -80,6 +82,7 @@ const ColumnsItem = ({
     )
   )
 
-  return <div className={classes} {...others} />
-}
+  return <div ref={ref} className={classes} {...others} />
+})
+
 export default ColumnsItem

packages/react/components/list/List.tsx

@@ -11,24 +11,26 @@ import { useTrilogyContext } from "@/context"
  * @param hasIcon {boolean} If Have icon
  */
 
-const List = ({
-  className,
-  hasIcon,
-  children,
-  testId,
-  ...others
-}: ListProps): JSX.Element => {
+const List = React.forwardRef((props: ListProps, ref: React.LegacyRef<HTMLUListElement>) => {
+  const {
+    className,
+    hasIcon,
+    children,
+    testId,
+    ...others
+  } = props 
+
   const { styled } = useTrilogyContext()
 
   const classes = hashClass(
     styled,
     clsx(hasIcon ? "icon-list" : "list", className)
   )
   return (
-    <ul data-testid={testId} className={classes} {...others}>
+    <ul ref={ref} data-testid={testId} className={classes} {...others}>
       {children}
     </ul>
   )
-}
+})
 
 export default List

packages/react/components/progress/Progress.tsx

@@ -22,19 +22,21 @@ import { useTrilogyContext } from "@/context"
  * -------------------------- WEB PROPERTIES -------------------------------
  * @param className {string} Additionnal CSS classes
  */
-const Progress = ({
-  children,
-  className,
-  percent,
-  maxPercent = 100,
-  alert,
-  small,
-  stacked,
-  uniqueLegend,
-  firstExtremLegend,
-  secondExtremLegend,
-  ...others
-}: ProgressProps): JSX.Element => {
+const Progress = React.forwardRef((props: ProgressProps, ref: React.LegacyRef<HTMLDivElement>) => {
+  const {
+    children,
+    className,
+    percent,
+    maxPercent = 100,
+    alert,
+    small,
+    stacked,
+    uniqueLegend,
+    firstExtremLegend,
+    secondExtremLegend,
+    ...others
+  } = props 
+
   const { styled } = useTrilogyContext()
 
   const classes = hashClass(
@@ -55,7 +57,7 @@ const Progress = ({
 
   if (children && stacked) {
     return (
-      <div className={stackedClasses} {...others}>
+      <div ref={ref} className={stackedClasses} {...others}>
         {children}
       </div>
     )
@@ -88,6 +90,7 @@ const Progress = ({
       )}
     </>
   )
-}
+
+})
 
 export default Progress

packages/react/components/progress/item/ProgressItem.tsx

@@ -17,15 +17,17 @@ import { useTrilogyContext } from "@/context"
  * -------------------------- WEB PROPERTIES -------------------------------
  * @param className {string} Additionnal CSS classes
  */
-const ProgressItem = ({
-  className,
-  percent,
-  maxPercent = 100,
-  minPercent = 0,
-  alert,
-  accessibilityLabel,
-  ...others
-}: ProgressItemProps): JSX.Element => {
+const ProgressItem = React.forwardRef((props: ProgressItemProps, ref: React.LegacyRef<HTMLDivElement>) => {
+  const {
+    className,
+    percent,
+    maxPercent = 100,
+    minPercent = 0,
+    alert,
+    accessibilityLabel,
+    ...others
+  } = props 
+
   const { styled } = useTrilogyContext()
 
   const classes = hashClass(
@@ -40,6 +42,7 @@ const ProgressItem = ({
 
   return (
     <div
+      ref={ref}
       {...(percent && { style: { width: `${percent}%` } })}
       className={classes}
       role='progressbar'
@@ -50,6 +53,6 @@ const ProgressItem = ({
       {...others}
     />
   )
-}
+})
 
 export default ProgressItem