@onewelcome/react-lib-components 9.8.0 → 9.8.1

package/src/components/DataGrid/DataGridFilters/DataGridFilterPopover.tsx

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-import React, { useEffect } from "react";
+import React from "react";
 import classes from "./DataGridFilter.module.scss";
 import { Button } from "../../Button/Button";
 import { Option } from "../../Form/Select/SingleSelect/Option";
@@ -81,12 +81,6 @@ export const DataGridFilterPopover = ({
   const isValueRequired = operator && !operator.allowEmptyValues;
   const hasValidationError = Boolean(isValueRequired && pickedValues.length === 0);
 
-  useEffect(() => {
-    if (isOpen) {
-      popoverRef.current?.focus();
-    }
-  }, [isOpen]);
-
   return (
     <Popover
       tabIndex={-1}
@@ -100,6 +94,7 @@ export const DataGridFilterPopover = ({
         <div className={classes["popover"]}>
           <div className={classes["controls"]}>
             <SelectWrapper
+              selectProps={{ selectButtonProps: { autoFocus: true } }}
               label={columnSelectLabel}
               value={column}
               name={"column"}

package/src/components/Form/Select/SingleSelect/Select.tsx

@@ -140,9 +140,8 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, SingleSelectP
    */
   const renderOptions = () => {
     if (isSearching || filter !== "") {
-      const filteredChildren = React.Children.toArray(children).filter(
-        child =>
-          (child as ReactElement).props.children.toLowerCase().match(filter.toLowerCase()) !== null
+      const filteredChildren = React.Children.toArray(children).filter(child =>
+        (child as ReactElement).props.children.toLowerCase().includes(filter.toLowerCase())
       );
 
       const internalChildren = _internalRenderChildren(filteredChildren as ReactElement[]);

package/src/components/Tabs/Tabs.tsx

@@ -32,6 +32,7 @@ export interface Props extends ComponentPropsWithRef<"div"> {
   children: ReactElement<TabProps>[];
   selected?: number;
   onTabChange?: (index: number) => void;
+  tabChanging?: (newIndex: number, oldIndex: number) => Promise<boolean> | boolean;
   fluid?: boolean;
   align?: "left" | "center" | "right";
   tabListClassName?: string;
@@ -48,6 +49,7 @@ const TabsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     tabListClassName,
     align,
     iconsPosition = "left",
+    tabChanging,
     ...rest
   }: Props,
   ref
@@ -78,21 +80,21 @@ const TabsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     }
 
     switch (e.key) {
-      case "ArrowRight":
-        setActiveTabIndex(currentIndex => {
-          return currentIndex + 1 > totalAmountOfTabs - 1 ? 0 : currentIndex + 1;
-        });
+      case "ArrowRight": {
+        const nextIndex = activeTabIndex + 1 > totalAmountOfTabs - 1 ? 0 : activeTabIndex + 1;
+        void handleTabClick(nextIndex);
         break;
-      case "ArrowLeft":
-        setActiveTabIndex(currentIndex => {
-          return currentIndex - 1 < 0 ? totalAmountOfTabs - 1 : currentIndex - 1;
-        });
+      }
+      case "ArrowLeft": {
+        const prevIndex = activeTabIndex - 1 < 0 ? totalAmountOfTabs - 1 : activeTabIndex - 1;
+        void handleTabClick(prevIndex);
         break;
+      }
       case "Home":
-        setActiveTabIndex(0);
+        void handleTabClick(0);
         break;
       case "End":
-        setActiveTabIndex(totalAmountOfTabs - 1);
+        void handleTabClick(totalAmountOfTabs - 1);
         break;
       default:
         return;
@@ -117,16 +119,32 @@ const TabsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     }
   };
 
+  const handleTabClick = async (newIndex: number) => {
+    try {
+      const allowed =
+        typeof tabChanging === "function"
+          ? await Promise.resolve(tabChanging(newIndex, activeTabIndex))
+          : true;
+
+      if (!allowed) {
+        const buttons = tabsRef.current?.querySelectorAll<HTMLButtonElement>('button[role="tab"]');
+        buttons?.[activeTabIndex]?.focus();
+        return;
+      }
+
+      setActiveTabIndex(newIndex);
+      onTabChange?.(newIndex);
+    } catch (error) {
+      console.error("handleTabClick failed: ", error);
+    }
+  };
+
   useEffect(() => {
     if (tabsRef.current && renderedButtons.length) {
       calculateIndicatorPosition();
     }
   }, [tabsRef.current, activeTabIndex, renderedButtons]);
 
-  useEffect(() => {
-    onTabChange?.(activeTabIndex);
-  }, [activeTabIndex]);
-
   useEffect(() => {
     const buttons = React.Children.map(children, (child, index) => {
       if (Object.prototype.hasOwnProperty.call(child.props, "title")) {
@@ -139,7 +157,9 @@ const TabsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
             focused: usingKeyboardNavigation && activeTabIndex === index,
             tabActive: activeTabIndex === index,
             "aria-controls": `tab_${index}`,
-            onClick: () => setActiveTabIndex(index),
+            onClick: () => {
+              void handleTabClick(index);
+            },
             disabled: child.props.disabled,
             fluid: fluid,
             iconPosition: iconsPosition,