Merge pull request #108 from InseeFrLab/bar-updates

Add BaseBar and be able to pass ref to ButtonBar

package.json

@@ -1,6 +1,6 @@
 {
     "name": "onyxia-ui",
-    "version": "5.3.6",
+    "version": "5.3.7-rc.0",
     "description": "The Onyxia UI toolkit",
     "repository": {
         "type": "git",

src/BaseBar.tsx

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+import { tss } from "./lib/tss";
+import { symToStr } from "tsafe/symToStr";
+
+export type BaseBarProps = {
+    className?: string;
+    children: ReactNode;
+};
+
+export function BaseBar(props: BaseBarProps) {
+    const { className, children } = props;
+
+    const { classes, cx } = useStyles();
+
+    return <div className={cx(classes.root, className)}>{children}</div>;
+}
+
+BaseBar.displayName = symToStr({ BaseBar });
+
+const useStyles = tss.withName({ BaseBar }).create(({ theme }) => ({
+    "root": {
+        "backgroundColor": theme.colors.useCases.surfaces.surface1,
+        "boxShadow": theme.shadows[1],
+        "borderRadius": 8,
+        "overflow": "hidden",
+    },
+}));

src/ButtonBar.tsx

@@ -1,8 +1,8 @@
 import { memo, ReactNode } from "react";
-import { tss } from "./lib/tss";
 import { useCallbackFactory } from "powerhooks/useCallbackFactory";
 import { ButtonBarButton } from "./ButtonBarButton";
 import { symToStr } from "tsafe/symToStr";
+import { BaseBar } from "./BaseBar";
 
 export type ButtonBarProps<ButtonId extends string = never> = {
     className?: string;
@@ -41,14 +41,12 @@ function NonMemoizedButtonBar<ButtonId extends string>(
 ) {
     const { className, buttons, onClick } = props;
 
-    const { classes, cx } = useStyles();
-
     const onClickFactory = useCallbackFactory(([buttonId]: [ButtonId]) =>
         onClick(buttonId),
     );
 
     return (
-        <div className={cx(classes.root, className)}>
+        <BaseBar className={className}>
             {buttons.map(button => (
                 <ButtonBarButton
                     startIcon={button.icon}
@@ -69,7 +67,7 @@ function NonMemoizedButtonBar<ButtonId extends string>(
                     {button.label}
                 </ButtonBarButton>
             ))}
-        </div>
+        </BaseBar>
     );
 }
 
@@ -80,12 +78,3 @@ export const ButtonBar = memo(NonMemoizedButtonBar) as <
 ) => ReturnType<typeof NonMemoizedButtonBar>;
 
 (ButtonBar as any).displayName = symToStr({ ButtonBar });
-
-const useStyles = tss.withName({ ButtonBar }).create(({ theme }) => ({
-    "root": {
-        "backgroundColor": theme.colors.useCases.surfaces.surface1,
-        "boxShadow": theme.shadows[1],
-        "borderRadius": 8,
-        "overflow": "hidden",
-    },
-}));

src/ButtonBarButton.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import { memo } from "react";
+import { forwardRef, memo } from "react";
 import { tss } from "./lib/tss";
 import { Button } from "./Button";
 import { symToStr } from "tsafe/symToStr";
@@ -28,23 +28,26 @@ export namespace ButtonBarButtonProps {
     };
 }
 
-export const ButtonBarButton = memo((props: ButtonBarButtonProps) => {
-    const { className, startIcon, disabled, children, ...rest } = props;
+export const ButtonBarButton = memo(
+    forwardRef<HTMLButtonElement, ButtonBarButtonProps>((props, ref) => {
+        const { className, startIcon, disabled, children, ...rest } = props;
 
-    const { classes, cx } = useStyles();
+        const { classes, cx } = useStyles();
 
-    return (
-        <Button
-            className={cx(classes.root, className)}
-            variant="secondary"
-            startIcon={startIcon}
-            disabled={disabled}
-            {...rest}
-        >
-            {children}
-        </Button>
-    );
-});
+        return (
+            <Button
+                ref={ref} // Forwarding the ref to the Button component
+                className={cx(classes.root, className)}
+                variant="secondary"
+                startIcon={startIcon}
+                disabled={disabled}
+                {...rest}
+            >
+                {children}
+            </Button>
+        );
+    }),
+);
 
 ButtonBarButton.displayName = symToStr({ ButtonBarButton });