@economic/taco 2.48.5 → 2.49.0-dataloader.0

package/dist/components/Report/Report.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { ReportRef, ReportProps, ReportColumnProps, ReportGroupProps } from './types';
 declare function Column<TType = unknown>(_: ReportColumnProps<TType>): null;
 declare function Group(_: ReportGroupProps): null;
-export declare const Report: (<TType = unknown>(props: Pick<import("../..").TableProps<TType>, "length" | "loadAll" | "loadPage" | "pageSize" | "enableFiltering" | "enableSearch" | "enableSorting" | "enableColumnFreezing" | "enableColumnHiding" | "enableColumnResizing" | "enableRowExpansion" | "enableRowExpansionAll" | "enableRowSelection" | "enableColumnOrdering" | "enableFontSize" | "enableFooter" | "enablePrinting" | "enableRowActions" | "enableRowActive" | "enableRowClick" | "enableRowDrag" | "enableRowDrop" | "enableRowGoto" | "enableRowHeight" | "enableSaveSettings" | "children" | "data" | "id" | "customSettings" | "defaultColumnFreezingIndex" | "defaultRowActiveIndex" | "defaultRowGroupColumnId" | "defaultSettings" | "emptyState" | "rowActions" | "rowActionsForGroup" | "rowActionsLength" | "rowExpansionRenderer" | "rowIdentityAccessor" | "shortcuts" | "toolbarLeft" | "toolbarRight" | "toolbarPanel" | "onRowClick" | "onRowDrag" | "onRowDrop" | "onRowGoto" | "onRowSelect" | "onChangeFilter" | "onChangeSearch" | "onChangeSettings" | "onChangeSort"> & React.RefAttributes<import("../..").TableRef>) => JSX.Element) & {
+export declare const Report: (<TType = unknown>(props: Pick<import("../..").TableProps<TType>, "length" | "loadAll" | "loadPage" | "pageSize" | "pages" | "_experimentalDataLoader2" | "enableFiltering" | "enableSearch" | "enableSorting" | "enableColumnFreezing" | "enableColumnHiding" | "enableColumnResizing" | "enableRowExpansion" | "enableRowExpansionAll" | "enableRowSelection" | "enableColumnOrdering" | "enableFontSize" | "enableFooter" | "enablePrinting" | "enableRowActions" | "enableRowActive" | "enableRowClick" | "enableRowDrag" | "enableRowDrop" | "enableRowGoto" | "enableRowHeight" | "enableSaveSettings" | "children" | "data" | "id" | "customSettings" | "defaultColumnFreezingIndex" | "defaultRowActiveIndex" | "defaultRowGroupColumnId" | "defaultSettings" | "emptyState" | "rowActions" | "rowActionsForGroup" | "rowActionsLength" | "rowExpansionRenderer" | "rowIdentityAccessor" | "shortcuts" | "toolbarLeft" | "toolbarRight" | "toolbarPanel" | "onRowClick" | "onRowDrag" | "onRowDrop" | "onRowGoto" | "onRowSelect" | "onChangeFilter" | "onChangeSearch" | "onChangeSettings" | "onChangeSort"> & React.RefAttributes<import("../..").TableRef>) => JSX.Element) & {
     Column: typeof Column;
     Group: typeof Group;
 };

package/dist/components/SearchInput2/SearchInput2.d.ts

@@ -13,12 +13,14 @@ interface BasicSearchInput2Props extends CommonSearchInput2Props {
     findTotal?: never;
     onClickFindNext?: never;
     onClickFindPrevious?: never;
+    showTotal?: never;
 }
 interface ComplexSearchInput2Props extends CommonSearchInput2Props {
     findCurrent: number | null;
     findTotal: number | null;
     onClickFindNext: () => void;
     onClickFindPrevious: () => void;
+    showTotal?: boolean;
 }
 export declare type SearchInput2Props = BasicSearchInput2Props | ComplexSearchInput2Props;
 export declare const SearchInput2: React.ForwardRefExoticComponent<(BasicSearchInput2Props & React.RefAttributes<HTMLInputElement>) | (ComplexSearchInput2Props & React.RefAttributes<HTMLInputElement>)>;

package/dist/components/Table3/features/useEditingState.d.ts

@@ -1,29 +1,29 @@
 import { Table as ReactTable, Cell as ReactTableCell } from '@tanstack/react-table';
-import { Table3EditingChangeHandler, Table3EditingSaveHandler, Table3EditingValidatorFn } from '../types';
+import { Table3EditingChangeHandler, Table3EditingDiscardHandler, Table3EditingSaveHandler, Table3EditingValidatorFn } from '../types';
 declare type EditingSaveState = 'saving' | 'saved' | 'errored';
-export declare function usePendingChangesState<TType = unknown>(handleSave: Table3EditingSaveHandler<TType> | undefined, handleChange: Table3EditingChangeHandler<TType> | undefined, rowIdentityAccessor: keyof TType, validator: Table3EditingValidatorFn<TType> | undefined): {
-    setRowValue: <T extends TType>(rowId: string, original: T, value: Partial<T>) => Promise<void>;
+export declare function usePendingChangesState<TType = unknown>(handleSave: Table3EditingSaveHandler<TType> | undefined, handleChange: Table3EditingChangeHandler<TType> | undefined, handleDiscard: Table3EditingDiscardHandler | undefined, rowIdentityAccessor: keyof TType, validator: Table3EditingValidatorFn<TType> | undefined): {
     getRowValue: (rowId: string) => any;
     getRowMoveReason: (rowId: string) => unknown;
     hasRowErrors: (rowId: string) => boolean;
     hasRowErrorsShownInAlert: (rowId: string) => boolean;
-    hasTemporaryRowErrors: <T_1 extends TType>() => boolean;
+    hasTemporaryRowErrors: <T extends TType>() => boolean;
     getRowStatus: (rowId: string) => any;
     setRowStatus: (rowId: string, status: EditingSaveState | undefined) => void;
-    setCellValue: <T_2 extends TType>(cell: ReactTableCell<T_2, unknown>, value: unknown) => void;
-    getCellValue: <T_3 extends TType>(cell: ReactTableCell<T_3, unknown>) => unknown | undefined;
-    getCellError: <T_4 extends TType>(cell: ReactTableCell<T_4, unknown>) => string | undefined;
-    onCellChanged: <T_5 extends TType>(cell: ReactTableCell<T_5, unknown>, rowIndex: number, nextValue: any, shouldRunUpdaters?: boolean) => Promise<void>;
-    getErrorsShownInAlert: <T_6 extends TType>() => {
+    setCellValue: <T_1 extends TType>(cell: ReactTableCell<T_1, unknown>, rowIndex: number, value: unknown) => void;
+    getCellValue: <T_2 extends TType>(cell: ReactTableCell<T_2, unknown>) => unknown | undefined;
+    getCellError: <T_3 extends TType>(cell: ReactTableCell<T_3, unknown>) => string | undefined;
+    onCellChanged: <T_4 extends TType>(cell: ReactTableCell<T_4, unknown>, rowIndex: number, nextValue: any, shouldRunUpdaters?: boolean) => Promise<void>;
+    getErrorsShownInAlert: <T_5 extends TType>() => {
         rowId: string;
-        changes: Partial<T_6>;
+        index: any;
+        changes: Partial<T_5>;
         errors: any;
     }[];
     hasChanges: (rowId?: string | undefined) => boolean;
-    saveChanges: <T_7 extends TType>(table: ReactTable<T_7>, rowId?: string | undefined) => Promise<boolean>;
-    discardChanges: <T_8 extends TType>(rowId: string, table: ReactTable<T_8>) => void;
+    saveChanges: <T_6 extends TType>(table: ReactTable<T_6>, rowId?: string | undefined) => Promise<boolean>;
+    discardChanges: <T_7 extends TType>(rowId: string, table: ReactTable<T_7>) => Promise<void>;
     hasSaved: () => boolean;
-    insertTemporaryRow: <T_9 extends TType>(data: Partial<T_9>) => string;
+    insertTemporaryRow: <T_8 extends TType>(data: Partial<T_8>, rowIndex: number) => string;
     temporaryRows: any;
 };
 export {};

package/dist/components/Table3/features/useTableEditing.d.ts

@@ -1,37 +1,37 @@
 import React from 'react';
 import { Table as ReactTable } from '@tanstack/react-table';
-import { Table3EditingChangeHandler, Table3EditingCreateHandler, Table3EditingSaveHandler, Table3EditingValidatorFn } from '../types';
-export declare function useTableEditing<TType = unknown>(isEnabled: boolean | undefined, handleSave: Table3EditingSaveHandler<TType> | undefined, handleChange: Table3EditingChangeHandler<TType> | undefined, handleCreate: Table3EditingCreateHandler<TType> | undefined, rowIdentityAccessor: keyof TType | undefined, validator: Table3EditingValidatorFn<TType> | undefined): {
-    setRowValue: <T extends TType>(rowId: string, original: T, value: Partial<T>) => Promise<void>;
+import { Table3EditingChangeHandler, Table3EditingCreateHandler, Table3EditingDiscardHandler, Table3EditingSaveHandler, Table3EditingValidatorFn } from '../types';
+export declare function useTableEditing<TType = unknown>(isEnabled: boolean | undefined, handleSave: Table3EditingSaveHandler<TType> | undefined, handleChange: Table3EditingChangeHandler<TType> | undefined, handleCreate: Table3EditingCreateHandler<TType> | undefined, handleDiscard: Table3EditingDiscardHandler | undefined, rowIdentityAccessor: keyof TType | undefined, validator: Table3EditingValidatorFn<TType> | undefined): {
     getRowValue: (rowId: string) => any;
     getRowMoveReason: (rowId: string) => unknown;
     hasRowErrors: (rowId: string) => boolean;
     hasRowErrorsShownInAlert: (rowId: string) => boolean;
-    hasTemporaryRowErrors: <T_1 extends TType>() => boolean;
+    hasTemporaryRowErrors: <T extends TType>() => boolean;
     getRowStatus: (rowId: string) => any;
     setRowStatus: (rowId: string, status: "saving" | "saved" | "errored" | undefined) => void;
-    setCellValue: <T_2 extends TType>(cell: import("@tanstack/react-table").Cell<T_2, unknown>, value: unknown) => void;
-    getCellValue: <T_3 extends TType>(cell: import("@tanstack/react-table").Cell<T_3, unknown>) => unknown;
-    getCellError: <T_4 extends TType>(cell: import("@tanstack/react-table").Cell<T_4, unknown>) => string | undefined;
-    onCellChanged: <T_5 extends TType>(cell: import("@tanstack/react-table").Cell<T_5, unknown>, rowIndex: number, nextValue: any, shouldRunUpdaters?: boolean) => Promise<void>;
-    getErrorsShownInAlert: <T_6 extends TType>() => {
+    setCellValue: <T_1 extends TType>(cell: import("@tanstack/react-table").Cell<T_1, unknown>, rowIndex: number, value: unknown) => void;
+    getCellValue: <T_2 extends TType>(cell: import("@tanstack/react-table").Cell<T_2, unknown>) => unknown;
+    getCellError: <T_3 extends TType>(cell: import("@tanstack/react-table").Cell<T_3, unknown>) => string | undefined;
+    onCellChanged: <T_4 extends TType>(cell: import("@tanstack/react-table").Cell<T_4, unknown>, rowIndex: number, nextValue: any, shouldRunUpdaters?: boolean) => Promise<void>;
+    getErrorsShownInAlert: <T_5 extends TType>() => {
         rowId: string;
-        changes: Partial<T_6>;
+        index: any;
+        changes: Partial<T_5>;
         errors: any;
     }[];
     hasChanges: (rowId?: string | undefined) => boolean;
-    saveChanges: <T_7 extends TType>(table: ReactTable<T_7>, rowId?: string | undefined) => Promise<boolean>;
-    discardChanges: <T_8 extends TType>(rowId: string, table: ReactTable<T_8>) => void;
+    saveChanges: <T_6 extends TType>(table: ReactTable<T_6>, rowId?: string | undefined) => Promise<boolean>;
+    discardChanges: <T_7 extends TType>(rowId: string, table: ReactTable<T_7>) => Promise<void>;
     hasSaved: () => boolean;
-    insertTemporaryRow: <T_9 extends TType>(data: Partial<T_9>) => string;
+    insertTemporaryRow: <T_8 extends TType>(data: Partial<T_8>, rowIndex: number) => string;
     temporaryRows: any;
     isEnabled: boolean;
     isEditing: boolean;
     isDetailedMode: boolean;
     toggleDetailedMode: React.Dispatch<React.SetStateAction<boolean>>;
-    toggleEditing: <T_10 extends TType>(enabled: React.SetStateAction<boolean>, table: ReactTable<T_10>, scrollToIndex: (index: number) => void, doSave?: boolean) => void;
+    toggleEditing: <T_9 extends TType>(enabled: React.SetStateAction<boolean>, table: ReactTable<T_9>, scrollToIndex: (index: number) => void, doSave?: boolean) => void;
     lastFocusedCellIndex: number | undefined;
     setLastFocusedCellIndex: React.Dispatch<React.SetStateAction<number | undefined>>;
-    createRow: <T_11 extends TType>(table: ReactTable<T_11>, scrollToIndex: (index: number) => void, row?: Partial<T_11> | undefined) => Promise<void>;
+    createRow: <T_10 extends TType>(table: ReactTable<T_10>, scrollToIndex: (index: number) => void, row?: Partial<T_10> | undefined) => Promise<void>;
     createRowButtonRef: React.RefObject<HTMLButtonElement>;
 };

package/dist/components/Table3/types.d.ts

@@ -7,6 +7,7 @@ export declare type Table3Ref = TableRef & {
 };
 export declare type Table3EditingChangeHandler<TType = unknown> = (accessor: string, value: unknown, row: TType, prevRow: TType) => Promise<Partial<TType>> | undefined;
 export declare type Table3EditingCreateHandler<TType = unknown> = () => Partial<TType>;
+export declare type Table3EditingDiscardHandler = () => Partial<void>;
 export declare type Table3EditingSaveHandler<TType = unknown> = (row: TType) => Promise<void>;
 export declare type Table3EditingValidatorFn<TType = unknown> = (row: TType) => Promise<Partial<Record<keyof TType, string>> | undefined> | Partial<Record<keyof TType, string>> | undefined;
 export interface Table3FeatureProps<TType = unknown> extends TableFeatureProps<TType> {
@@ -15,6 +16,7 @@ export interface Table3FeatureProps<TType = unknown> extends TableFeatureProps<T
 export interface Table3CommonProps<TType = unknown> extends Table3FeatureProps<TType> {
     onEditingChange?: Table3EditingChangeHandler<TType>;
     onEditingCreate?: Table3EditingCreateHandler<TType>;
+    onEditingDiscard?: Table3EditingDiscardHandler;
     validator?: Table3EditingValidatorFn<TType>;
 }
 export interface Table3WithoutEditingWithClientProps<TType = unknown> extends Table3CommonProps<TType>, TableClientProps<TType> {

package/dist/esm/packages/taco/src/charts/components/Donut/Legend.js

@@ -84,6 +84,7 @@ import '../../../components/Header/Header.js';
 import '../../../components/Layout/Layout.js';
 import '../../../components/Navigation2/components/Link.js';
 import '../../../components/Navigation2/Navigation2.js';
+import '../../../primitives/Table/useTableDataLoader2.js';
 import '../../../hooks/useBoundaryOverflowDetection.js';
 import '../../../utils/hooks/useOnClickOutside.js';
 

package/dist/esm/packages/taco/src/charts/components/Donut/Legend.js.map

@@ -1 +1 @@
-{"version":3,"file":"Legend.js","sources":["../../../../../../../../src/charts/components/Donut/Legend.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Button, Icon, OverflowGroup } from '../../../index';\n\nimport { getThemeColor } from '../../utils/color';\nimport { DonutChartProps, DonutChartSegmentProps, SegmentIds } from './DonutChart';\n\ntype LegendProps = Pick<DonutChartProps, 'formatter' | 'label' | 'legendPosition'> & {\n    data: DonutChartSegmentProps[];\n    hoveredItem: SegmentIds;\n    onClick: (entry: DonutChartSegmentProps | DonutChartSegmentProps[]) => void;\n    selectedItem: SegmentIds;\n    setHoveredItem: React.Dispatch<React.SetStateAction<SegmentIds>>;\n    total: number;\n    visibleItems: Record<string, boolean>;\n};\n\nexport const Legend = ({\n    legendPosition,\n    hoveredItem,\n    selectedItem,\n    data,\n    onClick,\n    setHoveredItem,\n    formatter,\n    total,\n    visibleItems,\n    label,\n}: LegendProps) => {\n    const isTotalLegendSelected = selectedItem.length === data.length;\n    const isTotalLegendHovered = hoveredItem.length === data.length;\n\n    const handleMouseLeave = () => setHoveredItem([]);\n\n    const renderLegendItem = (entry: DonutChartSegmentProps | null, index?: number) => {\n        const isTotal = entry === null;\n        // We can't use `isTotal` here because TypeScript is unable to infer the type when `entry` is not null.\n        const itemData = entry === null ? { id: 'total', label, value: total, color: 'grey-300' } : entry;\n        const isSelected = isTotal ? isTotalLegendSelected : selectedItem.includes(itemData.id);\n        const isHovered = isTotal ? isTotalLegendHovered : hoveredItem.includes(itemData.id);\n\n        return (\n            <li\n                key={isTotal ? 'total' : `${itemData.label}-${index}`}\n                className={cn('mr-2 flex cursor-pointer gap-2 rounded pl-0 pr-1', {\n                    'bg-grey-100': isHovered && (!isTotal || legendPosition === 'right'),\n                    'bg-grey-200': isSelected && (!isTotal || legendPosition === 'right'),\n                })}\n                onClick={() => onClick(isTotal ? data : itemData)}\n                onMouseEnter={() => setHoveredItem(isTotal ? data.map(item => item.id) : [itemData.id])}\n                onMouseLeave={handleMouseLeave}>\n                {legendPosition === 'bottom' ? (\n                    <div className=\"flex items-center gap-1\">\n                        <span\n                            className={cn('ml-1 h-3 w-3 rounded-sm', {\n                                'border-grey-300 border !bg-white': !visibleItems[itemData.id],\n                            })}\n                            style={{ backgroundColor: getThemeColor(itemData.color) }}>\n                            {visibleItems[itemData.id] && isHovered && (\n                                <Icon name=\"tick-bold\" className=\"mb-2.5 !h-full !w-full text-white\" />\n                            )}\n                        </span>\n                        <div>{itemData.label}</div>\n                    </div>\n                ) : (\n                    <>\n                        <span\n                            className=\"ml-1 mt-1 h-9 w-2 rounded-[1px]\"\n                            style={{ backgroundColor: getThemeColor(itemData.color) }}\n                        />\n                        <div>\n                            {itemData.label}\n                            <span className=\"-mt-1 flex w-full text-lg font-bold\">\n                                {formatter ? formatter(itemData.value) : itemData.value}\n                            </span>\n                        </div>\n                    </>\n                )}\n            </li>\n        );\n    };\n\n    const moreButton = moreButtonText => (\n        <Button appearance=\"transparent\" className=\"text-grey-700\">\n            {moreButtonText}\n        </Button>\n    );\n\n    const className = cn('flex-grow pl-4', {\n        'w-full': legendPosition === 'bottom',\n    });\n    return (\n        <div className={className}>\n            <ul\n                className={cn(\n                    'mb-0 ml-0 mt-4 flex justify-center space-y-1',\n                    legendPosition === 'right' ? 'flex-col gap-1' : 'flex-row'\n                )}>\n                {legendPosition === 'right' ? (\n                    <>\n                        {renderLegendItem(null)}\n                        {data.map(renderLegendItem)}\n                    </>\n                ) : (\n                    <OverflowGroup className=\"w-full items-center py-1\" moreButton={moreButton}>\n                        {data.map(renderLegendItem)}\n                    </OverflowGroup>\n                )}\n            </ul>\n        </div>\n    );\n};\n"],"names":["Legend","legendPosition","hoveredItem","selectedItem","data","onClick","setHoveredItem","formatter","total","visibleItems","label","isTotalLegendSelected","length","isTotalLegendHovered","handleMouseLeave","renderLegendItem","entry","index","isTotal","itemData","id","value","color","isSelected","includes","isHovered","React","key","className","cn","onMouseEnter","map","item","onMouseLeave","style","backgroundColor","getThemeColor","Icon","name","moreButton","moreButtonText","Button","appearance","OverflowGroup"],"mappings":"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"}
+{"version":3,"file":"Legend.js","sources":["../../../../../../../../src/charts/components/Donut/Legend.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Button, Icon, OverflowGroup } from '../../../index';\n\nimport { getThemeColor } from '../../utils/color';\nimport { DonutChartProps, DonutChartSegmentProps, SegmentIds } from './DonutChart';\n\ntype LegendProps = Pick<DonutChartProps, 'formatter' | 'label' | 'legendPosition'> & {\n    data: DonutChartSegmentProps[];\n    hoveredItem: SegmentIds;\n    onClick: (entry: DonutChartSegmentProps | DonutChartSegmentProps[]) => void;\n    selectedItem: SegmentIds;\n    setHoveredItem: React.Dispatch<React.SetStateAction<SegmentIds>>;\n    total: number;\n    visibleItems: Record<string, boolean>;\n};\n\nexport const Legend = ({\n    legendPosition,\n    hoveredItem,\n    selectedItem,\n    data,\n    onClick,\n    setHoveredItem,\n    formatter,\n    total,\n    visibleItems,\n    label,\n}: LegendProps) => {\n    const isTotalLegendSelected = selectedItem.length === data.length;\n    const isTotalLegendHovered = hoveredItem.length === data.length;\n\n    const handleMouseLeave = () => setHoveredItem([]);\n\n    const renderLegendItem = (entry: DonutChartSegmentProps | null, index?: number) => {\n        const isTotal = entry === null;\n        // We can't use `isTotal` here because TypeScript is unable to infer the type when `entry` is not null.\n        const itemData = entry === null ? { id: 'total', label, value: total, color: 'grey-300' } : entry;\n        const isSelected = isTotal ? isTotalLegendSelected : selectedItem.includes(itemData.id);\n        const isHovered = isTotal ? isTotalLegendHovered : hoveredItem.includes(itemData.id);\n\n        return (\n            <li\n                key={isTotal ? 'total' : `${itemData.label}-${index}`}\n                className={cn('mr-2 flex cursor-pointer gap-2 rounded pl-0 pr-1', {\n                    'bg-grey-100': isHovered && (!isTotal || legendPosition === 'right'),\n                    'bg-grey-200': isSelected && (!isTotal || legendPosition === 'right'),\n                })}\n                onClick={() => onClick(isTotal ? data : itemData)}\n                onMouseEnter={() => setHoveredItem(isTotal ? data.map(item => item.id) : [itemData.id])}\n                onMouseLeave={handleMouseLeave}>\n                {legendPosition === 'bottom' ? (\n                    <div className=\"flex items-center gap-1\">\n                        <span\n                            className={cn('ml-1 h-3 w-3 rounded-sm', {\n                                'border-grey-300 border !bg-white': !visibleItems[itemData.id],\n                            })}\n                            style={{ backgroundColor: getThemeColor(itemData.color) }}>\n                            {visibleItems[itemData.id] && isHovered && (\n                                <Icon name=\"tick-bold\" className=\"mb-2.5 !h-full !w-full text-white\" />\n                            )}\n                        </span>\n                        <div>{itemData.label}</div>\n                    </div>\n                ) : (\n                    <>\n                        <span\n                            className=\"ml-1 mt-1 h-9 w-2 rounded-[1px]\"\n                            style={{ backgroundColor: getThemeColor(itemData.color) }}\n                        />\n                        <div>\n                            {itemData.label}\n                            <span className=\"-mt-1 flex w-full text-lg font-bold\">\n                                {formatter ? formatter(itemData.value) : itemData.value}\n                            </span>\n                        </div>\n                    </>\n                )}\n            </li>\n        );\n    };\n\n    const moreButton = moreButtonText => (\n        <Button appearance=\"transparent\" className=\"text-grey-700\">\n            {moreButtonText}\n        </Button>\n    );\n\n    const className = cn('flex-grow pl-4', {\n        'w-full': legendPosition === 'bottom',\n    });\n    return (\n        <div className={className}>\n            <ul\n                className={cn(\n                    'mb-0 ml-0 mt-4 flex justify-center space-y-1',\n                    legendPosition === 'right' ? 'flex-col gap-1' : 'flex-row'\n                )}>\n                {legendPosition === 'right' ? (\n                    <>\n                        {renderLegendItem(null)}\n                        {data.map(renderLegendItem)}\n                    </>\n                ) : (\n                    <OverflowGroup className=\"w-full items-center py-1\" moreButton={moreButton}>\n                        {data.map(renderLegendItem)}\n                    </OverflowGroup>\n                )}\n            </ul>\n        </div>\n    );\n};\n"],"names":["Legend","legendPosition","hoveredItem","selectedItem","data","onClick","setHoveredItem","formatter","total","visibleItems","label","isTotalLegendSelected","length","isTotalLegendHovered","handleMouseLeave","renderLegendItem","entry","index","isTotal","itemData","id","value","color","isSelected","includes","isHovered","React","key","className","cn","onMouseEnter","map","item","onMouseLeave","style","backgroundColor","getThemeColor","Icon","name","moreButton","moreButtonText","Button","appearance","OverflowGroup"],"mappings":"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"}

package/dist/esm/packages/taco/src/charts/components/Legend.js

@@ -83,6 +83,7 @@ import '../../components/Header/Header.js';
 import '../../components/Layout/Layout.js';
 import '../../components/Navigation2/components/Link.js';
 import '../../components/Navigation2/Navigation2.js';
+import '../../primitives/Table/useTableDataLoader2.js';
 import '../../hooks/useBoundaryOverflowDetection.js';
 import '../../utils/hooks/useOnClickOutside.js';
 

package/dist/esm/packages/taco/src/charts/components/Legend.js.map

@@ -1 +1 @@
-{"version":3,"file":"Legend.js","sources":["../../../../../../../src/charts/components/Legend.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport cn from 'clsx';\nimport { Icon, OverflowGroup, Button } from '../../index';\n\nimport { ActiveChartItems, PayloadType } from './types';\n\ntype InternalProps<TType> = {\n    payload: PayloadType<TType>[];\n    layout: string;\n    activeIndex: number | undefined;\n};\n\nexport type LegendProps<TType> = {\n    activeItems: ActiveChartItems<TType>;\n    onMouseEnter: (entry: PayloadType<TType>, index: number) => void;\n    onMouseLeave: () => void;\n    onClick: (entry: PayloadType<TType>) => void;\n};\n\nexport type Props<TType> = LegendProps<TType> & InternalProps<TType>;\n\nexport function Legend<TType>(props: LegendProps<TType>) {\n    const { activeIndex, onMouseEnter, onMouseLeave, onClick, payload, layout, activeItems } = props as Props<TType>;\n    const [hoverIndex, setHoverIndex] = useState<number | null>(null);\n\n    const handleMouseEnter = (entry: PayloadType<TType>, index: number) => {\n        setHoverIndex(index);\n        if (activeItems[entry.dataKey]) onMouseEnter(entry, index);\n    };\n\n    const handleMouseLeave = () => {\n        onMouseLeave();\n        setHoverIndex(null);\n    };\n\n    const moreButton = moreButtonText => (\n        <Button appearance=\"transparent\" className=\"text-grey-700\">\n            {moreButtonText}\n        </Button>\n    );\n\n    return (\n        <div className=\"mx-auto w-auto max-w-full overflow-hidden\">\n            <div className={cn('mb-0 ml-0 flex justify-center', { 'flex-col': layout === 'vertical' })}>\n                {/** py-1 is need to make sure the more button focus outline doesn't get cropped */}\n                <OverflowGroup className=\"w-full items-center py-1\" moreButton={moreButton}>\n                    {payload.map((entry, index) => (\n                        <span\n                            key={`${entry.dataKey}-${index}`}\n                            className={cn(' hover:bg-grey-100 cursor-pointer px-[8px] py-[2px] hover:rounded-[4px]', {\n                                'bg-grey-100 rounded': activeIndex === index,\n                            })}\n                            onMouseEnter={() => handleMouseEnter(entry, index)}\n                            onMouseLeave={handleMouseLeave}\n                            onClick={onClick ? () => onClick(entry) : undefined}>\n                            <span className=\"text-grey-700 flex items-center gap-[4px]\">\n                                <span\n                                    className={cn('-mt-px ml-1 flex h-3 w-3 rounded-sm', {\n                                        'border-grey-300 border !bg-white': !activeItems[entry.dataKey],\n                                    })}\n                                    style={{ backgroundColor: entry.color }}>\n                                    {hoverIndex === index && activeItems[entry.dataKey] && (\n                                        <Icon name=\"tick-bold\" className=\"!h-full !w-full text-white\" />\n                                    )}\n                                </span>\n                                {entry.value}\n                            </span>\n                        </span>\n                    ))}\n                </OverflowGroup>\n            </div>\n        </div>\n    );\n}\n"],"names":["Legend","props","activeIndex","onMouseEnter","onMouseLeave","onClick","payload","layout","activeItems","hoverIndex","setHoverIndex","useState","handleMouseEnter","entry","index","dataKey","handleMouseLeave","moreButton","moreButtonText","React","Button","appearance","className","cn","OverflowGroup","map","key","undefined","style","backgroundColor","color","Icon","name","value"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAqBgBA,MAAMA,CAAQC,KAAyB;EACnD,MAAM;IAAEC,WAAW;IAAEC,YAAY;IAAEC,YAAY;IAAEC,OAAO;IAAEC,OAAO;IAAEC,MAAM;IAAEC;GAAa,GAAGP,KAAqB;EAChH,MAAM,CAACQ,UAAU,EAAEC,aAAa,CAAC,GAAGC,QAAQ,CAAgB,IAAI,CAAC;EAEjE,MAAMC,gBAAgB,GAAGA,CAACC,KAAyB,EAAEC,KAAa;IAC9DJ,aAAa,CAACI,KAAK,CAAC;IACpB,IAAIN,WAAW,CAACK,KAAK,CAACE,OAAO,CAAC,EAAEZ,YAAY,CAACU,KAAK,EAAEC,KAAK,CAAC;GAC7D;EAED,MAAME,gBAAgB,GAAGA;IACrBZ,YAAY,EAAE;IACdM,aAAa,CAAC,IAAI,CAAC;GACtB;EAED,MAAMO,UAAU,GAAGC,cAAc,kBAC7BC,6BAACC,MAAM;IAACC,UAAU,EAAC,aAAa;IAACC,SAAS,EAAC;KACtCJ,cAAc,CACV,CACZ;EAED,oBACIC;IAAKG,SAAS,EAAC;kBACXH;IAAKG,SAAS,EAAEC,EAAE,CAAC,+BAA+B,EAAE;MAAE,UAAU,EAAEhB,MAAM,KAAK;KAAY;kBAErFY,6BAACK,aAAa;IAACF,SAAS,EAAC,0BAA0B;IAACL,UAAU,EAAEA;KAC3DX,OAAO,CAACmB,GAAG,CAAC,CAACZ,KAAK,EAAEC,KAAK,mBACtBK;IACIO,GAAG,EAAE,GAAGb,KAAK,CAACE,OAAO,IAAID,KAAK,EAAE;IAChCQ,SAAS,EAAEC,EAAE,CAAC,yEAAyE,EAAE;MACrF,qBAAqB,EAAErB,WAAW,KAAKY;KAC1C,CAAC;IACFX,YAAY,EAAEA,MAAMS,gBAAgB,CAACC,KAAK,EAAEC,KAAK,CAAC;IAClDV,YAAY,EAAEY,gBAAgB;IAC9BX,OAAO,EAAEA,OAAO,GAAG,MAAMA,OAAO,CAACQ,KAAK,CAAC,GAAGc;kBAC1CR;IAAMG,SAAS,EAAC;kBACZH;IACIG,SAAS,EAAEC,EAAE,CAAC,qCAAqC,EAAE;MACjD,kCAAkC,EAAE,CAACf,WAAW,CAACK,KAAK,CAACE,OAAO;KACjE,CAAC;IACFa,KAAK,EAAE;MAAEC,eAAe,EAAEhB,KAAK,CAACiB;;KAC/BrB,UAAU,KAAKK,KAAK,IAAIN,WAAW,CAACK,KAAK,CAACE,OAAO,CAAC,kBAC/CI,6BAACY,IAAI;IAACC,IAAI,EAAC,WAAW;IAACV,SAAS,EAAC;IAA+B,CACnE,CACE,EACNT,KAAK,CAACoB,KAAK,CACT,CACJ,CACV,CAAC,CACU,CACd,CACJ;AAEd;;;;"}
+{"version":3,"file":"Legend.js","sources":["../../../../../../../src/charts/components/Legend.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport cn from 'clsx';\nimport { Icon, OverflowGroup, Button } from '../../index';\n\nimport { ActiveChartItems, PayloadType } from './types';\n\ntype InternalProps<TType> = {\n    payload: PayloadType<TType>[];\n    layout: string;\n    activeIndex: number | undefined;\n};\n\nexport type LegendProps<TType> = {\n    activeItems: ActiveChartItems<TType>;\n    onMouseEnter: (entry: PayloadType<TType>, index: number) => void;\n    onMouseLeave: () => void;\n    onClick: (entry: PayloadType<TType>) => void;\n};\n\nexport type Props<TType> = LegendProps<TType> & InternalProps<TType>;\n\nexport function Legend<TType>(props: LegendProps<TType>) {\n    const { activeIndex, onMouseEnter, onMouseLeave, onClick, payload, layout, activeItems } = props as Props<TType>;\n    const [hoverIndex, setHoverIndex] = useState<number | null>(null);\n\n    const handleMouseEnter = (entry: PayloadType<TType>, index: number) => {\n        setHoverIndex(index);\n        if (activeItems[entry.dataKey]) onMouseEnter(entry, index);\n    };\n\n    const handleMouseLeave = () => {\n        onMouseLeave();\n        setHoverIndex(null);\n    };\n\n    const moreButton = moreButtonText => (\n        <Button appearance=\"transparent\" className=\"text-grey-700\">\n            {moreButtonText}\n        </Button>\n    );\n\n    return (\n        <div className=\"mx-auto w-auto max-w-full overflow-hidden\">\n            <div className={cn('mb-0 ml-0 flex justify-center', { 'flex-col': layout === 'vertical' })}>\n                {/** py-1 is need to make sure the more button focus outline doesn't get cropped */}\n                <OverflowGroup className=\"w-full items-center py-1\" moreButton={moreButton}>\n                    {payload.map((entry, index) => (\n                        <span\n                            key={`${entry.dataKey}-${index}`}\n                            className={cn(' hover:bg-grey-100 cursor-pointer px-[8px] py-[2px] hover:rounded-[4px]', {\n                                'bg-grey-100 rounded': activeIndex === index,\n                            })}\n                            onMouseEnter={() => handleMouseEnter(entry, index)}\n                            onMouseLeave={handleMouseLeave}\n                            onClick={onClick ? () => onClick(entry) : undefined}>\n                            <span className=\"text-grey-700 flex items-center gap-[4px]\">\n                                <span\n                                    className={cn('-mt-px ml-1 flex h-3 w-3 rounded-sm', {\n                                        'border-grey-300 border !bg-white': !activeItems[entry.dataKey],\n                                    })}\n                                    style={{ backgroundColor: entry.color }}>\n                                    {hoverIndex === index && activeItems[entry.dataKey] && (\n                                        <Icon name=\"tick-bold\" className=\"!h-full !w-full text-white\" />\n                                    )}\n                                </span>\n                                {entry.value}\n                            </span>\n                        </span>\n                    ))}\n                </OverflowGroup>\n            </div>\n        </div>\n    );\n}\n"],"names":["Legend","props","activeIndex","onMouseEnter","onMouseLeave","onClick","payload","layout","activeItems","hoverIndex","setHoverIndex","useState","handleMouseEnter","entry","index","dataKey","handleMouseLeave","moreButton","moreButtonText","React","Button","appearance","className","cn","OverflowGroup","map","key","undefined","style","backgroundColor","color","Icon","name","value"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAqBgBA,MAAMA,CAAQC,KAAyB;EACnD,MAAM;IAAEC,WAAW;IAAEC,YAAY;IAAEC,YAAY;IAAEC,OAAO;IAAEC,OAAO;IAAEC,MAAM;IAAEC;GAAa,GAAGP,KAAqB;EAChH,MAAM,CAACQ,UAAU,EAAEC,aAAa,CAAC,GAAGC,QAAQ,CAAgB,IAAI,CAAC;EAEjE,MAAMC,gBAAgB,GAAGA,CAACC,KAAyB,EAAEC,KAAa;IAC9DJ,aAAa,CAACI,KAAK,CAAC;IACpB,IAAIN,WAAW,CAACK,KAAK,CAACE,OAAO,CAAC,EAAEZ,YAAY,CAACU,KAAK,EAAEC,KAAK,CAAC;GAC7D;EAED,MAAME,gBAAgB,GAAGA;IACrBZ,YAAY,EAAE;IACdM,aAAa,CAAC,IAAI,CAAC;GACtB;EAED,MAAMO,UAAU,GAAGC,cAAc,kBAC7BC,6BAACC,MAAM;IAACC,UAAU,EAAC,aAAa;IAACC,SAAS,EAAC;KACtCJ,cAAc,CACV,CACZ;EAED,oBACIC;IAAKG,SAAS,EAAC;kBACXH;IAAKG,SAAS,EAAEC,EAAE,CAAC,+BAA+B,EAAE;MAAE,UAAU,EAAEhB,MAAM,KAAK;KAAY;kBAErFY,6BAACK,aAAa;IAACF,SAAS,EAAC,0BAA0B;IAACL,UAAU,EAAEA;KAC3DX,OAAO,CAACmB,GAAG,CAAC,CAACZ,KAAK,EAAEC,KAAK,mBACtBK;IACIO,GAAG,EAAE,GAAGb,KAAK,CAACE,OAAO,IAAID,KAAK,EAAE;IAChCQ,SAAS,EAAEC,EAAE,CAAC,yEAAyE,EAAE;MACrF,qBAAqB,EAAErB,WAAW,KAAKY;KAC1C,CAAC;IACFX,YAAY,EAAEA,MAAMS,gBAAgB,CAACC,KAAK,EAAEC,KAAK,CAAC;IAClDV,YAAY,EAAEY,gBAAgB;IAC9BX,OAAO,EAAEA,OAAO,GAAG,MAAMA,OAAO,CAACQ,KAAK,CAAC,GAAGc;kBAC1CR;IAAMG,SAAS,EAAC;kBACZH;IACIG,SAAS,EAAEC,EAAE,CAAC,qCAAqC,EAAE;MACjD,kCAAkC,EAAE,CAACf,WAAW,CAACK,KAAK,CAACE,OAAO;KACjE,CAAC;IACFa,KAAK,EAAE;MAAEC,eAAe,EAAEhB,KAAK,CAACiB;;KAC/BrB,UAAU,KAAKK,KAAK,IAAIN,WAAW,CAACK,KAAK,CAACE,OAAO,CAAC,kBAC/CI,6BAACY,IAAI;IAACC,IAAI,EAAC,WAAW;IAACV,SAAS,EAAC;IAA+B,CACnE,CACE,EACNT,KAAK,CAACoB,KAAK,CACT,CACJ,CACV,CAAC,CACU,CACd,CACJ;AAEd;;;;"}

package/dist/esm/packages/taco/src/components/SearchInput2/SearchInput2.js

@@ -21,6 +21,7 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
     onClickFindPrevious: handleClickFindPrevious,
     settingsContent,
     shortcut,
+    showTotal = true,
     value,
     ...attributes
   } = props;
@@ -99,10 +100,12 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
     }
     if (hasFind && isActive) {
       postfix = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
-        className: "text-grey-700 flex h-4 items-center border-r border-black/[0.25] pr-2"
-      }, loading ? /*#__PURE__*/React__default.createElement(Spinner, {
+        className: "text-grey-700 flex h-4 items-center"
+      }, loading ? (/*#__PURE__*/React__default.createElement(Spinner, {
         className: "h-4 w-4"
-      }) : `${findCurrent !== null && findCurrent !== void 0 ? findCurrent : 0}/${findTotal !== null && findTotal !== void 0 ? findTotal : 0}`), findCurrent ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IconButton, {
+      })) : showTotal ? (/*#__PURE__*/React__default.createElement("span", {
+        className: "border-r border-black/[0.25] pr-2"
+      }, `${findCurrent !== null && findCurrent !== void 0 ? findCurrent : 0}/${findTotal !== null && findTotal !== void 0 ? findTotal : 0}`)) : null), findCurrent ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IconButton, {
         "aria-label": texts.searchInput.findPrevious,
         className: "scale-75 !bg-transparent hover:!bg-black/[0.08] [&>svg]:scale-125",
         icon: "chevron-up",

package/dist/esm/packages/taco/src/components/SearchInput2/SearchInput2.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput2.js","sources":["../../../../../../../src/components/SearchInput2/SearchInput2.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { useGlobalKeyDown } from '../../hooks/useGlobalKeyDown';\nimport { useLocalization } from '../Provider/Localization';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Input } from '../Input/Input';\nimport { Shortcut } from '../Shortcut/Shortcut';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { KeyDownHandlerOptions } from '../../utils/keyboard';\nimport { Spinner } from '../Spinner/Spinner';\nimport { Icon } from '../Icon/Icon';\n\ninterface CommonSearchInput2Props\n    extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'onChange' | 'value'> {\n    loading?: boolean;\n    onChange: (value: string) => void;\n    onClear?: () => void;\n    settingsContent?: JSX.Element;\n    shortcut?: string | KeyDownHandlerOptions;\n    value?: string;\n}\n\ninterface BasicSearchInput2Props extends CommonSearchInput2Props {\n    findCurrent?: never;\n    findTotal?: never;\n    onClickFindNext?: never;\n    onClickFindPrevious?: never;\n}\n\ninterface ComplexSearchInput2Props extends CommonSearchInput2Props {\n    findCurrent: number | null;\n    findTotal: number | null;\n    onClickFindNext: () => void;\n    onClickFindPrevious: () => void;\n}\n\nexport type SearchInput2Props = BasicSearchInput2Props | ComplexSearchInput2Props;\n\nexport const SearchInput2 = React.forwardRef(function SearchInput2(props: SearchInput2Props, ref: React.Ref<HTMLInputElement>) {\n    const {\n        findCurrent,\n        findTotal,\n        loading = false,\n        onChange: handleChange,\n        onClear,\n        onClickFindNext: handleClickFindNext,\n        onClickFindPrevious: handleClickFindPrevious,\n        settingsContent,\n        shortcut,\n        value,\n        ...attributes\n    } = props;\n    const internalRef = useMergedRef<HTMLInputElement>(ref);\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const [focused, setFocused] = React.useState(false);\n    const { texts } = useLocalization();\n    const isActive = value?.length;\n    const hasFind =\n        handleClickFindNext !== undefined &&\n        handleClickFindPrevious !== undefined &&\n        findCurrent !== undefined &&\n        findTotal !== undefined;\n\n    useGlobalKeyDown(shortcut, (event: KeyboardEvent) => {\n        if (document.activeElement !== internalRef.current) {\n            event.preventDefault();\n            internalRef.current?.focus();\n        }\n    });\n\n    const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n        if (\n            containerRef.current &&\n            (containerRef.current === event.relatedTarget || containerRef.current?.contains(event.relatedTarget))\n        ) {\n            return;\n        }\n\n        setFocused(false);\n        attributes.onBlur?.(event);\n    };\n\n    const handleClear = () => {\n        requestAnimationFrame(() => internalRef.current?.blur());\n        handleChange('');\n        onClear?.();\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        setFocused(true);\n        attributes.onFocus?.(event);\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        props.onKeyDown?.(event);\n\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n\n        if (event.key === 'Enter') {\n            event.preventDefault();\n\n            if (hasFind && isActive) {\n                if (event.shiftKey) {\n                    handleClickFindPrevious?.();\n                } else {\n                    handleClickFindNext?.();\n                }\n            }\n\n            return;\n        }\n\n        if (event.key === 'Escape') {\n            handleClear();\n            event.stopPropagation();\n            return;\n        }\n    };\n\n    let postfix;\n\n    if (!attributes.disabled && !attributes.readOnly && (value || focused)) {\n        if (value) {\n            postfix = (\n                <IconButton\n                    aria-label={texts.searchInput.clear}\n                    className=\"scale-75 !bg-transparent hover:!bg-black/[0.08] [&>svg]:scale-125\"\n                    icon=\"close\"\n                    onMouseDown={handleClear}\n                    tabIndex={-1}\n                    tooltip={\n                        focused ? (\n                            <>\n                                {texts.searchInput.clear} <Shortcut keys=\"Escape\" />\n                            </>\n                        ) : (\n                            texts.searchInput.clear\n                        )\n                    }\n                />\n            );\n        }\n\n        if (hasFind && isActive) {\n            postfix = (\n                <>\n                    <span className=\"text-grey-700 flex h-4 items-center border-r border-black/[0.25] pr-2\">\n                        {loading ? <Spinner className=\"h-4 w-4\" /> : `${findCurrent ?? 0}/${findTotal ?? 0}`}\n                    </span>\n                    {findCurrent ? (\n                        <>\n                            <IconButton\n                                aria-label={texts.searchInput.findPrevious}\n                                className=\"scale-75 !bg-transparent hover:!bg-black/[0.08] [&>svg]:scale-125\"\n                                icon=\"chevron-up\"\n                                onMouseDown={handleClickFindPrevious}\n                                tabIndex={-1}\n                                tooltip={\n                                    focused ? (\n                                        <>\n                                            {texts.searchInput.findPrevious} <Shortcut keys={{ shift: true, key: 'Enter' }} />\n                                        </>\n                                    ) : (\n                                        texts.searchInput.findPrevious\n                                    )\n                                }\n                            />\n                            <IconButton\n                                aria-label={texts.searchInput.findNext}\n                                className=\"scale-75 !bg-transparent hover:!bg-black/[0.08] [&>svg]:scale-125\"\n                                icon=\"chevron-down\"\n                                onMouseDown={handleClickFindNext}\n                                tabIndex={-1}\n                                tooltip={\n                                    focused ? (\n                                        <>\n                                            {texts.searchInput.findNext} <Shortcut keys=\"Enter\" />\n                                        </>\n                                    ) : (\n                                        texts.searchInput.findNext\n                                    )\n                                }\n                            />\n                        </>\n                    ) : null}\n                    {postfix}\n                </>\n            );\n        }\n    } else if (shortcut && !focused && !value) {\n        postfix = <Shortcut keys={shortcut} onClickCapture={() => internalRef.current?.focus()} />;\n    }\n\n    const className = cn(\n        '!pl-7 group-focus-within:!w-72 group-focus-within:yt-focus',\n        hasFind\n            ? {\n                  '!w-48': !value,\n                  '!w-72': value,\n              }\n            : '!w-48',\n        {\n            '!wcag-blue-100': isActive,\n        },\n        props.className\n    );\n\n    const icon = (\n        <Icon\n            aria-label={texts.searchInput.button}\n            className=\"-ml-0.5 scale-95\"\n            name=\"search\"\n            onClickCapture={() => internalRef.current?.focus()}\n        />\n    );\n\n    const input = (\n        <Input\n            {...attributes}\n            aria-label={attributes['aria-label'] ?? texts.searchInput.placeholder}\n            className={className}\n            data-taco=\"search-input2\"\n            onBlur={handleBlur}\n            onChange={event => handleChange(event.target.value)}\n            onFocus={handleFocus}\n            onKeyDown={handleKeyDown}\n            placeholder={attributes.placeholder ?? texts.searchInput.placeholder}\n            prefix={icon}\n            postfix={postfix}\n            ref={internalRef}\n            value={value ?? ''}\n        />\n    );\n\n    if (settingsContent) {\n        const settingsClassname = cn(\n            'border-grey-300 absolute left-0 right-0 -mt-0.5 hidden top-full group-focus-within:flex focus-within:flex flex-col gap-y-4 rounded-b border border-t-0 bg-white p-3 shadow !pt-[calc(theme(spacing.3)_+_theme(spacing[0.5]))]'\n        );\n\n        return (\n            <div\n                className={cn('group relative', { 'z-10 [&_[data-taco=input-container]]:z-10': focused })}\n                ref={containerRef}\n                // create a new stacking context so our internal z-indexes don't effect external components\n                // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n                style={{ opacity: 0.999 }}>\n                {input}\n                <div\n                    // We need to trigger blur when settings got blured as well, because settings is a part of SearchInput2 component\n                    onBlur={handleBlur}\n                    className={settingsClassname}\n                    onClickCapture={() => internalRef.current?.focus()}\n                    // tab index is important, it lets the element show as a relatedTarget on event handlers\n                    tabIndex={-1}>\n                    {settingsContent}\n                </div>\n            </div>\n        );\n    }\n\n    return input;\n});\n"],"names":["SearchInput2","React","forwardRef","props","ref","findCurrent","findTotal","loading","onChange","handleChange","onClear","onClickFindNext","handleClickFindNext","onClickFindPrevious","handleClickFindPrevious","settingsContent","shortcut","value","attributes","internalRef","useMergedRef","containerRef","useRef","focused","setFocused","useState","texts","useLocalization","isActive","length","hasFind","undefined","useGlobalKeyDown","event","document","activeElement","current","_internalRef$current","preventDefault","focus","handleBlur","relatedTarget","_containerRef$current","contains","_attributes$onBlur","onBlur","call","handleClear","requestAnimationFrame","_internalRef$current2","blur","handleFocus","_attributes$onFocus","onFocus","handleKeyDown","_props$onKeyDown","onKeyDown","isDefaultPrevented","key","shiftKey","stopPropagation","postfix","disabled","readOnly","IconButton","searchInput","clear","className","icon","onMouseDown","tabIndex","tooltip","Shortcut","keys","Spinner","findPrevious","shift","findNext","onClickCapture","_internalRef$current3","cn","Icon","button","name","_internalRef$current4","input","Input","_attributes$ariaLabe","placeholder","target","_attributes$placehold","prefix","settingsClassname","style","opacity","_internalRef$current5"],"mappings":"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"}
+{"version":3,"file":"SearchInput2.js","sources":["../../../../../../../src/components/SearchInput2/SearchInput2.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { useGlobalKeyDown } from '../../hooks/useGlobalKeyDown';\nimport { useLocalization } from '../Provider/Localization';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Input } from '../Input/Input';\nimport { Shortcut } from '../Shortcut/Shortcut';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { KeyDownHandlerOptions } from '../../utils/keyboard';\nimport { Spinner } from '../Spinner/Spinner';\nimport { Icon } from '../Icon/Icon';\n\ninterface CommonSearchInput2Props\n    extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'onChange' | 'value'> {\n    loading?: boolean;\n    onChange: (value: string) => void;\n    onClear?: () => void;\n    settingsContent?: JSX.Element;\n    shortcut?: string | KeyDownHandlerOptions;\n    value?: string;\n}\n\ninterface BasicSearchInput2Props extends CommonSearchInput2Props {\n    findCurrent?: never;\n    findTotal?: never;\n    onClickFindNext?: never;\n    onClickFindPrevious?: never;\n    showTotal?: never;\n}\n\ninterface ComplexSearchInput2Props extends CommonSearchInput2Props {\n    findCurrent: number | null;\n    findTotal: number | null;\n    onClickFindNext: () => void;\n    onClickFindPrevious: () => void;\n    showTotal?: boolean;\n}\n\nexport type SearchInput2Props = BasicSearchInput2Props | ComplexSearchInput2Props;\n\nexport const SearchInput2 = React.forwardRef(function SearchInput2(props: SearchInput2Props, ref: React.Ref<HTMLInputElement>) {\n    const {\n        findCurrent,\n        findTotal,\n        loading = false,\n        onChange: handleChange,\n        onClear,\n        onClickFindNext: handleClickFindNext,\n        onClickFindPrevious: handleClickFindPrevious,\n        settingsContent,\n        shortcut,\n        showTotal = true,\n        value,\n        ...attributes\n    } = props;\n    const internalRef = useMergedRef<HTMLInputElement>(ref);\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const [focused, setFocused] = React.useState(false);\n    const { texts } = useLocalization();\n    const isActive = value?.length;\n    const hasFind =\n        handleClickFindNext !== undefined &&\n        handleClickFindPrevious !== undefined &&\n        findCurrent !== undefined &&\n        findTotal !== undefined;\n\n    useGlobalKeyDown(shortcut, (event: KeyboardEvent) => {\n        if (document.activeElement !== internalRef.current) {\n            event.preventDefault();\n            internalRef.current?.focus();\n        }\n    });\n\n    const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n        if (\n            containerRef.current &&\n            (containerRef.current === event.relatedTarget || containerRef.current?.contains(event.relatedTarget))\n        ) {\n            return;\n        }\n\n        setFocused(false);\n        attributes.onBlur?.(event);\n    };\n\n    const handleClear = () => {\n        requestAnimationFrame(() => internalRef.current?.blur());\n        handleChange('');\n        onClear?.();\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        setFocused(true);\n        attributes.onFocus?.(event);\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        props.onKeyDown?.(event);\n\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n\n        if (event.key === 'Enter') {\n            event.preventDefault();\n\n            if (hasFind && isActive) {\n                if (event.shiftKey) {\n                    handleClickFindPrevious?.();\n                } else {\n                    handleClickFindNext?.();\n                }\n            }\n\n            return;\n        }\n\n        if (event.key === 'Escape') {\n            handleClear();\n            event.stopPropagation();\n            return;\n        }\n    };\n\n    let postfix;\n\n    if (!attributes.disabled && !attributes.readOnly && (value || focused)) {\n        if (value) {\n            postfix = (\n                <IconButton\n                    aria-label={texts.searchInput.clear}\n                    className=\"scale-75 !bg-transparent hover:!bg-black/[0.08] [&>svg]:scale-125\"\n                    icon=\"close\"\n                    onMouseDown={handleClear}\n                    tabIndex={-1}\n                    tooltip={\n                        focused ? (\n                            <>\n                                {texts.searchInput.clear} <Shortcut keys=\"Escape\" />\n                            </>\n                        ) : (\n                            texts.searchInput.clear\n                        )\n                    }\n                />\n            );\n        }\n\n        if (hasFind && isActive) {\n            postfix = (\n                <>\n                    <span className=\"text-grey-700 flex h-4 items-center\">\n                        {loading ? (\n                            <Spinner className=\"h-4 w-4\" />\n                        ) : showTotal ? (\n                            <span className=\"border-r border-black/[0.25] pr-2\">{`${findCurrent ?? 0}/${findTotal ?? 0}`}</span>\n                        ) : null}\n                    </span>\n                    {findCurrent ? (\n                        <>\n                            <IconButton\n                                aria-label={texts.searchInput.findPrevious}\n                                className=\"scale-75 !bg-transparent hover:!bg-black/[0.08] [&>svg]:scale-125\"\n                                icon=\"chevron-up\"\n                                onMouseDown={handleClickFindPrevious}\n                                tabIndex={-1}\n                                tooltip={\n                                    focused ? (\n                                        <>\n                                            {texts.searchInput.findPrevious} <Shortcut keys={{ shift: true, key: 'Enter' }} />\n                                        </>\n                                    ) : (\n                                        texts.searchInput.findPrevious\n                                    )\n                                }\n                            />\n                            <IconButton\n                                aria-label={texts.searchInput.findNext}\n                                className=\"scale-75 !bg-transparent hover:!bg-black/[0.08] [&>svg]:scale-125\"\n                                icon=\"chevron-down\"\n                                onMouseDown={handleClickFindNext}\n                                tabIndex={-1}\n                                tooltip={\n                                    focused ? (\n                                        <>\n                                            {texts.searchInput.findNext} <Shortcut keys=\"Enter\" />\n                                        </>\n                                    ) : (\n                                        texts.searchInput.findNext\n                                    )\n                                }\n                            />\n                        </>\n                    ) : null}\n                    {postfix}\n                </>\n            );\n        }\n    } else if (shortcut && !focused && !value) {\n        postfix = <Shortcut keys={shortcut} onClickCapture={() => internalRef.current?.focus()} />;\n    }\n\n    const className = cn(\n        '!pl-7 group-focus-within:!w-72 group-focus-within:yt-focus',\n        hasFind\n            ? {\n                  '!w-48': !value,\n                  '!w-72': value,\n              }\n            : '!w-48',\n        {\n            '!wcag-blue-100': isActive,\n        },\n        props.className\n    );\n\n    const icon = (\n        <Icon\n            aria-label={texts.searchInput.button}\n            className=\"-ml-0.5 scale-95\"\n            name=\"search\"\n            onClickCapture={() => internalRef.current?.focus()}\n        />\n    );\n\n    const input = (\n        <Input\n            {...attributes}\n            aria-label={attributes['aria-label'] ?? texts.searchInput.placeholder}\n            className={className}\n            data-taco=\"search-input2\"\n            onBlur={handleBlur}\n            onChange={event => handleChange(event.target.value)}\n            onFocus={handleFocus}\n            onKeyDown={handleKeyDown}\n            placeholder={attributes.placeholder ?? texts.searchInput.placeholder}\n            prefix={icon}\n            postfix={postfix}\n            ref={internalRef}\n            value={value ?? ''}\n        />\n    );\n\n    if (settingsContent) {\n        const settingsClassname = cn(\n            'border-grey-300 absolute left-0 right-0 -mt-0.5 hidden top-full group-focus-within:flex focus-within:flex flex-col gap-y-4 rounded-b border border-t-0 bg-white p-3 shadow !pt-[calc(theme(spacing.3)_+_theme(spacing[0.5]))]'\n        );\n\n        return (\n            <div\n                className={cn('group relative', { 'z-10 [&_[data-taco=input-container]]:z-10': focused })}\n                ref={containerRef}\n                // create a new stacking context so our internal z-indexes don't effect external components\n                // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n                style={{ opacity: 0.999 }}>\n                {input}\n                <div\n                    // We need to trigger blur when settings got blured as well, because settings is a part of SearchInput2 component\n                    onBlur={handleBlur}\n                    className={settingsClassname}\n                    onClickCapture={() => internalRef.current?.focus()}\n                    // tab index is important, it lets the element show as a relatedTarget on event handlers\n                    tabIndex={-1}>\n                    {settingsContent}\n                </div>\n            </div>\n        );\n    }\n\n    return input;\n});\n"],"names":["SearchInput2","React","forwardRef","props","ref","findCurrent","findTotal","loading","onChange","handleChange","onClear","onClickFindNext","handleClickFindNext","onClickFindPrevious","handleClickFindPrevious","settingsContent","shortcut","showTotal","value","attributes","internalRef","useMergedRef","containerRef","useRef","focused","setFocused","useState","texts","useLocalization","isActive","length","hasFind","undefined","useGlobalKeyDown","event","document","activeElement","current","_internalRef$current","preventDefault","focus","handleBlur","relatedTarget","_containerRef$current","contains","_attributes$onBlur","onBlur","call","handleClear","requestAnimationFrame","_internalRef$current2","blur","handleFocus","_attributes$onFocus","onFocus","handleKeyDown","_props$onKeyDown","onKeyDown","isDefaultPrevented","key","shiftKey","stopPropagation","postfix","disabled","readOnly","IconButton","searchInput","clear","className","icon","onMouseDown","tabIndex","tooltip","Shortcut","keys","Spinner","findPrevious","shift","findNext","onClickCapture","_internalRef$current3","cn","Icon","button","name","_internalRef$current4","input","Input","_attributes$ariaLabe","placeholder","target","_attributes$placehold","prefix","settingsClassname","style","opacity","_internalRef$current5"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table/hooks/plugins/useRowActions.js

@@ -1,8 +1,8 @@
 import React__default from 'react';
 import { IconButton } from '../../../IconButton/IconButton.js';
 import { Menu } from '../../../Menu/Menu.js';
-import { InView } from 'react-intersection-observer';
 import { sanitizeRowProps } from '../../util.js';
+import { InView } from 'react-intersection-observer';
 
 const actionGroupClassName = '-mt-1 -mb-1 h-8 flex';
 const hasActions = (inlineEditingUniqueId, handlers, actions) => {

package/dist/esm/packages/taco/src/components/Table3/components/Columns/Cell/EditingControlCell.js

@@ -41,7 +41,7 @@ function EditingControlCell(props) {
   }, [cellRef.current]);
   const handleChange = React__default.useCallback(nextValue => {
     if (nextValue !== value) {
-      tableMeta.editing.setCellValue(cell, nextValue);
+      tableMeta.editing.setCellValue(cell, rowIndex, nextValue);
       if (hasNonTextControl) {
         requestAnimationFrame(() => tableMeta.editing.onCellChanged(cell, rowIndex, nextValue));
       }

package/dist/esm/packages/taco/src/components/Table3/components/Columns/Cell/EditingControlCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditingControlCell.js","sources":["../../../../../../../../../../src/components/Table3/components/Columns/Cell/EditingControlCell.tsx"],"sourcesContent":["import React from 'react';\nimport { TableMeta as ReactTableMeta, ColumnMeta as ReactTableColumnMeta } from '@tanstack/react-table';\nimport { isDate } from 'date-fns';\nimport { Datepicker } from '../../../../Datepicker/Datepicker';\nimport { Switch } from '../../../../Switch/Switch';\nimport { Input } from '../../../../Input/Input';\nimport { TableColumnDataType, TableColumnRendererControl, TableFontSize } from '../../../../../primitives/Table/types';\nimport * as date from '../../../../../utils/date';\nimport { RowMoveIndicator } from './Editing/RowMoveIndicator';\nimport { TextareaWithAutosizing } from './Editing/TextareaWithAutosizing';\nimport { Field } from '../../../../Field/Field';\nimport { isElementInsideOrTriggeredFromContainer } from '../../../../../utils/dom';\nimport { TableCellRendererProps } from '../../../../../primitives/Table/Core/types';\nimport { RowContext } from '../../../../../primitives/Table/Core/components/Row/RowContext';\nimport { getCellAttributes } from '../../../../../primitives/Table/Core/components/Columns/Cell/util';\nimport { useEditingCellAutofocus } from './util';\nimport { isPressingMetaKey } from '../../../../../utils/keyboard';\nimport { Checkbox } from '../../../../Checkbox/Checkbox';\n\nexport function EditingControlCell<TType = unknown>(props: TableCellRendererProps<TType>) {\n    const { cell, cellRef, isHighlighted, index } = props;\n    const { rowIndex } = React.useContext(RowContext);\n    const { table } = cell.getContext();\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const columnMeta = cell.column.columnDef.meta as ReactTableColumnMeta<TType, unknown>;\n    const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;\n    const type = columnMeta.control ?? 'input';\n    const handleFocus = useEditingCellAutofocus<TType>(props);\n    const value = cell.getValue();\n\n    // some controls, like select2, should trigger cell changed (validation, updates) as the value changes\n    const hasNonTextControl = React.useMemo(() => {\n        return (\n            typeof type === 'function' &&\n            !!cellRef.current?.querySelector('[data-taco=\"Select2\"],[data-taco=\"switch\"],[data-taco=\"checkbox\"]')\n        );\n    }, [cellRef.current]);\n\n    const handleChange = React.useCallback(\n        (nextValue: unknown) => {\n            if (nextValue !== value) {\n                tableMeta.editing.setCellValue(cell, nextValue);\n\n                if (hasNonTextControl) {\n                    requestAnimationFrame(() => tableMeta.editing.onCellChanged(cell, rowIndex, nextValue));\n                }\n            }\n        },\n        [hasNonTextControl, cell.row.id, cell.column.id, cell.row.original, rowIndex, value]\n    );\n\n    const blur = React.useCallback(\n        function blur() {\n            tableMeta.editing.toggleDetailedMode(false);\n            tableMeta.editing.onCellChanged(cell, rowIndex, undefined, !hasNonTextControl);\n        },\n        [hasNonTextControl, cell.row.id, cell.column.id, cell.row.original, rowIndex]\n    );\n\n    const handleBlur = React.useCallback(\n        (event: React.FocusEvent) => {\n            if (isElementInsideOrTriggeredFromContainer(event.relatedTarget, event.currentTarget)) {\n                return;\n            }\n            blur();\n        },\n        [blur]\n    );\n\n    // ensure that blur runs when the cell gets unmounted (when vertically arrow key navigating)\n    React.useEffect(() => {\n        const ref = cellRef.current;\n\n        return () => {\n            if (document.activeElement === ref || isElementInsideOrTriggeredFromContainer(document.activeElement, ref)) {\n                blur();\n            }\n        };\n    }, []);\n\n    const error = tableMeta.editing.getCellError<TType>(cell);\n\n    const controlProps = {\n        dataType: columnMeta.dataType,\n        fontSize: tableMeta.fontSize.size,\n        id: cell.column.id,\n        invalid: !!error,\n        isDetailedMode: tableMeta.editing.isDetailedMode,\n        isTruncated: !!columnMeta.enableTruncate,\n        onBlur: handleBlur,\n        onChange: handleChange,\n        row: cell.row.original,\n        rowPendingChanges: tableMeta.editing.getRowValue(cell.row.id),\n        tabIndex: isActiveRow ? 0 : -1,\n        toggleDetailedMode: tableMeta.editing.toggleDetailedMode,\n        type,\n        value,\n    };\n\n    const cellAttributes = {\n        ...getCellAttributes(cell, index, isHighlighted),\n        'data-cell-editing-invalid': error ? true : undefined,\n        'data-taco': 'cell-control',\n        onFocus: handleFocus,\n        ref: cellRef,\n        tabIndex: -1,\n    };\n\n    return (\n        <td {...cellAttributes}>\n            <Field invalid={!!error} message={error}>\n                <MemoedEditingCell<TType> {...controlProps} />\n            </Field>\n            {\n                // we show row move indicator here within the cell rather than the row because it is\n                // an editing only feature, and we don't want to leak editing into the shared row component\n            }\n            <RowMoveIndicator cell={cell} cellRef={cellRef} isActiveRow={isActiveRow} />\n        </td>\n    );\n}\n\ntype MemoedEditingCellProps<TType = unknown, TValue = unknown> = {\n    dataType?: TableColumnDataType;\n    fontSize: TableFontSize;\n    id: string;\n    invalid: boolean;\n    isDetailedMode: boolean;\n    isTruncated: boolean;\n    onBlur: (event: React.FocusEvent) => void;\n    onChange: (value: TValue) => void;\n    row: TType;\n    rowPendingChanges: Partial<TType> | undefined;\n    tabIndex?: number;\n    toggleDetailedMode: (detailed: React.SetStateAction<boolean>) => void;\n    type: TableColumnRendererControl<TType>;\n    value: TValue;\n};\n\nconst MemoedEditingCell = React.memo(function MemoedEditingCell<TType = unknown>(props: MemoedEditingCellProps<TType>) {\n    const {\n        dataType,\n        fontSize,\n        id,\n        invalid,\n        isDetailedMode,\n        isTruncated,\n        onBlur,\n        onChange,\n        row,\n        rowPendingChanges,\n        tabIndex = -1,\n        toggleDetailedMode,\n        type = 'input',\n        value,\n    } = props;\n    const controlRef = React.useRef<HTMLElement>(null);\n    const currentValue = row[id];\n    const commonProps = {\n        onBlur,\n        ref: controlRef,\n        tabIndex,\n    };\n\n    if (typeof type === 'function') {\n        const controlFnProps = {\n            ...commonProps,\n            invalid,\n            setValue: onChange,\n            value,\n        };\n\n        return type(controlFnProps, { ...row, ...rowPendingChanges });\n    }\n\n    if (type === 'switch') {\n        return (\n            <Switch\n                {...commonProps}\n                checked={Boolean(value)}\n                onChange={onChange}\n                ref={controlRef as React.RefObject<HTMLButtonElement>}\n            />\n        );\n    }\n\n    if (type === 'checkbox') {\n        return (\n            <Checkbox\n                {...commonProps}\n                checked={Boolean(value)}\n                onChange={onChange}\n                ref={controlRef as React.RefObject<HTMLButtonElement>}\n            />\n        );\n    }\n\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        const target = event.target as HTMLInputElement | HTMLTextAreaElement;\n\n        if (target.readOnly) {\n            return;\n        }\n\n        // prevent active row navigation while in detailed mode\n        if (\n            isDetailedMode &&\n            (event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'ArrowLeft' || event.key === 'ArrowRight')\n        ) {\n            event.stopPropagation();\n        }\n\n        // enter or exit detail mode when pressing enter\n        if (event.key === 'Enter') {\n            // textareas support shift and enter, don't prevent default in that case\n            if (event.shiftKey && isDetailedMode) {\n                return;\n            }\n\n            event.preventDefault();\n\n            if (isDetailedMode) {\n                target.select?.();\n            } else {\n                target.setSelectionRange?.(target.value?.length, target.value?.length);\n            }\n\n            toggleDetailedMode(editing => !editing);\n            return;\n        }\n\n        // reset the value, or exit edit mode when pressing escape\n        if (event.key === 'Escape') {\n            if (isDetailedMode) {\n                event.preventDefault();\n                toggleDetailedMode(false);\n\n                if (value !== currentValue) {\n                    props.onChange(currentValue);\n                }\n\n                // have to let onChange run before selecting, otherwise the value changes\n                requestAnimationFrame(() => target.select?.());\n            }\n\n            return;\n        }\n\n        // toggle into detailed mode when actually inputting something\n        if (!isPressingMetaKey(event) && (/^[a-z0-9]$/i.test(event.key) || event.key === 'Backspace')) {\n            toggleDetailedMode(true);\n        }\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        if (!isDetailedMode) {\n            event.target.select();\n        }\n    };\n\n    if (type === 'datepicker') {\n        const valueAsDate = date.parse(value as Date | string | undefined);\n\n        const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n            const newDate = (event as any).detail as Date;\n\n            if (!valueAsDate || !newDate || (isDate(valueAsDate) && isDate(newDate) && !date.isWeakEqual(valueAsDate, newDate))) {\n                props.onChange(newDate);\n            }\n        };\n\n        return (\n            <Datepicker\n                {...commonProps}\n                invalid={invalid}\n                onChange={handleChange}\n                onFocus={handleFocus}\n                onKeyDown={handleInputKeyDown}\n                ref={controlRef as React.RefObject<HTMLInputElement>}\n                value={valueAsDate}\n            />\n        );\n    }\n\n    if (type === 'textarea') {\n        const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n            onChange(event.target.value);\n        };\n\n        return (\n            <TextareaWithAutosizing\n                {...commonProps}\n                fontSize={fontSize}\n                invalid={invalid}\n                isTruncated={isTruncated}\n                onChange={handleChange}\n                onFocus={handleFocus}\n                onKeyDown={handleInputKeyDown}\n                ref={controlRef as React.RefObject<HTMLTextAreaElement>}\n                value={String(value ?? '')}\n            />\n        );\n    }\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        onChange(dataType === 'number' && event.target.value ? Number.parseInt(event.target.value) : event.target.value);\n    };\n\n    return (\n        <Input\n            {...commonProps}\n            invalid={invalid}\n            onChange={handleChange}\n            onFocus={handleFocus}\n            onKeyDown={handleInputKeyDown}\n            ref={controlRef as React.RefObject<HTMLInputElement>}\n            type={dataType === 'number' ? 'number' : undefined}\n            value={dataType === 'number' ? (value as number) : String(value ?? '')}\n        />\n    );\n}) as <TType = unknown>(props: MemoedEditingCellProps<TType>) => JSX.Element;\n"],"names":["EditingControlCell","props","cell","cellRef","isHighlighted","index","rowIndex","React","useContext","RowContext","table","getContext","tableMeta","options","meta","columnMeta","column","columnDef","isActiveRow","rowActive","rowActiveIndex","type","_columnMeta$control","control","handleFocus","useEditingCellAutofocus","value","getValue","hasNonTextControl","useMemo","_cellRef$current","current","querySelector","handleChange","useCallback","nextValue","editing","setCellValue","requestAnimationFrame","onCellChanged","row","id","original","blur","toggleDetailedMode","undefined","handleBlur","event","isElementInsideOrTriggeredFromContainer","relatedTarget","currentTarget","useEffect","ref","document","activeElement","error","getCellError","controlProps","dataType","fontSize","size","invalid","isDetailedMode","isTruncated","enableTruncate","onBlur","onChange","rowPendingChanges","getRowValue","tabIndex","cellAttributes","getCellAttributes","onFocus","Field","message","MemoedEditingCell","RowMoveIndicator","memo","controlRef","useRef","currentValue","commonProps","controlFnProps","setValue","Switch","checked","Boolean","Checkbox","handleInputKeyDown","target","readOnly","key","stopPropagation","shiftKey","preventDefault","_target$select","select","call","_target$setSelectionR","_target$value","_target$value2","setSelectionRange","length","_target$select2","isPressingMetaKey","test","valueAsDate","date","newDate","detail","isDate","Datepicker","onKeyDown","TextareaWithAutosizing","String","Number","parseInt","Input"],"mappings":"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"}
+{"version":3,"file":"EditingControlCell.js","sources":["../../../../../../../../../../src/components/Table3/components/Columns/Cell/EditingControlCell.tsx"],"sourcesContent":["import React from 'react';\nimport { TableMeta as ReactTableMeta, ColumnMeta as ReactTableColumnMeta } from '@tanstack/react-table';\nimport { isDate } from 'date-fns';\nimport { Datepicker } from '../../../../Datepicker/Datepicker';\nimport { Switch } from '../../../../Switch/Switch';\nimport { Input } from '../../../../Input/Input';\nimport { TableColumnDataType, TableColumnRendererControl, TableFontSize } from '../../../../../primitives/Table/types';\nimport * as date from '../../../../../utils/date';\nimport { RowMoveIndicator } from './Editing/RowMoveIndicator';\nimport { TextareaWithAutosizing } from './Editing/TextareaWithAutosizing';\nimport { Field } from '../../../../Field/Field';\nimport { isElementInsideOrTriggeredFromContainer } from '../../../../../utils/dom';\nimport { TableCellRendererProps } from '../../../../../primitives/Table/Core/types';\nimport { RowContext } from '../../../../../primitives/Table/Core/components/Row/RowContext';\nimport { getCellAttributes } from '../../../../../primitives/Table/Core/components/Columns/Cell/util';\nimport { useEditingCellAutofocus } from './util';\nimport { isPressingMetaKey } from '../../../../../utils/keyboard';\nimport { Checkbox } from '../../../../Checkbox/Checkbox';\n\nexport function EditingControlCell<TType = unknown>(props: TableCellRendererProps<TType>) {\n    const { cell, cellRef, isHighlighted, index } = props;\n    const { rowIndex } = React.useContext(RowContext);\n    const { table } = cell.getContext();\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const columnMeta = cell.column.columnDef.meta as ReactTableColumnMeta<TType, unknown>;\n    const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;\n    const type = columnMeta.control ?? 'input';\n    const handleFocus = useEditingCellAutofocus<TType>(props);\n    const value = cell.getValue();\n\n    // some controls, like select2, should trigger cell changed (validation, updates) as the value changes\n    const hasNonTextControl = React.useMemo(() => {\n        return (\n            typeof type === 'function' &&\n            !!cellRef.current?.querySelector('[data-taco=\"Select2\"],[data-taco=\"switch\"],[data-taco=\"checkbox\"]')\n        );\n    }, [cellRef.current]);\n\n    const handleChange = React.useCallback(\n        (nextValue: unknown) => {\n            if (nextValue !== value) {\n                tableMeta.editing.setCellValue(cell, rowIndex, nextValue);\n\n                if (hasNonTextControl) {\n                    requestAnimationFrame(() => tableMeta.editing.onCellChanged(cell, rowIndex, nextValue));\n                }\n            }\n        },\n        [hasNonTextControl, cell.row.id, cell.column.id, cell.row.original, rowIndex, value]\n    );\n\n    const blur = React.useCallback(\n        function blur() {\n            tableMeta.editing.toggleDetailedMode(false);\n            tableMeta.editing.onCellChanged(cell, rowIndex, undefined, !hasNonTextControl);\n        },\n        [hasNonTextControl, cell.row.id, cell.column.id, cell.row.original, rowIndex]\n    );\n\n    const handleBlur = React.useCallback(\n        (event: React.FocusEvent) => {\n            if (isElementInsideOrTriggeredFromContainer(event.relatedTarget, event.currentTarget)) {\n                return;\n            }\n            blur();\n        },\n        [blur]\n    );\n\n    // ensure that blur runs when the cell gets unmounted (when vertically arrow key navigating)\n    React.useEffect(() => {\n        const ref = cellRef.current;\n\n        return () => {\n            if (document.activeElement === ref || isElementInsideOrTriggeredFromContainer(document.activeElement, ref)) {\n                blur();\n            }\n        };\n    }, []);\n\n    const error = tableMeta.editing.getCellError<TType>(cell);\n\n    const controlProps = {\n        dataType: columnMeta.dataType,\n        fontSize: tableMeta.fontSize.size,\n        id: cell.column.id,\n        invalid: !!error,\n        isDetailedMode: tableMeta.editing.isDetailedMode,\n        isTruncated: !!columnMeta.enableTruncate,\n        onBlur: handleBlur,\n        onChange: handleChange,\n        row: cell.row.original,\n        rowPendingChanges: tableMeta.editing.getRowValue(cell.row.id),\n        tabIndex: isActiveRow ? 0 : -1,\n        toggleDetailedMode: tableMeta.editing.toggleDetailedMode,\n        type,\n        value,\n    };\n\n    const cellAttributes = {\n        ...getCellAttributes(cell, index, isHighlighted),\n        'data-cell-editing-invalid': error ? true : undefined,\n        'data-taco': 'cell-control',\n        onFocus: handleFocus,\n        ref: cellRef,\n        tabIndex: -1,\n    };\n\n    return (\n        <td {...cellAttributes}>\n            <Field invalid={!!error} message={error}>\n                <MemoedEditingCell<TType> {...controlProps} />\n            </Field>\n            {\n                // we show row move indicator here within the cell rather than the row because it is\n                // an editing only feature, and we don't want to leak editing into the shared row component\n            }\n            <RowMoveIndicator cell={cell} cellRef={cellRef} isActiveRow={isActiveRow} />\n        </td>\n    );\n}\n\ntype MemoedEditingCellProps<TType = unknown, TValue = unknown> = {\n    dataType?: TableColumnDataType;\n    fontSize: TableFontSize;\n    id: string;\n    invalid: boolean;\n    isDetailedMode: boolean;\n    isTruncated: boolean;\n    onBlur: (event: React.FocusEvent) => void;\n    onChange: (value: TValue) => void;\n    row: TType;\n    rowPendingChanges: Partial<TType> | undefined;\n    tabIndex?: number;\n    toggleDetailedMode: (detailed: React.SetStateAction<boolean>) => void;\n    type: TableColumnRendererControl<TType>;\n    value: TValue;\n};\n\nconst MemoedEditingCell = React.memo(function MemoedEditingCell<TType = unknown>(props: MemoedEditingCellProps<TType>) {\n    const {\n        dataType,\n        fontSize,\n        id,\n        invalid,\n        isDetailedMode,\n        isTruncated,\n        onBlur,\n        onChange,\n        row,\n        rowPendingChanges,\n        tabIndex = -1,\n        toggleDetailedMode,\n        type = 'input',\n        value,\n    } = props;\n    const controlRef = React.useRef<HTMLElement>(null);\n    const currentValue = row[id];\n    const commonProps = {\n        onBlur,\n        ref: controlRef,\n        tabIndex,\n    };\n\n    if (typeof type === 'function') {\n        const controlFnProps = {\n            ...commonProps,\n            invalid,\n            setValue: onChange,\n            value,\n        };\n\n        return type(controlFnProps, { ...row, ...rowPendingChanges });\n    }\n\n    if (type === 'switch') {\n        return (\n            <Switch\n                {...commonProps}\n                checked={Boolean(value)}\n                onChange={onChange}\n                ref={controlRef as React.RefObject<HTMLButtonElement>}\n            />\n        );\n    }\n\n    if (type === 'checkbox') {\n        return (\n            <Checkbox\n                {...commonProps}\n                checked={Boolean(value)}\n                onChange={onChange}\n                ref={controlRef as React.RefObject<HTMLButtonElement>}\n            />\n        );\n    }\n\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        const target = event.target as HTMLInputElement | HTMLTextAreaElement;\n\n        if (target.readOnly) {\n            return;\n        }\n\n        // prevent active row navigation while in detailed mode\n        if (\n            isDetailedMode &&\n            (event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'ArrowLeft' || event.key === 'ArrowRight')\n        ) {\n            event.stopPropagation();\n        }\n\n        // enter or exit detail mode when pressing enter\n        if (event.key === 'Enter') {\n            // textareas support shift and enter, don't prevent default in that case\n            if (event.shiftKey && isDetailedMode) {\n                return;\n            }\n\n            event.preventDefault();\n\n            if (isDetailedMode) {\n                target.select?.();\n            } else {\n                target.setSelectionRange?.(target.value?.length, target.value?.length);\n            }\n\n            toggleDetailedMode(editing => !editing);\n            return;\n        }\n\n        // reset the value, or exit edit mode when pressing escape\n        if (event.key === 'Escape') {\n            if (isDetailedMode) {\n                event.preventDefault();\n                toggleDetailedMode(false);\n\n                if (value !== currentValue) {\n                    props.onChange(currentValue);\n                }\n\n                // have to let onChange run before selecting, otherwise the value changes\n                requestAnimationFrame(() => target.select?.());\n            }\n\n            return;\n        }\n\n        // toggle into detailed mode when actually inputting something\n        if (!isPressingMetaKey(event) && (/^[a-z0-9]$/i.test(event.key) || event.key === 'Backspace')) {\n            toggleDetailedMode(true);\n        }\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        if (!isDetailedMode) {\n            event.target.select();\n        }\n    };\n\n    if (type === 'datepicker') {\n        const valueAsDate = date.parse(value as Date | string | undefined);\n\n        const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n            const newDate = (event as any).detail as Date;\n\n            if (!valueAsDate || !newDate || (isDate(valueAsDate) && isDate(newDate) && !date.isWeakEqual(valueAsDate, newDate))) {\n                props.onChange(newDate);\n            }\n        };\n\n        return (\n            <Datepicker\n                {...commonProps}\n                invalid={invalid}\n                onChange={handleChange}\n                onFocus={handleFocus}\n                onKeyDown={handleInputKeyDown}\n                ref={controlRef as React.RefObject<HTMLInputElement>}\n                value={valueAsDate}\n            />\n        );\n    }\n\n    if (type === 'textarea') {\n        const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n            onChange(event.target.value);\n        };\n\n        return (\n            <TextareaWithAutosizing\n                {...commonProps}\n                fontSize={fontSize}\n                invalid={invalid}\n                isTruncated={isTruncated}\n                onChange={handleChange}\n                onFocus={handleFocus}\n                onKeyDown={handleInputKeyDown}\n                ref={controlRef as React.RefObject<HTMLTextAreaElement>}\n                value={String(value ?? '')}\n            />\n        );\n    }\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        onChange(dataType === 'number' && event.target.value ? Number.parseInt(event.target.value) : event.target.value);\n    };\n\n    return (\n        <Input\n            {...commonProps}\n            invalid={invalid}\n            onChange={handleChange}\n            onFocus={handleFocus}\n            onKeyDown={handleInputKeyDown}\n            ref={controlRef as React.RefObject<HTMLInputElement>}\n            type={dataType === 'number' ? 'number' : undefined}\n            value={dataType === 'number' ? (value as number) : String(value ?? '')}\n        />\n    );\n}) as <TType = unknown>(props: MemoedEditingCellProps<TType>) => JSX.Element;\n"],"names":["EditingControlCell","props","cell","cellRef","isHighlighted","index","rowIndex","React","useContext","RowContext","table","getContext","tableMeta","options","meta","columnMeta","column","columnDef","isActiveRow","rowActive","rowActiveIndex","type","_columnMeta$control","control","handleFocus","useEditingCellAutofocus","value","getValue","hasNonTextControl","useMemo","_cellRef$current","current","querySelector","handleChange","useCallback","nextValue","editing","setCellValue","requestAnimationFrame","onCellChanged","row","id","original","blur","toggleDetailedMode","undefined","handleBlur","event","isElementInsideOrTriggeredFromContainer","relatedTarget","currentTarget","useEffect","ref","document","activeElement","error","getCellError","controlProps","dataType","fontSize","size","invalid","isDetailedMode","isTruncated","enableTruncate","onBlur","onChange","rowPendingChanges","getRowValue","tabIndex","cellAttributes","getCellAttributes","onFocus","Field","message","MemoedEditingCell","RowMoveIndicator","memo","controlRef","useRef","currentValue","commonProps","controlFnProps","setValue","Switch","checked","Boolean","Checkbox","handleInputKeyDown","target","readOnly","key","stopPropagation","shiftKey","preventDefault","_target$select","select","call","_target$setSelectionR","_target$value","_target$value2","setSelectionRange","length","_target$select2","isPressingMetaKey","test","valueAsDate","date","newDate","detail","isDate","Datepicker","onKeyDown","TextareaWithAutosizing","String","Number","parseInt","Input"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table3/components/Editing/Alert.js

@@ -43,20 +43,22 @@ function Alert(props) {
   // table.getColumn(columName) throw error in strict dev mode. Related thread: https://github.com/TanStack/table/discussions/5505
   table.getAllColumns().find(x => x.id === String(tableMeta.rowIdentityAccessor)) : undefined;
   pendingChangesWithErrors.forEach((pendingChangeWithError, index) => {
+    var _row;
     // if appropriate, concatenate the item with the text "and"
     if (pendingChangesWithErrors.length > 1 && index === pendingChangesWithErrors.length - 1) {
       // Add space before and after `messageAnd` text
       links.push(` ${validationTexts.alert.messageAnd} `);
     }
-    const rowIndex = table.getRowModel().rows.findIndex(row => row.id === pendingChangeWithError.rowId);
+    // note: if this row click functionality is removed, indexes can be removed from useEditingState
     const handleClick = () => {
       // if row is visible
-      if (rowIndex > -1) {
-        scrollToRow(rowIndex);
+      if (pendingChangeWithError.index > -1) {
+        scrollToRow(pendingChangeWithError.index);
+        tableMeta.rowActive.setRowActiveIndex(pendingChangeWithError.index);
       }
       // if row is filtered out
       else {
-        setShowFilterResetDialog(pendingChangeWithError.rowId);
+        setShowFilterResetDialog(pendingChangeWithError.index);
       }
     };
     let tooltip;
@@ -68,7 +70,12 @@ function Alert(props) {
       const columnName = (_table$getAllColumns$ = table.getAllColumns().find(column => column.id === firstCellErrorColumnId)) === null || _table$getAllColumns$ === void 0 ? void 0 : (_table$getAllColumns$2 = _table$getAllColumns$.columnDef.meta) === null || _table$getAllColumns$2 === void 0 ? void 0 : _table$getAllColumns$2.header;
       tooltip = `${columnName}: ${pendingChangeWithError.errors.cells[firstCellErrorColumnId]}`;
     }
-    const row = table.getRow(pendingChangeWithError.rowId).original;
+    let row;
+    try {
+      row = table.getRow(pendingChangeWithError.rowId).original;
+    } catch {
+      // because of server loading, some rows may not be accessible
+    }
     links.push(/*#__PURE__*/React__default.createElement(Tooltip, {
       key: pendingChangeWithError.rowId,
       title: tooltip
@@ -76,7 +83,7 @@ function Alert(props) {
       className: "text-blue",
       onClick: handleClick,
       role: "button"
-    }, rowIdentityColumn ? row[rowIdentityColumn.id] : rowIndex + 1)));
+    }, rowIdentityColumn ? (_row = row) === null || _row === void 0 ? void 0 : _row[rowIdentityColumn.id] : pendingChangeWithError.index + 1)));
     // if appropriate, concatenate the item with the text ","
     if (pendingChangesWithErrors.length > 2 && index < pendingChangesWithErrors.length - 2) {
       links.push(', ');
@@ -97,9 +104,8 @@ function Alert(props) {
     table.resetGlobalFilter();
     table.resetColumnFilters();
     requestAnimationFrame(() => {
-      const rowIndex = table.getRowModel().rows.findIndex(row => row.id === showFilterResetDialog);
-      if (rowIndex > -1) {
-        scrollToRow(rowIndex);
+      if (showFilterResetDialog && showFilterResetDialog > -1) {
+        scrollToRow(showFilterResetDialog);
       }
       setShowFilterResetDialog(false);
     });