@onewelcome/react-lib-components 1.3.0 → 1.4.0

package/src/Tabs/Tabs.tsx

@@ -17,149 +17,155 @@
 import React, {
   ComponentPropsWithRef,
   createRef,
-  MutableRefObject,
+  ForwardRefRenderFunction,
+  ReactElement,
+  RefObject,
   useEffect,
   useRef,
   useState
 } from "react";
-import { generateID } from "../util/helper";
 import { Props as TabProps } from "./Tab";
 import { TabButton } from "./TabButton";
-import { TabPanel } from "./TabPanel";
 import classes from "./Tabs.module.scss";
 
 export interface Props extends ComponentPropsWithRef<"div"> {
   children: React.ReactElement<TabProps> | React.ReactElement<TabProps>[];
   selected?: number;
-  "aria-label"?: string;
   onTabChange?: (index: number) => void;
 }
 
-export const Tabs = ({
-  children,
-  selected = 0,
-  "aria-label": ariaLabel,
-  onTabChange,
-  className,
-  ...rest
-}: Props) => {
+const TabsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  { children, selected = 0, onTabChange, ...rest }: Props,
+  ref
+) => {
+  const [renderedButtons, setRenderedButtons] = useState<ReactElement[]>([]);
+  const [renderedTabs, setRenderedTabs] = useState<ReactElement[]>([]);
+  const [activeTabIndex, setActiveTabIndex] = useState(selected);
+  const [usingKeyboardNavigation, setUsingKeyboardNavigation] = useState(false);
+  const [indicatorStyles, setIndicatorStyles] = useState<{
+    width: number;
+    left: number;
+    top: number;
+  }>({
+    width: 0,
+    left: 0,
+    top: 0
+  });
+  const tabsRef = (ref as RefObject<HTMLDivElement>) || createRef<HTMLDivElement>();
   const indicatorRef = useRef<HTMLDivElement>(null);
-  const [indicatorPosition, setIndicatorPosition] = useState({ left: 0, top: 0 });
-  const [indicatorWidth, setIndicatorWidth] = useState(0);
 
-  const [max] = useState(React.Children.count(children) - 1);
-  const min = 0;
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    const totalAmountOfTabs = [children].flat().length;
+    if (!usingKeyboardNavigation) setUsingKeyboardNavigation(true);
+    if (totalAmountOfTabs === 1) return;
 
-  const [selectedTab, setSelectedTab] = useState(Math.min(max, Math.max(min, selected)));
-  const [focussedTab, setFocussedTab] = useState(-1);
-  const [tabIds] = useState([...Array(max)].map(() => generateID()));
-  const [tabPanelIds] = useState([...Array(max)].map(() => generateID()));
-
-  useEffect(() => {
-    setSelectedTab(Math.min(max, Math.max(min, selected)));
-    setFocussedTab(-1);
-  }, [selected]);
-
-  useEffect(() => {
-    calculateIndicatorPosition();
-  }, [selectedTab]);
-
-  const calculateIndicatorPosition = () => {
-    const selectedTabButton = (
-      tabButtons[selectedTab].ref as MutableRefObject<HTMLButtonElement | null>
-    ).current as HTMLButtonElement;
-
-    setIndicatorPosition({
-      left: selectedTabButton.offsetLeft,
-      top:
-        selectedTabButton.offsetTop +
-        selectedTabButton.offsetHeight -
-        indicatorRef.current!.offsetHeight
-    });
-    setIndicatorWidth(selectedTabButton.offsetWidth);
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {
-    // do not show focus unless we came here before
-    let currentFocussedTab = focussedTab === -1 ? selectedTab : focussedTab;
-
-    switch (e.code) {
-      case "ArrowLeft":
-        setFocussedTab(currentFocussedTab === min ? max : currentFocussedTab - 1);
-        break;
+    switch (e.key) {
       case "ArrowRight":
-        setFocussedTab(currentFocussedTab === max ? min : currentFocussedTab + 1);
+        setActiveTabIndex(currentIndex => {
+          return currentIndex + 1 > totalAmountOfTabs - 1 ? 0 : currentIndex + 1;
+        });
+        break;
+      case "ArrowLeft":
+        setActiveTabIndex(currentIndex => {
+          return currentIndex - 1 < 0 ? totalAmountOfTabs - 1 : currentIndex - 1;
+        });
         break;
       case "Home":
-        setFocussedTab(min);
+        setActiveTabIndex(0);
         break;
       case "End":
-        setFocussedTab(max);
-        break;
-      case "Space":
-      case "Enter":
-        activateTab(currentFocussedTab);
+        setActiveTabIndex(totalAmountOfTabs - 1);
         break;
+      default:
+        return;
     }
   };
 
-  const handleBlur = () => {
-    setFocussedTab(selectedTab);
+  const calculateIndicatorPosition = () => {
+    if (tabsRef.current) {
+      const selectedButton = tabsRef.current.querySelectorAll('button[role="tab"]')[
+        activeTabIndex
+      ] as HTMLElement;
+
+      setIndicatorStyles({
+        left: selectedButton.offsetLeft,
+        top:
+          selectedButton.offsetTop +
+          selectedButton.offsetHeight -
+          indicatorRef.current!.offsetHeight,
+        width: selectedButton.offsetWidth
+      });
+    }
   };
 
-  const activateTab = (index: number) => {
-    setSelectedTab(index);
-    setFocussedTab(index);
-    onTabChange && onTabChange(index);
-  };
+  useEffect(() => {
+    if (tabsRef.current && renderedButtons.length) {
+      calculateIndicatorPosition();
+    }
+  }, [tabsRef.current, activeTabIndex, renderedButtons]);
 
-  const tabButtons = React.Children.map(children, (child, index) =>
-    React.createElement(TabButton, {
-      ref: child.props.buttonRef || createRef<HTMLButtonElement>(),
-      key: generateID(),
-      tabId: tabIds[index],
-      tabPanelId: tabPanelIds[index],
-      selected: selectedTab === index,
-      focussed: focussedTab === index,
-      onTabButtonClick: () => activateTab(index),
-      children: child.props.title
-    })
-  );
+  useEffect(() => {
+    onTabChange && onTabChange(activeTabIndex);
+  }, [activeTabIndex]);
 
-  const tabPanels = React.Children.map(children, (child, index) =>
-    React.createElement(TabPanel, {
-      ref: child.props.panelRef || createRef<HTMLDivElement>(),
-      key: generateID(),
-      selected: selectedTab === index,
-      tabId: tabIds[index],
-      tabPanelId: tabPanelIds[index],
-      children: child.props.children
-    })
-  );
+  useEffect(() => {
+    const buttons = React.Children.map(children, (child, index) => {
+      if (Object.prototype.hasOwnProperty.call(child.props, "title")) {
+        return React.createElement(TabButton, {
+          key: `${child.props.title.toLowerCase().replace(/\s/, "_")}_button`,
+          tabIndex: activeTabIndex === index ? 0 : -1,
+          "aria-selected": activeTabIndex === index,
+          focused: usingKeyboardNavigation && activeTabIndex === index,
+          tabActive: activeTabIndex === index,
+          "aria-controls": `tab_${index}`,
+          onClick: () => setActiveTabIndex(index),
+          children: child.props.title
+        });
+      }
+      return null;
+    });
+
+    setRenderedButtons(buttons);
+  }, [activeTabIndex]);
+
+  useEffect(() => {
+    const tabs = React.Children.map(children, (child, index) => {
+      if (Object.prototype.hasOwnProperty.call(child.props, "title")) {
+        return React.cloneElement(child, {
+          key: `${child.props.title.toLowerCase().replace(/\s/, "_")}_tab`,
+          tabIndex: activeTabIndex === index ? 0 : -1,
+          tabActive: activeTabIndex === index,
+          id: `tab_${index}`,
+          children: child.props.children
+        });
+      }
+
+      return null;
+    });
+
+    setRenderedTabs(tabs);
+  }, [activeTabIndex]);
 
   return (
-    <div {...rest} className={`${classes["tabs"]} ${className ?? ""}`}>
-      <div
-        role="tablist"
-        onKeyDown={handleKeyDown}
-        onBlur={handleBlur}
-        aria-label={ariaLabel}
-        className={classes["tablist"]}
-      >
+    <div {...rest} ref={tabsRef} className={`${classes["tabs"]} ${rest.className ?? ""}`}>
+      <div role="tablist" className={classes["tablist"]} onKeyDown={handleKeyDown}>
+        {renderedButtons}
         <div className={classes["tabdivider"]} />
-        {tabButtons}
         <div
           className={classes["indicator"]}
           ref={indicatorRef}
           aria-hidden="true"
           tabIndex={-1}
           style={{
-            width: indicatorWidth,
-            ...indicatorPosition
+            width: indicatorStyles.width,
+            left: indicatorStyles.left,
+            top: indicatorStyles.top
           }}
         />
       </div>
-      <div>{tabPanels}</div>
+      <div>{renderedTabs}</div>
     </div>
   );
 };
+
+export const Tabs = React.forwardRef(TabsComponent);

package/src/TextEllipsis/TextEllipsis.tsx

@@ -14,7 +14,13 @@
  *    limitations under the License.
  */
 
-import React, { useRef, MouseEventHandler, useState, ComponentPropsWithRef } from "react";
+import React, {
+  ForwardRefRenderFunction,
+  useRef,
+  MouseEventHandler,
+  useState,
+  ComponentPropsWithRef
+} from "react";
 import { Popover } from "../Popover/Popover";
 import classes from "./TextEllipsis.module.scss";
 
@@ -23,49 +29,52 @@ export interface Props extends ComponentPropsWithRef<"div"> {
   popoverClassName?: string;
 }
 
-export const TextEllipsis = React.forwardRef<HTMLDivElement, Props>(
-  ({ children, popoverClassName, className, ...rest }: Props, ref) => {
-    const [showPopover, setShowPopover] = useState(false);
-    const textContainer = useRef<HTMLDivElement>(null);
+const TextEllipsisComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  { children, popoverClassName, className, ...rest }: Props,
+  ref
+) => {
+  const [showPopover, setShowPopover] = useState(false);
+  const textContainer = useRef<HTMLDivElement>(null);
 
-    const ellipsisVisible = () => {
-      if (
-        textContainer.current &&
-        textContainer.current.offsetWidth < textContainer.current.scrollWidth
-      ) {
-        return true;
-      }
-      return false;
-    };
+  const ellipsisVisible = () => {
+    if (
+      textContainer.current &&
+      textContainer.current.offsetWidth < textContainer.current.scrollWidth
+    ) {
+      return true;
+    }
+    return false;
+  };
 
-    const onMouseEnter: MouseEventHandler<HTMLDivElement> = () => {
-      ellipsisVisible() && setShowPopover(true);
-    };
+  const onMouseEnter: MouseEventHandler<HTMLDivElement> = () => {
+    ellipsisVisible() && setShowPopover(true);
+  };
 
-    const onMouseLeave: MouseEventHandler<HTMLDivElement> = () => {
-      ellipsisVisible() && setShowPopover(false);
-    };
+  const onMouseLeave: MouseEventHandler<HTMLDivElement> = () => {
+    ellipsisVisible() && setShowPopover(false);
+  };
 
-    return (
-      <div
-        {...rest}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-        className={`${classes["text-ellipsis"]} ${className ?? ""}`}
-        ref={ref || textContainer}
+  return (
+    <div
+      {...rest}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      className={`${classes["text-ellipsis"]} ${className ?? ""}`}
+      ref={ref || textContainer}
+    >
+      {children}
+      <Popover
+        aria-hidden={true}
+        data-hidden={!showPopover}
+        show={showPopover}
+        role="tooltip"
+        anchorEl={textContainer}
+        className={`${classes.popover} ${popoverClassName ?? ""}`}
       >
         {children}
-        <Popover
-          aria-hidden={true}
-          data-hidden={!showPopover}
-          show={showPopover}
-          role="tooltip"
-          anchorEl={textContainer}
-          className={`${classes.popover} ${popoverClassName ?? ""}`}
-        >
-          {children}
-        </Popover>
-      </div>
-    );
-  }
-);
+      </Popover>
+    </div>
+  );
+};
+
+export const TextEllipsis = React.forwardRef(TextEllipsisComponent);

package/src/Tiles/Tile.tsx

@@ -17,6 +17,7 @@
 import React, {
   ComponentPropsWithoutRef,
   ComponentPropsWithRef,
+  ForwardRefRenderFunction,
   ReactElement,
   useState
 } from "react";
@@ -40,64 +41,65 @@ export interface Props extends ComponentPropsWithRef<"div"> {
   tileAction?: ReactElement<ContextMenuProps> | ReactElement<IconButtonProps>;
 }
 
-export const Tile = React.forwardRef<HTMLDivElement, Props>(
-  ({ title, imageProps, enabled, className, loading, tileAction, ...rest }: Props, ref) => {
-    const [tileDescriptionID] = useState(generateID(20));
+const TileComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  { title, imageProps, enabled, className, loading, tileAction, ...rest }: Props,
+  ref
+) => {
+  const [tileDescriptionID] = useState(generateID(20));
 
-    if (!title) {
-      throw new Error("Please make sure to pass a title prop to your Tile component.");
+  if (!title) {
+    throw new Error("Please make sure to pass a title prop to your Tile component.");
+  }
+
+  const statusMessage = () => {
+    if (enabled) {
+      return "Status: enabled";
     }
 
-    const statusMessage = () => {
-      if (enabled) {
-        return "Status: enabled";
-      }
+    return "Status: disabled";
+  };
 
-      return "Status: disabled";
-    };
+  return (
+    <article
+      {...rest}
+      tabIndex={0}
+      aria-labelledby={tileDescriptionID}
+      ref={ref}
+      className={`${classes["tile"]} ${loading ? classes["loading"] : ""}`}
+    >
+      <header style={{ justifyContent: enabled === undefined ? "flex-end" : "space-between" }}>
+        {enabled === true && (
+          <Icon
+            color="var(--success)"
+            icon={Icons.Checkmark}
+            className={`${classes["icon"]} ${className ?? ""}`}
+          />
+        )}
+        {enabled === false && (
+          <Icon
+            color="var(--greyed-out)"
+            icon={Icons.Forbidden}
+            className={`${classes["icon"]} ${className ?? ""}`}
+          />
+        )}
+        {enabled !== undefined && (
+          <span id={tileDescriptionID} className={readyClasses["sr-only"]}>
+            {`${title}. ${statusMessage()}`}
+          </span>
+        )}
+        {tileAction ?? null}
+      </header>
+      <div className={classes["content"]}>
+        {imageProps && imageProps.src.length > 0 && (
+          <figure className={classes["image"]}>{!loading && <img {...imageProps} alt="" />}</figure>
+        )}
+        {(!imageProps || imageProps.src.length === 0) && (
+          <Icon className={classes["placeholder"]} icon={Icons.Image} />
+        )}
+        <span className={classes["title"]}>{title}</span>
+      </div>
+    </article>
+  );
+};
 
-    return (
-      <article
-        {...rest}
-        tabIndex={0}
-        aria-labelledby={tileDescriptionID}
-        ref={ref}
-        className={`${classes["tile"]} ${loading ? classes["loading"] : ""}`}
-      >
-        <header style={{ justifyContent: enabled === undefined ? "flex-end" : "space-between" }}>
-          {enabled === true && (
-            <Icon
-              color="var(--success)"
-              icon={Icons.Checkmark}
-              className={`${classes["icon"]} ${className ?? ""}`}
-            />
-          )}
-          {enabled === false && (
-            <Icon
-              color="var(--greyed-out)"
-              icon={Icons.Forbidden}
-              className={`${classes["icon"]} ${className ?? ""}`}
-            />
-          )}
-          {enabled !== undefined && (
-            <span id={tileDescriptionID} className={readyClasses["sr-only"]}>
-              {`${title}. ${statusMessage()}`}
-            </span>
-          )}
-          {tileAction ?? null}
-        </header>
-        <div className={classes["content"]}>
-          {imageProps && imageProps.src.length > 0 && (
-            <figure className={classes["image"]}>
-              {!loading && <img {...imageProps} alt="" />}
-            </figure>
-          )}
-          {(!imageProps || imageProps.src.length === 0) && (
-            <Icon className={classes["placeholder"]} icon={Icons.Image} />
-          )}
-          <span className={classes["title"]}>{title}</span>
-        </div>
-      </article>
-    );
-  }
-);
+export const Tile = React.forwardRef(TileComponent);

package/src/Tiles/Tiles.tsx

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef, ReactNode } from "react";
+import React, { ForwardRefRenderFunction, ComponentPropsWithRef, ReactNode } from "react";
 import classes from "./Tiles.module.scss";
 import { Tile } from "./Tile";
 
@@ -23,45 +23,48 @@ export interface Props extends ComponentPropsWithRef<"div"> {
   loading?: boolean;
 }
 
-export const Tiles = React.forwardRef<HTMLDivElement, Props>(
-  ({ children, className, loading = false, ...rest }: Props, ref) => {
-    const renderChildren = () => {
-      if (loading) {
-        return [
-          <Tile
-            key="placeholder1"
-            title="placeholder"
-            imageProps={{ src: "placeholder" }}
-            loading={true}
-          />,
-          <Tile
-            key="placeholder2"
-            title="placeholder"
-            imageProps={{ src: "placeholder" }}
-            loading={true}
-          />,
-          <Tile
-            key="placeholder3"
-            title="placeholder"
-            imageProps={{ src: "placeholder" }}
-            loading={true}
-          />
-        ];
-      }
+const TilesComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  { children, className, loading = false, ...rest }: Props,
+  ref
+) => {
+  const renderChildren = () => {
+    if (loading) {
+      return [
+        <Tile
+          key="placeholder1"
+          title="placeholder"
+          imageProps={{ src: "placeholder" }}
+          loading={true}
+        />,
+        <Tile
+          key="placeholder2"
+          title="placeholder"
+          imageProps={{ src: "placeholder" }}
+          loading={true}
+        />,
+        <Tile
+          key="placeholder3"
+          title="placeholder"
+          imageProps={{ src: "placeholder" }}
+          loading={true}
+        />
+      ];
+    }
 
-      return children;
-    };
+    return children;
+  };
 
-    return (
-      <div
-        {...rest}
-        ref={ref}
-        className={`${classes["tiles"]} ${className ?? ""}`}
-        aria-live="polite"
-        aria-busy={loading}
-      >
-        {renderChildren()}
-      </div>
-    );
-  }
-);
+  return (
+    <div
+      {...rest}
+      ref={ref}
+      className={`${classes["tiles"]} ${className ?? ""}`}
+      aria-live="polite"
+      aria-busy={loading}
+    >
+      {renderChildren()}
+    </div>
+  );
+};
+
+export const Tiles = React.forwardRef(TilesComponent);