@economic/taco 2.14.2 → 2.16.0

package/dist/components/Table3/components/columns/cell/EditingCell.d.ts

@@ -1,10 +1,13 @@
 /// <reference types="react" />
 import { TableMeta, CellContext } from '@tanstack/react-table';
 export declare type EditingCellProps<TType = unknown> = CellContext<TType, unknown> & {
+    highlighted?: boolean;
+    highlightedAsCurrent?: boolean;
     children?: string | JSX.Element;
 };
 export declare function EditingCell<TType = unknown>(props: EditingCellProps<TType>): JSX.Element;
 export declare type MemoedEditingCellProps<TType = unknown> = EditingCellProps<TType> & {
     isHovered: boolean;
     tableMeta: TableMeta<TType>;
+    error?: string;
 };

package/dist/components/Table3/components/columns/cell/Highlight.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Highlight: (props: any) => JSX.Element;

package/dist/components/Table3/components/columns/internal/EditingActions.d.ts

@@ -5,4 +5,4 @@ export declare type EditingActionsProps<TType = unknown> = CellContext<TType, un
 };
 export declare const COLUMN_ID = "__editing_actions";
 export declare const EDITING_ACTIONS_WIDTH = 60;
-export declare function createRowEditingActionsColumn<TType = unknown>(): DisplayColumnDef<TType, unknown>;
+export declare function createRowEditingActionsColumn<TType = unknown>(rowIdentifier?: string): DisplayColumnDef<TType, unknown>;

package/dist/components/Table3/components/rows/Row.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Row as RTRow, Table as RTable } from '@tanstack/react-table';
 import { Table3RowClickHandler, Table3RowDropHandler } from '../../types';
+import { LastCellIndex } from '../../util/editing';
 declare type RowProps<TType = unknown> = Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onDrop'> & {
     index: number;
     isLastRow: boolean;
@@ -12,6 +13,7 @@ declare type RowProps<TType = unknown> = Omit<React.HTMLAttributes<HTMLDivElemen
     tableRef: React.RefObject<HTMLDivElement>;
 };
 export declare function Row<TType = unknown>(props: RowProps<TType>): JSX.Element;
