@apia/components 3.0.17 → 3.0.18

package/dist/index.js

@@ -1722,7 +1722,7 @@ const Item = observer(({ tab }) => {
     "aria-controls": `tabpanel-${tab.controller.id}-${tab.state.id}`,
     "aria-selected": tab.state.isOpen ?? false,
     id: `tab-${tab.controller.id}-${tab.id}`,
-    tabIndex: tab.state.isFocused ? 0 : -1,
+    tabIndex: tab.state.isOpen ? 0 : -1,
     role: "tab",
     variant: "inherit"
   };
@@ -1730,31 +1730,37 @@ const Item = observer(({ tab }) => {
 });
 var Item$1 = Item;
 
+function useShowScrollButtons() {
+  const [showScrollButtons, setShowScrollButtons] = useState(false);
+  const [ref, setRef] = useState(null);
+  const controller = useTabsContext();
+  useEffect(() => {
+    if (ref && controller) {
+      const observer = new MutationObserver(([{ addedNodes }]) => {
+        const fixedTabsElement = ref.querySelector(".tabsList__fixedTabs");
+        const hasFixedTabsScroll = (fixedTabsElement?.clientWidth ?? 0) < (fixedTabsElement?.scrollWidth ?? 0);
+        const nonFixedTabsElement = ref.querySelector(".tabs__list");
+        const hasFixedNonTabsScroll = (nonFixedTabsElement?.clientWidth ?? 0) < (nonFixedTabsElement?.scrollWidth ?? 0);
+        setShowScrollButtons(hasFixedTabsScroll || hasFixedNonTabsScroll);
+        if (addedNodes) {
+          ref.querySelector(".tabs__list").scrollLeft = 9999999;
+        }
+      });
+      observer.observe(ref, { childList: true, subtree: true });
+      return () => {
+        observer.disconnect();
+      };
+    }
+    return () => {
+    };
+  }, [controller, ref]);
+  return [showScrollButtons, setRef];
+}
+
 const TabsList = observer(
   ({ arrowsBehavior = "focus" }) => {
     const controller = useTabsContext();
-    const [showScrollButtons, setShowScrollButtons] = React__default.useState(false);
-    const [ref, setRef] = React__default.useState(null);
-    React__default.useEffect(() => {
-      if (ref && controller) {
-        const observer2 = new MutationObserver(([{ addedNodes }]) => {
-          const fixedTabsElement = ref.querySelector(".tabsList__fixedTabs");
-          const hasFixedTabsScroll = (fixedTabsElement?.clientWidth ?? 0) < (fixedTabsElement?.scrollWidth ?? 0);
-          const nonFixedTabsElement = ref.querySelector(".tabs__list");
-          const hasFixedNonTabsScroll = (nonFixedTabsElement?.clientWidth ?? 0) < (nonFixedTabsElement?.scrollWidth ?? 0);
-          setShowScrollButtons(hasFixedTabsScroll || hasFixedNonTabsScroll);
-          if (addedNodes) {
-            ref.querySelector(".tabs__list").scrollLeft = 9999999;
-          }
-        });
-        observer2.observe(ref, { childList: true, subtree: true });
-        return () => {
-          observer2.disconnect();
-        };
-      }
-      return () => {
-      };
-    }, [controller, ref]);
+    const [showScrollButtons, setRef] = useShowScrollButtons();
     const onClickPrev = React__default.useCallback(() => {
       if (arrowsBehavior === "focus")
         controller?.focusPreviousTab();
@@ -1993,7 +1999,7 @@ class TabsController {
         }
       }
       this.state.openTabs.delete(tab);
-      this.getActiveTab().open();
+      this.getActiveTab()?.open();
       this.state.tabs.delete(tab.id);
       this.props?.onCloseTab?.(tab);
     }
@@ -2118,6 +2124,8 @@ class TabsController {
       } catch (e) {
       }
       tab.state.isOpen = true;
+      tab.state.isFocused = true;
+      document.querySelector(`.tabs__item__wrapper[data-id="${tab.id}"]`)?.focus();
       tab.state.onFocus?.(tab);
       if (this.state.openTabs.has(tab)) {
         this.state.openTabs.delete(tab);
@@ -4800,7 +4808,9 @@ const DateInput = React__default.forwardRef(
               `#DateInput${id} input`
             )?.focus();
           },
-          type: "button"
+          type: "button",
+          title: getLabel("btnAiDelete").text,
+          "aria-label": getLabel("btnAiDelete").text
         }
       ),
       [id, onDelete, setCalendarValue]