@economic/taco 3.0.1 → 3.0.2-row-active-search.1

package/dist/taco.js

@@ -23927,7 +23927,7 @@ const Card = React.forwardRef(function Card2(props, ref) {
   const { title, menu, children, className, ...otherProps } = props;
   const localization = useLocalization();
   const cardClassName = clsx(
-    "bg-white flex flex-col rounded-xl border border-solid border-radius-[12px] border-grey-300 hover:border-grey-500",
+    "bg-white flex flex-col rounded-xl border border-solid border-radius-[12px] border-grey-300",
     className
   );
   return /* @__PURE__ */ React.createElement("div", { ...otherProps, className: cardClassName, "data-taco": "card", ref }, /* @__PURE__ */ React.createElement("div", { className: "flex justify-between px-4 pb-2 pt-4" }, title && /* @__PURE__ */ React.createElement(Truncate, { tooltip: title }, /* @__PURE__ */ React.createElement("h4", { className: "mb-0 flex-grow truncate text-left" }, title)), menu ? /* @__PURE__ */ React.createElement(
@@ -43888,6 +43888,23 @@ const useIsHoverStatePaused = () => {
   }, [shouldPauseHoverState]);
   return [shouldPauseHoverState, setShouldPauseHoverState];
 };
+function focusActiveRow(tableRef) {
+  var _a;
+  const activeRow = ((_a = (tableRef == null ? void 0 : tableRef.current) ?? document) == null ? void 0 : _a.querySelector('tbody tr[data-row-active="true"]')) ?? null;
+  if (activeRow) {
+    if (!isElementInsideOrTriggeredFromContainer(document.activeElement, activeRow) && !isElementInteractive(document.activeElement)) {
+      activeRow.focus({ preventScroll: true });
+    }
+  }
+}
+function useTableRowActiveListener$1(table, tableRef) {
+  const tableMeta = table.options.meta;
+  React__default.useEffect(() => {
+    if (tableMeta.rowActive.rowActiveIndex !== void 0) {
+      focusActiveRow(tableRef);
+    }
+  }, [tableMeta.rowActive.rowActiveIndex, tableRef]);
+}
 function useTableRowActive$1(isEnabled = false, initialRowActiveIndex) {
   const [rowActiveIndex, setRowActiveIndex] = React__default.useState(initialRowActiveIndex);
   const [rowHoverIndex, setRowHoverIndex] = React__default.useState(void 0);
@@ -43895,7 +43912,11 @@ function useTableRowActive$1(isEnabled = false, initialRowActiveIndex) {
   const move = (direction, length, scrollToIndex) => {
     const nextIndex = rowActiveIndex === void 0 ? 0 : getNextIndex(direction, rowActiveIndex, length);
     scrollToIndex(nextIndex);
-    setTimeout(() => setRowActiveIndex(nextIndex), 50);
+    if (nextIndex === rowActiveIndex) {
+      setTimeout(() => focusActiveRow(), 0);
+    } else {
+      setTimeout(() => setRowActiveIndex(nextIndex), 50);
+    }
   };
   const onKeyDown = React__default.useCallback(
     (event, length, scrollToIndex) => {
@@ -44612,7 +44633,7 @@ function useTableRowDrop(isEnabled = false, onRowDrop) {
     handleDrop: isEnabled ? onRowDrop : void 0
   };
 }
-function useTableRowActiveListener$1(table, onRowActive) {
+function useTableRowActiveListener(table, onRowActive) {
   var _a;
   const meta = table.options.meta;
   const rows = table.getRowModel().flatRows;
@@ -44724,7 +44745,7 @@ function useTableManager(props, ref, meta, internalColumns) {
   useTableDataListener(instance, length);
   useTableFilterListener(instance, props.onChangeFilter);
   useTableFontSizeListener(instance);
-  useTableRowActiveListener$1(instance, props.onRowActive);
+  useTableRowActiveListener(instance, props.onRowActive);
   useTableRowHeightListener(instance);
   useTableRowSelectionListener(instance, props.onRowSelect);
   useTableSearchListener(instance);
@@ -44926,6 +44947,11 @@ function getCellWidthPadding(fontSize) {
       return "16px";
   }
 }
+function getReachableRowCount(table) {
+  const tableMeta = table.options.meta;
+  const isFilteringActive = table.options.enableGlobalFilter && table.getState().globalFilter;
+  return isFilteringActive ? table.getRowModel().rows.length + table.getBottomRows().length : tableMeta.length + table.getBottomRows().length;
+}
 function useTableGlobalShortcuts(table, tableRef, scrollToIndex, localShortcuts = false) {
   const tableMeta = table.options.meta;
   const rows = table.getRowModel().rows;
@@ -44938,7 +44964,7 @@ function useTableGlobalShortcuts(table, tableRef, scrollToIndex, localShortcuts
         if (isElementInsideExternalRelatedOverlay(trigger, tableRef)) {
           return;
         }
-        const reachableRows = tableMeta.length + table.getBottomRows().length;
+        const reachableRows = getReachableRowCount(table);
         tableMeta.rowActive.handleKeyDown(event, reachableRows, scrollToIndex);
         tableMeta.rowSelection.handleKeyDown(event, table);
         if (tableMeta.rowActive.rowActiveIndex !== void 0) {
@@ -45904,18 +45930,6 @@ function useRowGroupVirtualisation(table) {
   );
   return isTableGrouped ? rangeExtractor : void 0;
 }
-function useTableRowActiveListener(table, tableRef) {
-  const tableMeta = table.options.meta;
-  React__default.useEffect(() => {
-    var _a, _b;
-    if (tableMeta.rowActive.rowActiveIndex !== void 0) {
-      const activeRow = ((_a = tableRef.current) == null ? void 0 : _a.querySelector('tbody tr[data-row-active="true"]')) ?? null;
-      if (!isElementInsideOrTriggeredFromContainer(document.activeElement, activeRow) && !isElementInteractive(document.activeElement)) {
-        (_b = activeRow == null ? void 0 : activeRow.focus) == null ? void 0 : _b.call(activeRow, { preventScroll: true });
-      }
-    }
-  }, [tableMeta.rowActive.rowActiveIndex]);
-}
 function Actions(props) {
   var _a, _b;
   const { actions, actionsLength, data, isActiveRow, rowId, table } = props;
@@ -46250,7 +46264,7 @@ function useTable$1(props, externalRef, renderers, meta) {
   const { style, stylesheet } = useTableStyle(manager.id, manager.instance);
   useTableGlobalShortcuts(manager.instance, ref, renderer2.scrollToIndex, props.enableLocalKeyboardShortcuts);
   useTableRef(manager.instance, ref);
-  useTableRowActiveListener(manager.instance, ref);
+  useTableRowActiveListener$1(manager.instance, ref);
   return {
     ...manager,
     props: {
@@ -47133,7 +47147,7 @@ function Body(props) {
     }
     if (tableMeta.rowActive.rowActiveIndex !== void 0) {
       const isFirstRow = tableMeta.rowActive.rowActiveIndex === 0;
-      const reachableRows = tableMeta.length + table.getBottomRows().length;
+      const reachableRows = getReachableRowCount(table);
       const isLastRow = tableMeta.rowActive.rowActiveIndex === reachableRows - 1;
       if (event.key === "Tab" || enableHorizontalArrowKeyNavigation && (event.key === "ArrowLeft" || event.key === "ArrowRight")) {
         if (event.key === "Tab" && !hasFocusableElement(event.target.closest("tr[data-row-id]"))) {
@@ -96722,7 +96736,7 @@ const getLinkClasses = (icon = void 0) => clsx(
   "flex h-8 flex-shrink-0 flex-grow-0 cursor-pointer items-center justify-center ",
   "focus:!shadow-none focus:!outline-none focus-visible:!yt-focus-dark",
   "bg-transparent hover:bg-white/[.08] focus:bg-white/[.08] aria-current-page:bg-white/[.08]",
-  "text-white hover:text-white focus:text-white",
+  "!text-white hover:text-white focus:text-white",
   {
     "!rounded-full !h-9 !w-9": icon,
     "whitespace-nowrap px-3 rounded text-sm hidden lg:flex": !icon