+export declare const lastCellIndex: LastCellIndex;
 export declare type MemoedRowProps<TType = unknown> = RowProps<TType> & {
     'aria-grabbed'?: boolean;
     'data-current': boolean;

package/dist/components/Table3/components/rows/RowContext.d.ts

@@ -3,6 +3,7 @@ declare type RowContextValue = {
     isHovered: boolean;
     setIsHovered: (value: boolean) => void;
     rowIndex: number;
+    hasError: boolean;
 };
 export declare const RowContext: React.Context<RowContextValue>;
 export declare const useRowContext: () => RowContextValue;

package/dist/components/Table3/hooks/features/useEditing.d.ts

@@ -1,30 +1,31 @@
 import React from 'react';
 import { Cell as RTCell } from '@tanstack/react-table';
+import { Table3SaveHandler } from '../../types';
 import { IndicatorReason } from '../../components/columns/cell/Indicator';
-export declare enum SavingStateValue {
+import { Table3Validation } from './useValidation';
+export declare enum SavingStatusValue {
     Saving = "saving",
     Saved = "saved",
     Error = "error"
 }
-export declare type SavingState = {
-    state: SavingStateValue;
-};
-export declare function useEditing<TType = unknown>(isEnabled: boolean, onSave?: (row: TType) => void): {
+export declare function useEditing<TType = unknown>(isEnabled: boolean, validation: Table3Validation<TType>, onSave?: Table3SaveHandler<TType>): {
     isEnabled: boolean;
     isEditing: boolean;
     toggleEditing: React.Dispatch<React.SetStateAction<boolean>>;
-    changes: Record<string, TType> | null;
+    changes: EditingState<TType>;
     getCellValue: <T extends TType>(cell: RTCell<T, unknown>) => any;
     setCellValue: <T_1 extends TType>(cell: RTCell<T_1, unknown>, value: unknown) => void;
     saveChangesIfNeeded: () => Promise<void>;
     detailModeEditing: boolean;
     setDetailModeEditing: React.Dispatch<React.SetStateAction<boolean>>;
-    rowMoveReason: Record<string, IndicatorReason | null>;
-    setRowMoveReason: React.Dispatch<React.SetStateAction<Record<string, IndicatorReason | null>>>;
-    removeRowMoveReason: (columnId: string) => void;
+    rowMoveReason: Record<string, IndicatorReason | null> | null;
+    setRowMoveReason: React.Dispatch<React.SetStateAction<Record<string, IndicatorReason | null> | null>>;
+    removeRowMoveReason: () => void;
     handleKeyDown: (event: KeyboardEvent) => void;
     handleBlur: (event: React.FocusEvent) => void;
     resetChange: (rowId: string) => void;
-    savingStates: Record<string, SavingState> | null;
-    removeSavingState: (rowId: string) => void;
+    getSavingStatus: (rowId: string) => SavingStatusValue | null;
+    resetSavingStatus: (rowId: string) => void;
 };
+declare type EditingState<TType = unknown> = Record<string, TType> | null;
+export {};

package/dist/components/Table3/hooks/features/usePauseShortcuts.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare function usePauseShortcuts(): {
+    isPaused: boolean;
+    pause: React.Dispatch<React.SetStateAction<boolean>>;
+};

package/dist/components/Table3/hooks/features/useSearch.d.ts

@@ -13,4 +13,6 @@ export declare function useSearch(isEnabled: boolean, excludeUnmatchedResultsInS
     currentHighlightColumnIndex: number | undefined;
     setCurrentHighlightColumnIndex: React.Dispatch<React.SetStateAction<number | undefined>>;
     loadAll: Table3LoadAllHandler | undefined;
+    isSearching: boolean;
+    setIsSearching: React.Dispatch<React.SetStateAction<boolean>>;
 };

package/dist/components/Table3/hooks/features/useValidation.d.ts

@@ -0,0 +1,13 @@
+import { Cell as RTCell } from '@tanstack/react-table';
+import { RowErrors, Table3CellValidationHandler, Table3RowValidationHandler } from '../../types';
+export declare type Table3Validation<TType = unknown> = {
+    validate: (rowId: string, row: TType, cellId?: string) => Promise<void | RowErrors>;
+    setCellError: (rowId: string, cellId: string, error: string) => void;
+    setRowErrors: (rowId: string, errors: Record<string, string>) => void;
+    confirmErrors: (rowId: string) => void;
+    getCellError: <T extends TType>(cell: RTCell<T, unknown>) => string | undefined;
+    resetErrors: (rowId: string, cellId?: string) => void;
+    errors: Record<string, RowErrors> | null;
+    draftErrors: Record<string, RowErrors> | null;
+};
+export declare function useValidation<TType = unknown>(onCellValidate?: Table3CellValidationHandler<TType>, onRowValidate?: Table3RowValidationHandler<TType>): Table3Validation<TType>;

package/dist/components/Table3/hooks/useTable.d.ts

@@ -16,6 +16,8 @@ import { usePrinting } from './features/usePrinting';
 import { useRowGoto } from './features/useRowGoto';
 import { useSearch } from './features/useSearch';
 import { useRowActions } from './features/useRowActions';
+import { Table3Validation } from './features/useValidation';
+import { usePauseShortcuts } from './features/usePauseShortcuts';
 declare module '@tanstack/table-core' {
     interface TableMeta<TData extends RowData> {
         columnFreezing: ReturnType<typeof useColumnFreezing>;
@@ -37,6 +39,8 @@ declare module '@tanstack/table-core' {
         rowHeight: ReturnType<typeof useRowHeight>;
         rowSelection: ReturnType<typeof useRowSelection>;
         search: ReturnType<typeof useSearch>;
+        shortcutsState: ReturnType<typeof usePauseShortcuts>;
+        validation: Table3Validation<TData>;
     }
     interface ColumnMeta<TData extends RowData, TValue> {
         align?: Table3ColumnAlignment;

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

@@ -17,7 +17,7 @@ export declare type Table3ColumnControlProps = {
     onBlur?: (value: any) => void;
     onFocus?: React.FocusEventHandler;
     readOnly?: boolean;
-    ref: React.RefObject<HTMLElement>;
+    ref: React.RefObject<HTMLElement> | ((instance: HTMLElement | null | undefined) => void);
     setValue: (value: any) => void;
     value: any;
 };
@@ -112,6 +112,9 @@ export declare type Table3LoadAllHandler = (sorting: Table3ColumnSort[], filters
 export declare type Table3RowGotoHandler = (column: string, query: string, sorting: Table3ColumnSort[], filters: ColumnFilter[], search: string | undefined) => Promise<number>;
 export declare type Table3ColumnSort = RTTableColumnSort;
 export declare type Table3SortHandler = (sorting: Table3ColumnSort[]) => void;
+export declare type RowErrors = Record<string, string>;
+export declare type Table3CellValidationHandler<TType = unknown> = (cellValue: any, cellId: string, row: TType) => Promise<RowErrors | undefined | void>;
+export declare type Table3RowValidationHandler<TType = unknown> = (row: TType) => Promise<RowErrors | undefined | void>;
 export declare type TableStrategy = {
     renderBody: () => JSX.Element | JSX.Element[] | null;
     scrollToIndex: (index: number, options?: {
@@ -169,10 +172,13 @@ export declare type Table3CommonProps<TType = unknown> = Partial<Table3Options>
     onFilter?: Table3FilterHandler;
     onSave?: Table3SaveHandler<TType>;
     onSort?: Table3SortHandler;
+    onCellValidate?: Table3CellValidationHandler<TType>;
+    onRowValidate?: Table3RowValidationHandler<TType>;
     preset?: Table3Preset;
     shortcuts?: Table3Shortcuts<TType>;
     toolbarLeft?: JSX.Element;
     toolbarRight?: JSX.Element;
+    rowIdentifier?: string;
 };
 interface Table3ClientProps<TType = unknown> extends Table3CommonProps<TType> {
     length?: never;
@@ -262,6 +268,12 @@ export declare type Table3Texts = {
             progress: string;
             complete: string;
         };
+        clearChangesConfirmationDialog: {
+            title: string;
+            description: string;
+            cancel: string;
+            confirm: string;
+        };
     };
     filters: {
         button: string;
@@ -344,5 +356,18 @@ export declare type Table3Texts = {
     otherOptions: {
         tooltip: string;
     };
+    validation: {
+        index: string;
+        alert: {
+            unsavedEntries: (count?: number) => string;
+            incompleteAndHavntBeenSaved: (count?: number) => string;
+        };
+        resetFiltersDialog: {
+            title: string;
+            description: string;
+            cancel: string;
+            confirm: string;
+        };
+    };
 };
 export {};

package/dist/components/Table3/util/editing.d.ts

@@ -2,3 +2,9 @@ export declare const focussableNodeNames: string[];
 export declare const focusableSelector: string;
 export declare const hasChanged: (value: any, newValue: any) => boolean;
 export declare const willRowMoveAfterSorting: (value: any, cell: any, rowIndex: any, rows: any, desc: any) => boolean;
+export declare class LastCellIndex {
+    _value: string | null | undefined;
+    get value(): string | null | undefined;
+    set value(val: string | null | undefined);
+}
+export declare function getColumnIndex(element: Element): string | null | undefined;

package/dist/components/Tag/Tag.d.ts

@@ -13,7 +13,7 @@ export declare const Tag: React.ForwardRefExoticComponent<Pick<React.HTMLAttribu
     children: string;
     color?: "green" | "yellow" | "red" | "blue" | "purple" | "brown" | "pink" | "orange" | "grey" | "transparent" | undefined;
     disabled?: boolean | undefined;
-    icon?: React.ReactElement<IconProps, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | "account-preview" | "accounting-year-cancel" | "accounting-year" | "accounting" | "arrow-bottom" | "arrow-down" | "arrow-end" | "arrow-left" | "arrow-right" | "arrow-start" | "arrow-top" | "arrow-up" | "attach-auto" | "attach-cancel" | "attach-warning" | "attach" | "autotext-insert" | "autotext" | "basic-tabs" | "basic" | "bell-solid" | "book" | "booking" | "budget" | "calendar" | "cash-account" | "cash-reports" | "chart-area" | "chart-bar" | "chart-line" | "chart-pie" | "chart-table" | "chat-solid" | "chat" | "chevron-down-double" | "chevron-down-solid" | "chevron-down" | "chevron-left-double" | "chevron-left-solid" | "chevron-left" | "chevron-right-double" | "chevron-right-solid" | "chevron-right" | "chevron-up-double" | "chevron-up-solid" | "chevron-up" | "circle-close" | "circle-information" | "circle-minus" | "circle-plus" | "circle-questionmark" | "circle-tick" | "circle-warning" | "clamp-open" | "clamp" | "close" | "column-freeze" | "column-unfreeze" | "columns" | "connection-enable" | "connection-revoke" | "contacts" | "copy" | "courses" | "credit" | "delete-permanently" | "delete" | "depecriate" | "developer" | "distribution-template" | "document-approve" | "document-create-entry" | "document-cut" | "document-error" | "document-isolate-page" | "document-merge" | "document-move" | "document-preview" | "document-received" | "document-rejected-request" | "document-split" | "document-time" | "document" | "download" | "drag" | "e-copedia" | "e-signature" | "edit-simple" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "entries-on-account" | "entries-open" | "entries-warning" | "entry-type-customer-invoice" | "entry-type-customer-payment" | "entry-type-journal-entry" | "entry-type-manual-customer-invoice" | "entry-type-supplier-invoice" | "entry-type-supplier-payment" | "envelope-approved" | "envelope" | "expand-view" | "expenses" | "export-to-excel" | "export-to-pdf" | "export" | "eye-off" | "eye-on" | "filter-solid" | "filter" | "font-size" | "graph-solid" | "hash" | "height-extra-tall" | "height-medium" | "height-short" | "height-tall" | "home" | "images" | "import" | "inbox-einvoicing" | "inbox-scanning" | "inbox-smart" | "inbox" | "info" | "inventory-matrix" | "inventory" | "journal-pro" | "layout-both" | "layout-first" | "layout-last" | "layout-none" | "layout" | "ledger-card-customer-reminder" | "ledger-card-manual-customer-invoice" | "ledger-card-obsolete-stock" | "ledger-card-opening-entry" | "ledger-card-reserved-entry" | "ledger-card-shrinkage-pilferage" | "ledger-card-stock-adjustment" | "ledger-card-transferred-opening-entry" | "ledger-card" | "lightbulb" | "line" | "list-bulleted" | "list-search" | "list" | "location" | "lock-open" | "lock" | "log-out" | "log" | "market" | "match-amount" | "match-entries" | "menu" | "mileage" | "modal-resize" | "modal-shrink" | "more-solid" | "more" | "move" | "navigation-list" | "note-follow-up" | "note-read" | "note" | "numbers" | "partner-api" | "payment-paid" | "payment-unpaid" | "period" | "person-change" | "person-minus" | "person-plus" | "person-tick" | "play" | "plus-minus" | "print" | "process-payment" | "product-ledger-card" | "profile" | "project-cards" | "projects" | "question-mark" | "quicklinks" | "rating-bankruptcy" | "rating-payment-problems" | "reconciled" | "refresh" | "report-solid" | "report" | "restore" | "rotate-left" | "rotate-right" | "sales" | "search-bold" | "search" | "secure-tick" | "secure" | "settings-solid" | "settings" | "shortcuts" | "show-all" | "show-less" | "show-more" | "show-template" | "sliders" | "smartpay" | "sort-by" | "star-solid" | "star" | "subscriptions" | "system-entries" | "tag" | "template-override" | "templates" | "thumb-both" | "thumb-down-solid" | "thumb-down" | "thumb-up-solid" | "thumb-up" | "tick-bold" | "tick" | "time" | "transfer-cancel" | "transfer-locked" | "transfer" | "undo" | "undock" | "unreconciled" | "warning" | "webshop" | "website" | "workflow-template-basic" | "workflow" | "zoom" | undefined;
+    icon?: React.ReactElement<IconProps, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | "account-preview" | "accounting-year-cancel" | "accounting-year" | "accounting" | "ai-chat-solid" | "ai-stars" | "arrow-bottom" | "arrow-down" | "arrow-end" | "arrow-left" | "arrow-right" | "arrow-start" | "arrow-top" | "arrow-up" | "attach-auto" | "attach-cancel" | "attach-warning" | "attach" | "autotext-insert" | "autotext" | "basic-tabs" | "basic" | "bell-solid" | "book" | "booking" | "budget" | "calendar" | "cash-account" | "cash-reports" | "chart-area" | "chart-bar" | "chart-line" | "chart-pie" | "chart-table" | "chat-solid" | "chat" | "chevron-down-double" | "chevron-down-solid" | "chevron-down" | "chevron-left-double" | "chevron-left-solid" | "chevron-left" | "chevron-right-double" | "chevron-right-solid" | "chevron-right" | "chevron-up-double" | "chevron-up-solid" | "chevron-up" | "circle-close" | "circle-information" | "circle-minus" | "circle-plus" | "circle-questionmark" | "circle-tick" | "circle-warning" | "clamp-open" | "clamp" | "close" | "column-freeze" | "column-unfreeze" | "columns" | "connection-enable" | "connection-revoke" | "contacts" | "copy" | "courses" | "credit" | "delete-permanently" | "delete" | "depecriate" | "developer" | "distribution-template" | "document-approve" | "document-create-entry" | "document-cut" | "document-error" | "document-isolate-page" | "document-merge" | "document-move" | "document-preview" | "document-received" | "document-rejected-request" | "document-split" | "document-time" | "document" | "download" | "drag" | "e-copedia" | "e-signature" | "edit-simple" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "entries-on-account" | "entries-open" | "entries-warning" | "entry-type-customer-invoice" | "entry-type-customer-payment" | "entry-type-journal-entry" | "entry-type-manual-customer-invoice" | "entry-type-supplier-invoice" | "entry-type-supplier-payment" | "envelope-approved" | "envelope-solid" | "envelope" | "expand-view" | "expenses" | "export-to-excel" | "export-to-pdf" | "export" | "eye-off" | "eye-on" | "filter-solid" | "filter" | "font-size" | "graph-solid" | "hash" | "height-extra-tall" | "height-medium" | "height-short" | "height-tall" | "home" | "images" | "import" | "inbox-einvoicing" | "inbox-scanning" | "inbox-smart" | "inbox" | "info" | "inventory-matrix" | "inventory" | "journal-pro" | "layout-both" | "layout-first" | "layout-last" | "layout-none" | "layout" | "ledger-card-customer-reminder" | "ledger-card-manual-customer-invoice" | "ledger-card-obsolete-stock" | "ledger-card-opening-entry" | "ledger-card-reserved-entry" | "ledger-card-shrinkage-pilferage" | "ledger-card-stock-adjustment" | "ledger-card-transferred-opening-entry" | "ledger-card" | "lightbulb" | "line" | "list-bulleted" | "list-search" | "list" | "location" | "lock-open" | "lock" | "log-out" | "log" | "market" | "match-amount" | "match-entries" | "menu" | "mileage" | "modal-resize" | "modal-shrink" | "more-solid" | "more" | "move" | "navigation-list" | "note-follow-up" | "note-read" | "note" | "numbers" | "partner-api" | "payment-paid" | "payment-unpaid" | "period" | "person-change" | "person-minus" | "person-plus" | "person-tick" | "phone-solid" | "play" | "plus-minus" | "print" | "process-payment" | "product-ledger-card" | "profile" | "project-cards" | "projects" | "question-mark-bold" | "question-mark" | "quicklinks" | "rating-bankruptcy" | "rating-payment-problems" | "reconciled" | "refresh" | "report-solid" | "report" | "restore" | "rotate-left" | "rotate-right" | "sales" | "search-bold" | "search" | "secure-tick" | "secure" | "settings-solid" | "settings" | "shortcuts" | "show-all" | "show-less" | "show-more" | "show-template" | "sliders" | "smartpay" | "sort-by" | "star-solid" | "star" | "subscriptions" | "system-entries" | "tag" | "template-override" | "templates" | "thumb-both" | "thumb-down-solid" | "thumb-down" | "thumb-up-solid" | "thumb-up" | "tick-bold" | "tick" | "time" | "transfer-cancel" | "transfer-locked" | "transfer" | "undo" | "undock" | "unreconciled" | "warning" | "webshop" | "website" | "workflow-template-basic" | "workflow" | "zoom" | undefined;
     readOnly?: boolean | undefined;
     onDelete?: ((event: React.MouseEvent<SVGSVGElement>) => void) | undefined;
 } & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/Tooltip/Tooltip.d.ts

@@ -2,6 +2,8 @@ import * as React from 'react';
 export declare type TooltipProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {
     /** The element which activates the tooltip when hovered. Should be a single React/HTML element */
     children: React.ReactElement | any;
+    /** Use this value to hide tooltip conditionally */
+    hide?: boolean;
     /** Text displayed in the tooltip */
     title: string | JSX.Element;
     /**
@@ -13,6 +15,8 @@ export declare type TooltipProps = Omit<React.HTMLAttributes<HTMLDivElement>, 't
 export declare const Tooltip: React.ForwardRefExoticComponent<Pick<React.HTMLAttributes<HTMLDivElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
     /** The element which activates the tooltip when hovered. Should be a single React/HTML element */
     children: React.ReactElement | any;
+    /** Use this value to hide tooltip conditionally */
+    hide?: boolean | undefined;
     /** Text displayed in the tooltip */
     title: string | JSX.Element;
     /**

package/dist/esm/index.css

@@ -652,6 +652,10 @@
     @apply flex;
 }
 
+[data-taco='table3-column-group'] > div {
+    @apply grow;
+}
+
 /* In cases where row height might differ from default one (example: textarea without truncate or changing of font size or row height),
    we need to prevent editing controls to take all available space */
 [role='cell']:not([data-highlighted='true']) {
@@ -701,94 +705,108 @@
 }
 
 /* normal rows */
-[role='row']:not([data-selected='true']):not([data-error='true']) [role='cell'] {
+[role='row']:not([data-selected='true']):not([data-invalid='true']) [role='cell'] {
         @apply bg-white;
     }
-[role='row']:not([data-selected='true']):not([data-error='true']):hover [role='cell'] {
+[role='row']:not([data-selected='true']):not([data-invalid='true']):hover [role='cell'] {
         --table3-row-actions-shadow: theme(colors.grey.100);
         @apply bg-grey-100;
     }
-[role='row']:not([data-selected='true']):not([data-error='true'])[data-current='true'] [role='cell'] {
+[role='row']:not([data-selected='true']):not([data-invalid='true'])[data-current='true'] [role='cell'] {
         --table3-row-actions-shadow: theme(colors.grey.100);
         @apply bg-grey-100;
     }
-[role='row']:not([data-selected='true']):not([data-error='true'])[data-current='true']:hover [role='cell'] {
+[role='row']:not([data-selected='true']):not([data-invalid='true'])[data-current='true']:hover [role='cell'] {
         --table3-row-actions-shadow: theme(colors.grey.100);
         @apply bg-grey-100;
     }
+/* Fields shouldn’t have white background when not in current row and hovered*/
+[role='row']:not([data-selected='true']):not([data-invalid='true'])[data-current='false']:hover [role='cell'] .bg-white {
+            @apply !bg-grey-100;
+        }
 /* normal rows when focus is inside the table */
 [data-taco='table2']:focus-within
-    [role='row'][data-current='true']:not([data-selected='true']):not([data-error='true'])
+    [role='row'][data-current='true']:not([data-selected='true']):not([data-invalid='true'])
     [role='cell'] {
     --table3-row-actions-shadow: theme(colors.grey.200);
     @apply bg-grey-200;
 }
 /* normal rows when hover is paused */
-[data-pause-hover='true'] [role='row']:not([data-selected='true']):not([data-error='true']):hover:not([data-current='true']) [role='cell'] {
+[data-pause-hover='true'] [role='row']:not([data-selected='true']):not([data-invalid='true']):hover:not([data-current='true']) [role='cell'] {
         --table3-row-actions-shadow: theme(colors.white);
         @apply !bg-white;
     }
-[data-pause-hover='true'] [role='row']:not([data-selected='true']):not([data-error='true']):hover[data-current='true'] [role='cell'] {
+[data-pause-hover='true'] [role='row']:not([data-selected='true']):not([data-invalid='true']):hover[data-current='true'] [role='cell'] {
         --table3-row-actions-shadow: theme(colors.grey.200);
         @apply !bg-grey-200;
     }
 
 /* selected rows */
-[role='row'][data-selected='true']:not([data-error='true']) [role='cell'] {
+[role='row'][data-selected='true']:not([data-invalid='true']) [role='cell'] {
         @apply bg-blue-100;
     }
-[role='row'][data-selected='true']:not([data-error='true']):hover [role='cell'] {
+[role='row'][data-selected='true']:not([data-invalid='true']):hover [role='cell'] {
         --table3-row-actions-shadow: #d6e3f6;
         @apply bg-[#D6E3F6];
     }
-[role='row'][data-selected='true']:not([data-error='true'])[data-current='true']:hover [role='cell'],
+[role='row'][data-selected='true']:not([data-invalid='true'])[data-current='true']:hover [role='cell'],
     
-    [role='row'][data-selected='true']:not([data-error='true'])[data-current='true'] [role='cell'] {
+    [role='row'][data-selected='true']:not([data-invalid='true'])[data-current='true'] [role='cell'] {
         --table3-row-actions-shadow: #d6e3f6;
         @apply bg-[#D6E3F6];
     }
 /* selected rows when focus is inside the table */
-[data-taco='table2']:focus-within [role='row'][data-current='true'][data-selected='true']:not([data-error='true']) [role='cell'] {
+[data-taco='table2']:focus-within
+    [role='row'][data-current='true'][data-selected='true']:not([data-invalid='true'])
+    [role='cell'] {
     --table3-row-actions-shadow: #ccd8eb;
     @apply bg-[#CCD8EB];
 }
 /* selected rows when hover is paused */
-[data-pause-hover='true'] [role='row'][data-selected='true']:not([data-error='true']):hover:not([data-current='true']) [role='cell'] {
+[data-pause-hover='true'] [role='row'][data-selected='true']:not([data-invalid='true']):hover:not([data-current='true']) [role='cell'] {
         --table3-row-actions-shadow: theme(colors.blue.100);
         @apply !bg-blue-100;
     }
-[data-pause-hover='true'] [role='row'][data-selected='true']:not([data-error='true']):hover[data-current='true'] [role='cell'] {
+[data-pause-hover='true'] [role='row'][data-selected='true']:not([data-invalid='true']):hover[data-current='true'] [role='cell'] {
         --table3-row-actions-shadow: #ccd8eb;
         @apply !bg-[#CCD8EB];
     }
 
 /* error rows */
-[role='row'][data-error='true'] [role='cell'] {
+[role='row'][data-invalid='true'] [role='cell'] {
         @apply bg-[#FFEDE9];
     }
-[role='row'][data-error='true']:hover [role='cell'] {
+[role='row'][data-invalid='true']:hover [role='cell'] {
         --table3-row-actions-shadow: #ffe4de;
         @apply bg-[#FFE4DE];
     }
-[role='row'][data-error='true'][data-current='true'] [role='cell'] {
+[role='row'][data-invalid='true'][data-current='true'] [role='cell'] {
         --table3-row-actions-shadow: theme(colors.red.100);
         @apply bg-red-100;
     }
-[role='row'][data-error='true'][data-current='true']:hover [role='cell'] {
+[role='row'][data-invalid='true'][data-current='true']:hover [role='cell'] {
         --table3-row-actions-shadow: #ffe4de;
         @apply bg-[#FFE4DE];
     }
+/* Fields with errors shouldn’t have white background when not in current row */
+[role='row'][data-invalid='true'][data-current='false'] [role='cell'] .bg-white {
+            @apply !bg-[#FFEDE9];
+        }
+/* Request from UX: In error state, input backgroud color should be the same as row background color */
+[role='row'][data-invalid='true'][data-current='false']:hover [role='cell'] .bg-white {
+            @apply !bg-[#FFE4DE];
+        }
 /* error rows when focus is inside the table */
-[data-taco='table2']:focus-within [role='row'][data-current='true'][data-error='true'] [role='cell'] {
+[data-taco='table2']:focus-within [role='row'][data-current='true'][data-invalid='true'] [role='cell'] {
     --table3-row-actions-shadow: theme(colors.red.100);
     @apply bg-red-100;
 }
 /* error rows when hover is paused */
-[data-pause-hover='true'] [role='row'][data-error='true']:hover:not([data-current='true']) [role='cell'] {
+[data-pause-hover='true'] [role='row'][data-invalid='true']:hover:not([data-current='true']) [role='cell'] {
         --table3-row-actions-shadow: #ffede9;
         @apply !bg-[#FFEDE9];
     }
-[data-pause-hover='true'] [role='row'][data-error='true']:hover[data-current='true'] [role='cell'] {
+[data-pause-hover='true'] [role='row'][data-invalid='true']:hover[data-current='true'] [role='cell'] {
         --table3-row-actions-shadow: theme(colors.red.100);
         @apply !bg-red-100;
     }
@@ -802,6 +820,12 @@
     @apply !wcag-blue-500;
 }
 
+/* error row */
+/*!!!!*/
+[data-taco='table2-body'] [role='row'][data-invalid='true'] [role='cell'] {
+    /*@apply !bg-[#FFF5F2];*/
+}
+
 /* cell component overrides */
 
 /* small font size */
@@ -820,7 +844,9 @@
 }
 
 [data-font-size='small'] [role='cell'] [data-taco='badge'],
-[data-font-size='small'] [role='cell'] [data-taco='badge-icon'] {
+[data-font-size='small'] [role='cell'] [data-taco='badge-icon'],
+[data-font-size='small'] [role='cell'] [data-taco='icon'],
+[data-font-size='small'] [role='cell'] [data-taco='spinner'] {
     @apply !-my-0.5 !text-xs;
 }
 
@@ -828,11 +854,21 @@
     @apply !-my-1;
 }
 
-[data-font-size='small'] [role='cell'] [data-taco='input-container'],
-[data-font-size='small'] [role='cell'] [data-taco='Select2'] {
+[data-font-size='small'] [role='cell'] [data-taco='Select2'],
+[data-font-size='small'] [role='cell'] [data-taco='input-container'] {
     @apply !-my-[3px];
 }
 
+/* from validation */
+[data-font-size='small'] [role='row'][data-invalid='true'] [role='cell'] [data-taco='Select2'],
+[data-font-size='small'] [role='row'][data-invalid='true'] [role='cell'] [data-taco='input-container'],
+[data-font-size='small'] [role='row'] [role='cell'][data-invalid='true'] [data-taco='Select2'],
+[data-font-size='small'] [role='row'] [role='cell'][data-invalid='true'] [data-taco='input-container'] {
+    @apply !-mt-1;
+    @apply !mb-0;
+}
+/*---*/
+
 [data-font-size='small'] [role='cell'] [data-taco='input'],
 [data-font-size='small'] [role='cell'] [data-taco='Select2'],
 [data-font-size='small'] [role='cell'] [data-taco='textarea'] {
@@ -859,9 +895,18 @@
     @apply !my-0;
 }
 
-[data-font-size='small'] [role='cell'][data-editable] {
-    @apply px-[calc(var(--table3-cell-padding-x)_-_6px)];
-}
+/* When cell is editable, but not highlighted, then we apply cell padding to a cell itself */
+
+[data-font-size='small'] [role='cell'][data-editable]:not([data-highlighted='true']) {
+        @apply px-[calc(var(--table3-cell-padding-x)_-_6px)];
+    }
+
+/* When cell is editable and highlighted, the padding should apply to highlight wrapper, 
+       because it should take all the available space in the cell */
+
+[data-font-size='small'] [role='cell'][data-editable][data-highlighted='true'] [data-taco='highlight'] {
+        @apply px-[calc(var(--table3-cell-padding-x)_-_6px)];
+    }
 
 [data-font-size='small'] [role='cell'][data-editable] [data-taco='checkbox'],
 [data-font-size='small'] [role='cell'][data-editable] [data-taco='checkbox-container'],
@@ -889,9 +934,18 @@
     @apply !-my-[5px];
 }
 
-[data-font-size='medium'] [role='cell'][data-editable] {
-    @apply px-[calc(var(--table3-cell-padding-x)_-_8px)];
-}
+/* When cell is editable, but not highlighted, then we apply cell padding to a cell itself */
+
+[data-font-size='medium'] [role='cell'][data-editable]:not([data-highlighted='true']) {
+        @apply px-[calc(var(--table3-cell-padding-x)_-_8px)];
+    }
+
+/* When cell is editable and highlighted, the padding should apply to highlight wrapper, 
+       because it should take all the available space in the cell */
+
+[data-font-size='medium'] [role='cell'][data-editable][data-highlighted='true'] [data-taco='highlight'] {
+        @apply px-[calc(var(--table3-cell-padding-x)_-_8px)];
+    }
 
 [data-font-size='medium'] [role='cell'][data-editable] [data-taco='checkbox'],
 [data-font-size='medium'] [role='cell'][data-editable] [data-taco='checkbox-container'],
@@ -900,6 +954,14 @@
     @apply !mx-[calc(var(--table3-cell-padding-x)_-_3px)] !mt-px;
 }
 
+[data-font-size='medium'] [role='row'][data-invalid='true'] [role='cell'] [data-taco='Select2'],
+[data-font-size='medium'] [role='row'][data-invalid='true'] [role='cell'] [data-taco='input-container'],
+[data-font-size='medium'] [role='row'] [role='cell'][data-invalid='true'] [data-taco='Select2'],
+[data-font-size='medium'] [role='row'] [role='cell'][data-invalid='true'] [data-taco='input-container'] {
+    @apply !-mt-1.5;
+    @apply !mb-0;
+}
+
 /* large font size */
 [data-font-size='large'] [role='cell'] > [data-taco='button'],
 [data-font-size='large'] [role='cell'] > [data-taco='icon-button'] {
@@ -919,6 +981,14 @@
     @apply !-my-[7.5px];
 }
 
+[data-font-size='large'] [role='row'][data-invalid='true'] [role='cell'] [data-taco='Select2'],
+[data-font-size='large'] [role='row'][data-invalid='true'] [role='cell'] [data-taco='input-container'],
+[data-font-size='large'] [role='row'] [role='cell'][data-invalid='true'] [data-taco='Select2'],
+[data-font-size='large'] [role='row'] [role='cell'][data-invalid='true'] [data-taco='input-container'] {
+    @apply !-mt-2;
+    @apply !mb-0;
+}
+
 [data-font-size='large'] [role='cell'] [data-taco='input'],
 [data-font-size='large'] [role='cell'] [data-taco='Select2'],
 [data-font-size='large'] [role='cell'] [data-taco='textarea'] {
@@ -933,9 +1003,18 @@
     @apply !h-6 !w-6;
 }
 
-[data-font-size='large'] [role='cell'][data-editable] {
-    @apply px-[calc(var(--table3-cell-padding-x)_-_10px)];
-}
+/* When cell is editable, but not highlighted, then we apply cell padding to a cell itself */
+
+[data-font-size='large'] [role='cell'][data-editable]:not([data-highlighted='true']) {
+        @apply px-[calc(var(--table3-cell-padding-x)_-_10px)];
+    }
+
+/* When cell is editable and highlighted, the padding should apply to highlight wrapper, 
+       because it should take all the available space in the cell */
+
+[data-font-size='large'] [role='cell'][data-editable][data-highlighted='true'] [data-taco='highlight'] {
+        @apply px-[calc(var(--table3-cell-padding-x)_-_10px)];
+    }
 
 [data-font-size='large'] [role='cell'][data-editable] [data-taco='checkbox'],
 [data-font-size='large'] [role='cell'][data-editable] [data-taco='checkbox-container'],

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

@@ -6,11 +6,14 @@ import { Content, InnerContent, Title, Footer, Close, Actions } from './componen
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { Trigger } from './components/Trigger.js';
 
+const DEFAULT_OUTLET_NAME = 'default';
 const Outlet = /*#__PURE__*/forwardRef(function Outlet(props, ref) {
+  var _props$name;
   const className = cn('h-full ml-auto overflow-hidden flex-shrink-0', props.className);
   return /*#__PURE__*/createElement("div", Object.assign({}, props, {
     className: className,
     "data-taco": "drawer-outlet",
+    "data-taco-outlet-name": (_props$name = props.name) !== null && _props$name !== void 0 ? _props$name : DEFAULT_OUTLET_NAME,
     ref: ref
   }));
 });
@@ -34,6 +37,7 @@ const Drawer = /*#__PURE__*/forwardRef(function Drawer(props, ref) {
     children,
     focusTrap = props.focusTrap === undefined && props.variant === 'overlay' ? true : props.focusTrap,
     showCloseButton = true,
+    outletName,
     ...otherProps
   } = props;
   const [open, setOpen] = useControllableState({
@@ -63,9 +67,10 @@ const Drawer = /*#__PURE__*/forwardRef(function Drawer(props, ref) {
   }, []);
   useEffect(() => {
     var _document$querySelect;
-    const outletElement = (_document$querySelect = document.querySelector('[data-taco="drawer-outlet"]')) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.body;
+    const outletSelector = `[data-taco="drawer-outlet"][data-taco-outlet-name="${outletName !== null && outletName !== void 0 ? outletName : DEFAULT_OUTLET_NAME}"]`;
+    const outletElement = (_document$querySelect = document.querySelector(outletSelector)) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.body;
     setOutlet(outletElement);
-  }, []);
+  }, [outletName]);
   useEffect(() => {
     if (open) {
       // if drawerStack is defined, this means that another drawer was opened before