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

package/dist/taco.d.ts

@@ -1674,7 +1674,7 @@ export declare type IconButtonProps = Omit<ButtonPrimitive.ButtonProps, 'childre
     tooltip?: string | JSX.Element;
 };
 
-export declare type IconName = 'account-preview' | 'accounting-year-cancel' | 'accounting-year' | 'accounting' | 'ai-chat-solid' | 'ai-stars' | 'arrow-bottom' | 'arrow-down' | 'arrow-end' | 'arrow-left' | 'arrow-right' | 'arrow-start' | 'arrow-top' | 'arrow-up' | 'attach-auto' | 'attach-cancel' | 'attach-warning' | 'attach' | 'autopay-paused' | 'autopay' | 'autotext-insert' | 'autotext' | 'basic-tabs' | 'basic' | 'bell-solid' | 'book' | 'booking' | 'budget' | 'calendar' | 'cash-account' | 'cash-reports' | 'chart-area' | 'chart-bar' | 'chart-line' | 'chart-pie' | 'chart-table' | 'chat-solid' | 'chat' | 'chevron-down-double' | 'chevron-down-solid' | 'chevron-down' | 'chevron-left-double' | 'chevron-left-solid' | 'chevron-left' | 'chevron-right-double' | 'chevron-right-solid' | 'chevron-right' | 'chevron-up-double' | 'chevron-up-solid' | 'chevron-up' | 'circle-close' | 'circle-information' | 'circle-minus' | 'circle-plus' | 'circle-questionmark' | 'circle-tick' | 'circle-warning' | 'clamp-open' | 'clamp' | 'close' | 'column-freeze' | 'column-unfreeze' | 'columns' | 'connection-enable' | 'connection-revoke' | 'contacts' | 'copy' | 'courses' | 'credit' | 'delete-permanently' | 'delete' | 'depecriate' | 'developer' | 'distribution-template' | 'document-approve' | 'document-create-entry' | 'document-cut' | 'document-error' | 'document-isolate-page' | 'document-merge' | 'document-move' | 'document-preview' | 'document-received' | 'document-rejected-request' | 'document-signed-solid' | 'document-signed' | 'document-split' | 'document-time' | 'document' | 'download' | 'drag' | 'e-copedia' | 'edit-simple' | 'edit' | 'ellipsis-horizontal' | 'ellipsis-vertical' | 'entries-on-account' | 'entries-open' | 'entries-warning' | 'entry-type-customer-invoice' | 'entry-type-customer-payment' | 'entry-type-journal-entry' | 'entry-type-manual-customer-invoice' | 'entry-type-supplier-invoice' | 'entry-type-supplier-payment' | 'envelope-approved' | 'envelope-solid' | 'envelope' | 'expand-view' | 'expenses' | 'experiment' | 'export-to-excel' | 'export-to-pdf' | 'export' | 'eye-off' | 'eye-on' | 'filter-solid' | 'filter' | 'font-size' | 'graph-solid' | 'hash' | 'height-extra-tall' | 'height-medium' | 'height-short' | 'height-tall' | 'house-solid' | 'house' | 'id' | 'images' | 'import' | 'inbox-einvoicing' | 'inbox-scanning' | 'inbox-smart' | 'inbox' | 'info' | 'inventory-matrix' | 'inventory' | 'journal-pro' | 'layout-both' | 'layout-first' | 'layout-last' | 'layout-none' | 'layout' | 'ledger-card-customer-reminder' | 'ledger-card-manual-customer-invoice' | 'ledger-card-obsolete-stock' | 'ledger-card-opening-entry' | 'ledger-card-reserved-entry' | 'ledger-card-shrinkage-pilferage' | 'ledger-card-stock-adjustment' | 'ledger-card-transferred-opening-entry' | 'ledger-card' | 'lightbulb' | 'line' | 'link-external' | 'list-bulleted' | 'list-search' | 'list' | 'location' | 'lock-open' | 'lock' | 'log-out' | 'log' | 'market' | 'mastercard-os' | 'match-amount' | 'match-entries' | 'menu' | 'mileage' | 'modal-resize' | 'modal-shrink' | 'more-solid' | 'more' | 'move' | 'navigation-list' | 'note-follow-up' | 'note-read' | 'note' | 'november-first' | 'numbers' | 'partner-api' | 'payment-paid' | 'payment-unpaid' | 'period' | 'person-change' | 'person-minus' | 'person-plus' | 'person-solid' | 'person-tick' | 'person' | 'phone-solid' | 'phone' | 'play' | 'plus-minus' | 'print' | 'process-payment' | 'product-ledger-card' | 'profile' | 'project-cards' | 'projects' | 'question-mark-bold' | 'question-mark' | 'quicklinks' | 'rating-bankruptcy' | 'rating-payment-problems' | 'reconciled' | 'refresh' | 'report-solid' | 'report' | 'restore' | 'rotate-left' | 'rotate-right' | 'sales' | 'search-bold' | 'search' | 'secure-tick' | 'secure' | 'settings-solid' | 'settings' | 'shortcuts' | 'show-all' | 'show-less' | 'show-more' | 'show-template' | 'sliders' | 'smartpay' | 'sort-by' | 'star-solid' | 'star' | 'subscriptions' | 'system-entries' | 'tag' | 'template-override' | 'templates' | 'thumb-both' | 'thumb-down-solid' | 'thumb-down' | 'thumb-up-solid' | 'thumb-up' | 'tick-bold' | 'tick' | 'time' | 'transfer-cancel' | 'transfer-locked' | 'transfer' | 'undo' | 'undock' | 'unreconciled' | 'wallet' | 'warning' | 'webshop' | 'website' | 'workflow-template-basic' | 'workflow' | 'zoom';
+export declare type IconName = 'account-preview' | 'accounting-year-cancel' | 'accounting-year' | 'accounting' | 'ai-chat-solid' | 'ai-stars' | 'arrow-bottom' | 'arrow-down' | 'arrow-end' | 'arrow-left' | 'arrow-right' | 'arrow-start' | 'arrow-top' | 'arrow-up' | 'attach-auto' | 'attach-cancel' | 'attach-warning' | 'attach' | 'autopay-paused' | 'autopay' | 'autotext-insert' | 'autotext' | 'basic-tabs' | 'basic' | 'bell-solid' | 'book' | 'booking' | 'budget' | 'calendar' | 'cash-account' | 'cash-reports' | 'chart-area' | 'chart-bar' | 'chart-line' | 'chart-pie' | 'chart-table' | 'chat-solid' | 'chat' | 'chevron-down-double' | 'chevron-down-solid' | 'chevron-down' | 'chevron-left-double' | 'chevron-left-solid' | 'chevron-left' | 'chevron-right-double' | 'chevron-right-solid' | 'chevron-right' | 'chevron-up-double' | 'chevron-up-solid' | 'chevron-up' | 'circle-close' | 'circle-information' | 'circle-minus' | 'circle-plus' | 'circle-questionmark' | 'circle-tick' | 'circle-warning' | 'clamp-open' | 'clamp' | 'click-to-pay' | 'close' | 'column-freeze' | 'column-unfreeze' | 'columns' | 'connection-enable' | 'connection-revoke' | 'contacts' | 'copy' | 'courses' | 'credit' | 'delete-permanently' | 'delete' | 'depecriate' | 'developer' | 'distribution-template' | 'document-approve' | 'document-create-entry' | 'document-cut' | 'document-error' | 'document-isolate-page' | 'document-merge' | 'document-move' | 'document-preview' | 'document-received' | 'document-rejected-request' | 'document-signed-solid' | 'document-signed' | 'document-split' | 'document-time' | 'document' | 'download' | 'drag' | 'e-copedia' | 'edit-simple' | 'edit' | 'ellipsis-horizontal' | 'ellipsis-vertical' | 'entries-on-account' | 'entries-open' | 'entries-warning' | 'entry-type-customer-invoice' | 'entry-type-customer-payment' | 'entry-type-journal-entry' | 'entry-type-manual-customer-invoice' | 'entry-type-supplier-invoice' | 'entry-type-supplier-payment' | 'envelope-approved' | 'envelope-solid' | 'envelope' | 'expand-view' | 'expenses' | 'experiment' | 'export-to-excel' | 'export-to-pdf' | 'export' | 'eye-off' | 'eye-on' | 'filter-solid' | 'filter' | 'font-size' | 'graph-solid' | 'hash' | 'height-extra-tall' | 'height-medium' | 'height-short' | 'height-tall' | 'house-solid' | 'house' | 'id' | 'images' | 'import' | 'inbox-einvoicing' | 'inbox-scanning' | 'inbox-smart' | 'inbox' | 'info' | 'inventory-matrix' | 'inventory' | 'journal-pro' | 'layout-both' | 'layout-first' | 'layout-last' | 'layout-none' | 'layout' | 'ledger-card-customer-reminder' | 'ledger-card-manual-customer-invoice' | 'ledger-card-obsolete-stock' | 'ledger-card-opening-entry' | 'ledger-card-reserved-entry' | 'ledger-card-shrinkage-pilferage' | 'ledger-card-stock-adjustment' | 'ledger-card-transferred-opening-entry' | 'ledger-card' | 'lightbulb' | 'line' | 'link-external' | 'list-bulleted' | 'list-search' | 'list' | 'location' | 'lock-open' | 'lock' | 'log-out' | 'log' | 'market' | 'mastercard-os' | 'match-amount' | 'match-entries' | 'menu' | 'mileage' | 'modal-resize' | 'modal-shrink' | 'more-solid' | 'more' | 'move' | 'navigation-list' | 'note-follow-up' | 'note-read' | 'note' | 'november-first' | 'numbers' | 'partner-api' | 'payment-paid' | 'payment-unpaid' | 'period' | 'person-change' | 'person-minus' | 'person-plus' | 'person-solid' | 'person-tick' | 'person' | 'phone-solid' | 'phone' | 'play' | 'plus-minus' | 'print' | 'process-payment' | 'product-ledger-card' | 'profile' | 'project-cards' | 'projects' | 'question-mark-bold' | 'question-mark' | 'quicklinks' | 'rating-bankruptcy' | 'rating-payment-problems' | 'reconciled' | 'refresh' | 'report-solid' | 'report' | 'restore' | 'rotate-left' | 'rotate-right' | 'sales' | 'search-bold' | 'search' | 'secure-tick' | 'secure' | 'settings-solid' | 'settings' | 'shortcuts' | 'show-all' | 'show-less' | 'show-more' | 'show-template' | 'sliders' | 'smartpay' | 'sort-by' | 'star-solid' | 'star' | 'subscriptions' | 'system-entries' | 'tag' | 'template-override' | 'templates' | 'thumb-both' | 'thumb-down-solid' | 'thumb-down' | 'thumb-up-solid' | 'thumb-up' | 'tick-bold' | 'tick' | 'time' | 'transfer-cancel' | 'transfer-locked' | 'transfer' | 'undo' | 'undock' | 'unreconciled' | 'wallet' | 'warning' | 'webshop' | 'website' | 'workflow-template-basic' | 'workflow' | 'zoom';
 
 export declare type IconProps = default_2.SVGAttributes<SVGSVGElement> & {
     /** Set what svg icon should be rendered */

package/dist/taco.js

@@ -793,6 +793,16 @@ function IconClamp(props, svgRef) {
   ));
 }
 const Clamp = React.forwardRef(IconClamp);
+function IconClickToPay(props, svgRef) {
+  return /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", ref: svgRef, ...props }, /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      d: "M23.804 11.52l-5.752-6.676a.692.692 0 00-1.282.357c0 .2.086.38.224.506l5.209 6.275-5.152 6.157h-2.225l4.869-5.629.009-.01a.7.7 0 00.192-.491.7.7 0 00-.192-.492l-.01-.01-5.813-6.651-.004-.005a.692.692 0 00-.595-.337H9.2a.689.689 0 00-.691.687c0 .115.015.235.079.32l5.411 6.512-4.611 5.497c-.028.028-.425.59-1.124.59H2.757c-.75 0-1.37-.58-1.37-1.353v-9.53c0-.671.62-1.361 1.386-1.361H6.2c.403 0 .691-.274.691-.676s-.286-.7-.69-.7l-3.461.013C1.101 4.514 0 5.858 0 7.223v9.544c0 1.471 1.304 2.723 2.74 2.723h5.506c.277 0 .532-.04.76-.105l.096-.029a2.966 2.966 0 001.306-.853l5.19-6.01c.245-.277.278-.677.004-.977l-.008-.01-4.91-5.63h2.266l5.13 6.13-5.399 6.472s.001.007.01.016a.685.685 0 00.611 1.006h4.084a.69.69 0 00.594-.337s.002-.003.005-.004l5.813-6.65.009-.01c.274-.3.241-.7-.005-.977",
+      fill: "currentColor"
+    }
+  ));
+}
+const ClickToPay = React.forwardRef(IconClickToPay);
 function IconClose(props, svgRef) {
   return /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", ref: svgRef, ...props }, /* @__PURE__ */ React.createElement(
     "path",
@@ -3047,6 +3057,7 @@ const icons = {
   "circle-warning": CircleWarning,
   "clamp-open": ClampOpen,
   clamp: Clamp,
+  "click-to-pay": ClickToPay,
   close: Close$3,
   "column-freeze": ColumnFreeze,
   "column-unfreeze": ColumnUnfreeze,
@@ -43888,23 +43899,6 @@ 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);
@@ -43912,11 +43906,7 @@ function useTableRowActive$1(isEnabled = false, initialRowActiveIndex) {
   const move = (direction, length, scrollToIndex) => {
     const nextIndex = rowActiveIndex === void 0 ? 0 : getNextIndex(direction, rowActiveIndex, length);
     scrollToIndex(nextIndex);
-    if (nextIndex === rowActiveIndex) {
-      setTimeout(() => focusActiveRow(), 0);
-    } else {
-      setTimeout(() => setRowActiveIndex(nextIndex), 50);
-    }
+    setTimeout(() => setRowActiveIndex(nextIndex), 50);
   };
   const onKeyDown = React__default.useCallback(
     (event, length, scrollToIndex) => {
@@ -44633,7 +44623,7 @@ function useTableRowDrop(isEnabled = false, onRowDrop) {
     handleDrop: isEnabled ? onRowDrop : void 0
   };
 }
-function useTableRowActiveListener(table, onRowActive) {
+function useTableRowActiveListener$1(table, onRowActive) {
   var _a;
   const meta = table.options.meta;
   const rows = table.getRowModel().flatRows;
@@ -44745,7 +44735,7 @@ function useTableManager(props, ref, meta, internalColumns) {
   useTableDataListener(instance, length);
   useTableFilterListener(instance, props.onChangeFilter);
   useTableFontSizeListener(instance);
-  useTableRowActiveListener(instance, props.onRowActive);
+  useTableRowActiveListener$1(instance, props.onRowActive);
   useTableRowHeightListener(instance);
   useTableRowSelectionListener(instance, props.onRowSelect);
   useTableSearchListener(instance);
@@ -44947,11 +44937,6 @@ 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;
@@ -44964,7 +44949,7 @@ function useTableGlobalShortcuts(table, tableRef, scrollToIndex, localShortcuts
         if (isElementInsideExternalRelatedOverlay(trigger, tableRef)) {
           return;
         }
-        const reachableRows = getReachableRowCount(table);
+        const reachableRows = tableMeta.length + table.getBottomRows().length;
         tableMeta.rowActive.handleKeyDown(event, reachableRows, scrollToIndex);
         tableMeta.rowSelection.handleKeyDown(event, table);
         if (tableMeta.rowActive.rowActiveIndex !== void 0) {
@@ -45930,6 +45915,18 @@ 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;
@@ -46264,7 +46261,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$1(manager.instance, ref);
+  useTableRowActiveListener(manager.instance, ref);
   return {
     ...manager,
     props: {
@@ -47147,7 +47144,7 @@ function Body(props) {
     }
     if (tableMeta.rowActive.rowActiveIndex !== void 0) {
       const isFirstRow = tableMeta.rowActive.rowActiveIndex === 0;
-      const reachableRows = getReachableRowCount(table);
+      const reachableRows = tableMeta.length + table.getBottomRows().length;
       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]"))) {