@economic/taco 2.46.9 → 2.47.0-alpha.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" | "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" | "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/Select2/components/Option.d.ts

@@ -4,7 +4,7 @@ import * as ListboxPrimitive from '../../../primitives/Listbox2/Listbox2';
 import { Color } from '../../../types';
 import { FontSize } from '../../../types';
 export declare type Select2OptionProps = Omit<ListboxPrimitive.Listbox2OptionProps, 'children' | 'prefix'> & {
-    children: string;
+    children: string | JSX.Element;
     color?: Color;
     description?: string;
     fontSize?: FontSize;
@@ -13,11 +13,11 @@ export declare type Select2OptionProps = Omit<ListboxPrimitive.Listbox2OptionPro
     textValue?: string;
 };
 export declare const Option: React.ForwardRefExoticComponent<Pick<ListboxPrimitive.Listbox2OptionProps, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "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" | "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" | "disabled" | "value"> & {
-    children: string;
+    children: string | JSX.Element;
     color?: "green" | "yellow" | "red" | "blue" | "purple" | "brown" | "pink" | "orange" | "grey" | "transparent" | undefined;
     description?: string | undefined;
     fontSize?: "small" | "medium" | "large" | undefined;
-    prefix?: "id" | "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-signed-solid" | "document-signed" | "document-split" | "document-time" | "document" | "download" | "drag" | "e-copedia" | "edit-simple" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "entries-on-account" | "entries-open" | "entries-warning" | "entry-type-customer-invoice" | "entry-type-customer-payment" | "entry-type-journal-entry" | "entry-type-manual-customer-invoice" | "entry-type-supplier-invoice" | "entry-type-supplier-payment" | "envelope-approved" | "envelope-solid" | "envelope" | "expand-view" | "expenses" | "export-to-excel" | "export-to-pdf" | "export" | "eye-off" | "eye-on" | "filter-solid" | "filter" | "font-size" | "graph-solid" | "hash" | "height-extra-tall" | "height-medium" | "height-short" | "height-tall" | "house-solid" | "house" | "images" | "import" | "inbox-einvoicing" | "inbox-scanning" | "inbox-smart" | "inbox" | "info" | "inventory-matrix" | "inventory" | "journal-pro" | "layout-both" | "layout-first" | "layout-last" | "layout-none" | "layout" | "ledger-card-customer-reminder" | "ledger-card-manual-customer-invoice" | "ledger-card-obsolete-stock" | "ledger-card-opening-entry" | "ledger-card-reserved-entry" | "ledger-card-shrinkage-pilferage" | "ledger-card-stock-adjustment" | "ledger-card-transferred-opening-entry" | "ledger-card" | "lightbulb" | "line" | "link-external" | "list-bulleted" | "list-search" | "list" | "location" | "lock-open" | "lock" | "log-out" | "log" | "market" | "mastercard-os" | "match-amount" | "match-entries" | "menu" | "mileage" | "modal-resize" | "modal-shrink" | "more-solid" | "more" | "move" | "navigation-list" | "note-follow-up" | "note-read" | "note" | "november-first" | "numbers" | "partner-api" | "payment-paid" | "payment-unpaid" | "period" | "person-change" | "person-minus" | "person-plus" | "person-tick" | "phone-solid" | "phone" | "play" | "plus-minus" | "print" | "process-payment" | "product-ledger-card" | "profile" | "project-cards" | "projects" | "question-mark-bold" | "question-mark" | "quicklinks" | "rating-bankruptcy" | "rating-payment-problems" | "reconciled" | "refresh" | "report-solid" | "report" | "restore" | "rotate-left" | "rotate-right" | "sales" | "search-bold" | "search" | "secure-tick" | "secure" | "settings-solid" | "settings" | "shortcuts" | "show-all" | "show-less" | "show-more" | "show-template" | "sliders" | "smartpay" | "sort-by" | "star-solid" | "star" | "subscriptions" | "system-entries" | "tag" | "template-override" | "templates" | "thumb-both" | "thumb-down-solid" | "thumb-down" | "thumb-up-solid" | "thumb-up" | "tick-bold" | "tick" | "time" | "transfer-cancel" | "transfer-locked" | "transfer" | "undo" | "undock" | "unreconciled" | "warning" | "webshop" | "website" | "workflow-template-basic" | "workflow" | "zoom" | JSX.Element | undefined;
-    postfix?: "id" | "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-signed-solid" | "document-signed" | "document-split" | "document-time" | "document" | "download" | "drag" | "e-copedia" | "edit-simple" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "entries-on-account" | "entries-open" | "entries-warning" | "entry-type-customer-invoice" | "entry-type-customer-payment" | "entry-type-journal-entry" | "entry-type-manual-customer-invoice" | "entry-type-supplier-invoice" | "entry-type-supplier-payment" | "envelope-approved" | "envelope-solid" | "envelope" | "expand-view" | "expenses" | "export-to-excel" | "export-to-pdf" | "export" | "eye-off" | "eye-on" | "filter-solid" | "filter" | "font-size" | "graph-solid" | "hash" | "height-extra-tall" | "height-medium" | "height-short" | "height-tall" | "house-solid" | "house" | "images" | "import" | "inbox-einvoicing" | "inbox-scanning" | "inbox-smart" | "inbox" | "info" | "inventory-matrix" | "inventory" | "journal-pro" | "layout-both" | "layout-first" | "layout-last" | "layout-none" | "layout" | "ledger-card-customer-reminder" | "ledger-card-manual-customer-invoice" | "ledger-card-obsolete-stock" | "ledger-card-opening-entry" | "ledger-card-reserved-entry" | "ledger-card-shrinkage-pilferage" | "ledger-card-stock-adjustment" | "ledger-card-transferred-opening-entry" | "ledger-card" | "lightbulb" | "line" | "link-external" | "list-bulleted" | "list-search" | "list" | "location" | "lock-open" | "lock" | "log-out" | "log" | "market" | "mastercard-os" | "match-amount" | "match-entries" | "menu" | "mileage" | "modal-resize" | "modal-shrink" | "more-solid" | "more" | "move" | "navigation-list" | "note-follow-up" | "note-read" | "note" | "november-first" | "numbers" | "partner-api" | "payment-paid" | "payment-unpaid" | "period" | "person-change" | "person-minus" | "person-plus" | "person-tick" | "phone-solid" | "phone" | "play" | "plus-minus" | "print" | "process-payment" | "product-ledger-card" | "profile" | "project-cards" | "projects" | "question-mark-bold" | "question-mark" | "quicklinks" | "rating-bankruptcy" | "rating-payment-problems" | "reconciled" | "refresh" | "report-solid" | "report" | "restore" | "rotate-left" | "rotate-right" | "sales" | "search-bold" | "search" | "secure-tick" | "secure" | "settings-solid" | "settings" | "shortcuts" | "show-all" | "show-less" | "show-more" | "show-template" | "sliders" | "smartpay" | "sort-by" | "star-solid" | "star" | "subscriptions" | "system-entries" | "tag" | "template-override" | "templates" | "thumb-both" | "thumb-down-solid" | "thumb-down" | "thumb-up-solid" | "thumb-up" | "tick-bold" | "tick" | "time" | "transfer-cancel" | "transfer-locked" | "transfer" | "undo" | "undock" | "unreconciled" | "warning" | "webshop" | "website" | "workflow-template-basic" | "workflow" | "zoom" | JSX.Element | undefined;
+    prefix?: "id" | JSX.Element | "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-signed-solid" | "document-signed" | "document-split" | "document-time" | "document" | "download" | "drag" | "e-copedia" | "edit-simple" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "entries-on-account" | "entries-open" | "entries-warning" | "entry-type-customer-invoice" | "entry-type-customer-payment" | "entry-type-journal-entry" | "entry-type-manual-customer-invoice" | "entry-type-supplier-invoice" | "entry-type-supplier-payment" | "envelope-approved" | "envelope-solid" | "envelope" | "expand-view" | "expenses" | "export-to-excel" | "export-to-pdf" | "export" | "eye-off" | "eye-on" | "filter-solid" | "filter" | "font-size" | "graph-solid" | "hash" | "height-extra-tall" | "height-medium" | "height-short" | "height-tall" | "house-solid" | "house" | "images" | "import" | "inbox-einvoicing" | "inbox-scanning" | "inbox-smart" | "inbox" | "info" | "inventory-matrix" | "inventory" | "journal-pro" | "layout-both" | "layout-first" | "layout-last" | "layout-none" | "layout" | "ledger-card-customer-reminder" | "ledger-card-manual-customer-invoice" | "ledger-card-obsolete-stock" | "ledger-card-opening-entry" | "ledger-card-reserved-entry" | "ledger-card-shrinkage-pilferage" | "ledger-card-stock-adjustment" | "ledger-card-transferred-opening-entry" | "ledger-card" | "lightbulb" | "line" | "link-external" | "list-bulleted" | "list-search" | "list" | "location" | "lock-open" | "lock" | "log-out" | "log" | "market" | "mastercard-os" | "match-amount" | "match-entries" | "menu" | "mileage" | "modal-resize" | "modal-shrink" | "more-solid" | "more" | "move" | "navigation-list" | "note-follow-up" | "note-read" | "note" | "november-first" | "numbers" | "partner-api" | "payment-paid" | "payment-unpaid" | "period" | "person-change" | "person-minus" | "person-plus" | "person-tick" | "phone-solid" | "phone" | "play" | "plus-minus" | "print" | "process-payment" | "product-ledger-card" | "profile" | "project-cards" | "projects" | "question-mark-bold" | "question-mark" | "quicklinks" | "rating-bankruptcy" | "rating-payment-problems" | "reconciled" | "refresh" | "report-solid" | "report" | "restore" | "rotate-left" | "rotate-right" | "sales" | "search-bold" | "search" | "secure-tick" | "secure" | "settings-solid" | "settings" | "shortcuts" | "show-all" | "show-less" | "show-more" | "show-template" | "sliders" | "smartpay" | "sort-by" | "star-solid" | "star" | "subscriptions" | "system-entries" | "tag" | "template-override" | "templates" | "thumb-both" | "thumb-down-solid" | "thumb-down" | "thumb-up-solid" | "thumb-up" | "tick-bold" | "tick" | "time" | "transfer-cancel" | "transfer-locked" | "transfer" | "undo" | "undock" | "unreconciled" | "warning" | "webshop" | "website" | "workflow-template-basic" | "workflow" | "zoom" | undefined;
+    postfix?: "id" | JSX.Element | "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-signed-solid" | "document-signed" | "document-split" | "document-time" | "document" | "download" | "drag" | "e-copedia" | "edit-simple" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "entries-on-account" | "entries-open" | "entries-warning" | "entry-type-customer-invoice" | "entry-type-customer-payment" | "entry-type-journal-entry" | "entry-type-manual-customer-invoice" | "entry-type-supplier-invoice" | "entry-type-supplier-payment" | "envelope-approved" | "envelope-solid" | "envelope" | "expand-view" | "expenses" | "export-to-excel" | "export-to-pdf" | "export" | "eye-off" | "eye-on" | "filter-solid" | "filter" | "font-size" | "graph-solid" | "hash" | "height-extra-tall" | "height-medium" | "height-short" | "height-tall" | "house-solid" | "house" | "images" | "import" | "inbox-einvoicing" | "inbox-scanning" | "inbox-smart" | "inbox" | "info" | "inventory-matrix" | "inventory" | "journal-pro" | "layout-both" | "layout-first" | "layout-last" | "layout-none" | "layout" | "ledger-card-customer-reminder" | "ledger-card-manual-customer-invoice" | "ledger-card-obsolete-stock" | "ledger-card-opening-entry" | "ledger-card-reserved-entry" | "ledger-card-shrinkage-pilferage" | "ledger-card-stock-adjustment" | "ledger-card-transferred-opening-entry" | "ledger-card" | "lightbulb" | "line" | "link-external" | "list-bulleted" | "list-search" | "list" | "location" | "lock-open" | "lock" | "log-out" | "log" | "market" | "mastercard-os" | "match-amount" | "match-entries" | "menu" | "mileage" | "modal-resize" | "modal-shrink" | "more-solid" | "more" | "move" | "navigation-list" | "note-follow-up" | "note-read" | "note" | "november-first" | "numbers" | "partner-api" | "payment-paid" | "payment-unpaid" | "period" | "person-change" | "person-minus" | "person-plus" | "person-tick" | "phone-solid" | "phone" | "play" | "plus-minus" | "print" | "process-payment" | "product-ledger-card" | "profile" | "project-cards" | "projects" | "question-mark-bold" | "question-mark" | "quicklinks" | "rating-bankruptcy" | "rating-payment-problems" | "reconciled" | "refresh" | "report-solid" | "report" | "restore" | "rotate-left" | "rotate-right" | "sales" | "search-bold" | "search" | "secure-tick" | "secure" | "settings-solid" | "settings" | "shortcuts" | "show-all" | "show-less" | "show-more" | "show-template" | "sliders" | "smartpay" | "sort-by" | "star-solid" | "star" | "subscriptions" | "system-entries" | "tag" | "template-override" | "templates" | "thumb-both" | "thumb-down-solid" | "thumb-down" | "thumb-up-solid" | "thumb-up" | "tick-bold" | "tick" | "time" | "transfer-cancel" | "transfer-locked" | "transfer" | "undo" | "undock" | "unreconciled" | "warning" | "webshop" | "website" | "workflow-template-basic" | "workflow" | "zoom" | undefined;
     textValue?: string | undefined;
 } & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Table3/components/Row/Editing/CreateNewRow.d.ts

@@ -1,14 +1,13 @@
 import React from 'react';
 import { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';
 import { Table3EditingCreateHandler } from '../../../types';
-import { TableRef } from '../../../../../primitives/Table/types';
 declare type CreateNewRowProps<TType = unknown> = {
     buttonRef: React.Ref<HTMLButtonElement>;
+    isScrolled: boolean;
     onEditingCreate?: Table3EditingCreateHandler<TType>;
     scrollToIndex: (index: number) => void;
     table: ReactTable<TType>;
     tableMeta: ReactTableMeta<TType>;
-    tableRef: React.RefObject<TableRef>;
 };
 export declare function CreateNewRow<TType = unknown>(props: CreateNewRowProps<TType>): JSX.Element;
 export {};

package/dist/components/Table3/components/Row/Editing/TemporaryRow.d.ts

@@ -3,6 +3,7 @@ import { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/reac
 import { TableRef } from '../../../../../primitives/Table/types';
 declare type TemporaryRowProps<TType = unknown> = {
     createRowButtonRef: React.RefObject<HTMLButtonElement>;
+    isScrolled: boolean;
     table: ReactTable<TType>;
     tableMeta: ReactTableMeta<TType>;
     tableRef: React.RefObject<TableRef>;

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

@@ -1,4 +1,6 @@
+import React from 'react';
 import { Cell as ReactTableCell } from '@tanstack/react-table';
+import { TableRef } from '../../../primitives/Table/types';
 import { Localization } from '../../Provider/Localization';
 export declare function willRowMove<TType = unknown>(cell: ReactTableCell<TType, unknown>, change: unknown, rowIndex: number, localization: Localization): "search" | "filter" | "sorting" | undefined;
 export declare const TEMPORARY_ROW_ID_PREFIX = "temp-";
@@ -8,3 +10,4 @@ export declare const shortcut: {
     meta: boolean;
     shift: boolean;
 };
+export declare function isTableScrolled(ref: React.RefObject<TableRef>): boolean;

package/dist/esm/index.css

@@ -650,13 +650,22 @@ table[data-taco^='table'] tr[data-row-group]:first-child {
             @apply pt-0;
         }
 
+/* Only apply -mt-px when the row group header is sticked to the top of the table.
+               margin-top -1px is needed to hide a little gap between the group header and table and the edge of the table.
+               If we'll not do this, then it will be slightly visible how rows are moving behind it when scrolled.
+            */
+
+table[data-taco^='table'] tr[data-row-group]:first-child td {
+                @apply -mt-px;
+            }
+
 table[data-taco^='table'] tr[data-row-group]:not(:first-child):before {
             content: '';
-            @apply bg-grey-100 border-grey-300 absolute left-0 right-0 top-0 h-10 border-t print:top-0 print:h-[2px] print:border-t-2;
+            @apply bg-grey-100 border-grey-300 absolute -top-1 left-0 right-0 h-10 border-t print:top-0 print:h-[2px] print:border-t-2;
         }
 
 table[data-taco^='table'] tr[data-row-group] td {
-            @apply -mt-px border-b-2 border-t-0 font-bold;
+            @apply border-b-2 border-t-0 font-bold;
         }
 
 table[data-taco^='table'] tr:first-child td {
@@ -752,14 +761,14 @@ table[data-taco^='table'] td:not([data-cell-truncate='true']) {
 }
 
 /* FOOTER */
-table[data-taco^='table'] tfoot td {
+table[data-taco^='table'] tfoot tr:not([data-row-index]) td {
     /*
      * Since footer has sticky position, the top and bottom padding ensures that the inner content doesn't come over
      * the border of the footer row.
      */
     @apply border-b-0 !py-1 font-bold;
 }
-table[data-taco^='table'] tfoot td:first-child {
+table[data-taco^='table'] tfoot tr:not([data-row-index]) td:first-child {
         @apply z-30 !pb-0 !pt-[2px];
     }
 

package/dist/esm/packages/taco/src/charts/utils/color.js.map

@@ -1 +1 @@
-{"version":3,"file":"color.js","sources":["../../../../../../../src/charts/utils/color.ts"],"sourcesContent":["import themeColors from '@tailwind-theme-colors';\n\nconst mapColor = (palette, prefix = ''): any => {\n    return Object.keys(palette).reduce((accum, color) => {\n        if (color === 'current') {\n            return accum;\n        } else if (typeof palette[color] === 'string') {\n            return {\n                ...accum,\n                [prefix ? (color === 'DEFAULT' ? prefix : `${prefix}-${color}`) : color]: palette[color],\n            };\n        } else {\n            return {\n                ...accum,\n                ...mapColor(palette[color], color),\n            };\n        }\n    }, {});\n};\n\nexport const colors: Record<string, string> = mapColor(themeColors);\n\nexport type Color = keyof typeof colors;\n\nexport const getThemeColor = (color: string) => colors[color];\n"],"names":["mapColor","palette","prefix","Object","keys","reduce","accum","color","colors","themeColors","getThemeColor"],"mappings":";;AAEA,MAAMA,QAAQ,GAAGA,CAACC,OAAO,EAAEC,MAAM,GAAG,EAAE;EAClC,OAAOC,MAAM,CAACC,IAAI,CAACH,OAAO,CAAC,CAACI,MAAM,CAAC,CAACC,KAAK,EAAEC,KAAK;IAC5C,IAAIA,KAAK,KAAK,SAAS,EAAE;MACrB,OAAOD,KAAK;KACf,MAAM,IAAI,OAAOL,OAAO,CAACM,KAAK,CAAC,KAAK,QAAQ,EAAE;MAC3C,OAAO;QACH,GAAGD,KAAK;QACR,CAACJ,MAAM,GAAIK,KAAK,KAAK,SAAS,GAAGL,MAAM,GAAG,GAAGA,MAAM,IAAIK,KAAK,EAAE,GAAIA,KAAK,GAAGN,OAAO,CAACM,KAAK;OAC1F;KACJ,MAAM;MACH,OAAO;QACH,GAAGD,KAAK;QACR,GAAGN,QAAQ,CAACC,OAAO,CAACM,KAAK,CAAC,EAAEA,KAAK;OACpC;;GAER,EAAE,EAAE,CAAC;AACV,CAAC;MAEYC,MAAM,gBAA2BR,QAAQ,CAACS,WAAW;MAIrDC,aAAa,GAAIH,KAAa,IAAKC,MAAM,CAACD,KAAK;;;;"}
+{"version":3,"file":"color.js","sources":["../../../../../../../src/charts/utils/color.ts"],"sourcesContent":["import themeColors from '../../../tailwind.colors.js';\n\nconst mapColor = (palette, prefix = ''): any => {\n    return Object.keys(palette).reduce((accum, color) => {\n        if (color === 'current') {\n            return accum;\n        } else if (typeof palette[color] === 'string') {\n            return {\n                ...accum,\n                [prefix ? (color === 'DEFAULT' ? prefix : `${prefix}-${color}`) : color]: palette[color],\n            };\n        } else {\n            return {\n                ...accum,\n                ...mapColor(palette[color], color),\n            };\n        }\n    }, {});\n};\n\nexport const colors: Record<string, string> = mapColor(themeColors);\n\nexport type Color = keyof typeof colors;\n\nexport const getThemeColor = (color: string) => colors[color];\n"],"names":["mapColor","palette","prefix","Object","keys","reduce","accum","color","colors","themeColors","getThemeColor"],"mappings":";;AAEA,MAAMA,QAAQ,GAAGA,CAACC,OAAO,EAAEC,MAAM,GAAG,EAAE;EAClC,OAAOC,MAAM,CAACC,IAAI,CAACH,OAAO,CAAC,CAACI,MAAM,CAAC,CAACC,KAAK,EAAEC,KAAK;IAC5C,IAAIA,KAAK,KAAK,SAAS,EAAE;MACrB,OAAOD,KAAK;KACf,MAAM,IAAI,OAAOL,OAAO,CAACM,KAAK,CAAC,KAAK,QAAQ,EAAE;MAC3C,OAAO;QACH,GAAGD,KAAK;QACR,CAACJ,MAAM,GAAIK,KAAK,KAAK,SAAS,GAAGL,MAAM,GAAG,GAAGA,MAAM,IAAIK,KAAK,EAAE,GAAIA,KAAK,GAAGN,OAAO,CAACM,KAAK;OAC1F;KACJ,MAAM;MACH,OAAO;QACH,GAAGD,KAAK;QACR,GAAGN,QAAQ,CAACC,OAAO,CAACM,KAAK,CAAC,EAAEA,KAAK;OACpC;;GAER,EAAE,EAAE,CAAC;AACV,CAAC;MAEYC,MAAM,gBAA2BR,QAAQ,CAACS,WAAW;MAIrDC,aAAa,GAAIH,KAAa,IAAKC,MAAM,CAACD,KAAK;;;;"}

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

@@ -15,10 +15,10 @@ const Badge = /*#__PURE__*/forwardRef(function Badge(props, ref) {
     ...otherProps
   } = props;
   const isTransparent = color === 'transparent';
-  const className = cn('rounded-full border overflow-hidden whitespace-nowrap inline-flex items-center justify-center', {
+  const className = cn('rounded-full border box-border overflow-hidden whitespace-nowrap inline-flex items-center justify-center', {
     [`border ${getOutlineColorShadeClasses(color)}`]: outline,
-    [`border-transparent font-normal ${getSubtleColorShadeClasses(color)}`]: subtle,
-    [`border-transparent ${getColorShadeClasses(color)}`]: !outline && !subtle,
+    [`border-none font-normal ${getSubtleColorShadeClasses(color)}`]: subtle,
+    [`border-none ${getColorShadeClasses(color)}`]: !outline && !subtle,
     'h-4 min-w-0 py-0 px-1 text-xs': small,
     'h-2 w-2 min-w-0': compact,
     'font-bold': outline || !subtle,
@@ -30,12 +30,15 @@ const Badge = /*#__PURE__*/forwardRef(function Badge(props, ref) {
     if (compact) {
       return /*#__PURE__*/createElement(VisuallyHidden, null, children);
     }
+    const contentToRender = typeof children === 'string' ? /*#__PURE__*/createElement("span", {
+      className: "items-center truncate"
+    }, children) : children;
     if (status) {
       return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement("div", {
-        className: cn('mr-1 h-2 w-2 rounded-full', getColorShadeClasses(color))
-      }), children);
+        className: cn('mr-1 h-2 w-2 shrink-0 rounded-full', getColorShadeClasses(color))
+      }), contentToRender);
     }
-    return children;
+    return contentToRender;
   };
   return /*#__PURE__*/createElement("span", Object.assign({}, otherProps, {
     "aria-atomic": "true",

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../../../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport { Color } from '../../types';\nimport { getSubtleColorShadeClasses, getColorShadeClasses, getOutlineColorShadeClasses } from '../../utils/tailwind';\nimport './Badge.css';\n\nexport type BadgeBaseProps = React.HTMLAttributes<HTMLSpanElement> & {\n    /** Content should be a numerical value or tag/status like text **/\n    children: React.ReactNode;\n    /** Show small version of badge **/\n    small?: boolean;\n    /** Background color **/\n    color?: Color;\n};\n\ninterface CompactBadgeProps extends BadgeBaseProps {\n    /** Show compact version **/\n    compact?: boolean;\n    /** Show outlined version **/\n    outline?: never;\n    /** Show subtle version **/\n    subtle?: never;\n    /** Show status dot - can be used only in subtle badge **/\n    status?: never;\n}\n\ninterface OutlineBadgeProps extends BadgeBaseProps {\n    /** Show compact version **/\n    compact?: never;\n    /** Show outlined version **/\n    outline?: boolean;\n    /** Show subtle version **/\n    subtle?: never;\n    /** Show status dot - can be used only in subtle badge **/\n    status?: never;\n}\n\ninterface SubtleBadgeProps extends BadgeBaseProps {\n    /** Show compact version **/\n    compact?: never;\n    /** Show outlined version **/\n    outline?: never;\n    /** Show subtle version **/\n    subtle?: boolean;\n    /** Show status dot - can be used only in subtle badge **/\n    status?: never;\n}\n\ninterface StatusBadgeProps extends BadgeBaseProps {\n    /** Show compact version **/\n    compact?: never;\n    /** Show outlined version **/\n    outline?: never;\n    /** Show subtle version **/\n    subtle?: boolean;\n    /** Show status dot - can be used only in subtle badge **/\n    status?: boolean;\n}\n\nexport type BadgeProps = CompactBadgeProps | OutlineBadgeProps | SubtleBadgeProps | StatusBadgeProps;\n\nexport const Badge = React.forwardRef(function Badge(props: BadgeProps, ref: React.Ref<HTMLSpanElement>) {\n    const {\n        children,\n        compact = false,\n        outline = false,\n        status = false,\n        subtle = false,\n        small = false,\n        color,\n        ...otherProps\n    } = props;\n    const isTransparent = color === 'transparent';\n    const className = cn(\n        'rounded-full border overflow-hidden whitespace-nowrap inline-flex items-center justify-center',\n        {\n            [`border ${getOutlineColorShadeClasses(color)}`]: outline,\n            [`border-transparent font-normal ${getSubtleColorShadeClasses(color)}`]: subtle,\n            [`border-transparent ${getColorShadeClasses(color)}`]: !outline && !subtle,\n            'h-4 min-w-0 py-0 px-1 text-xs': small,\n            'h-2 w-2 min-w-0': compact,\n            'font-bold': outline || !subtle,\n            'text-sm': !small,\n            'h-5 py-0 px-1.5': !compact && !small, // custom padding keeps single digits in a perfect circle\n            '!bg-grey-700': compact && isTransparent,\n        },\n        props.className\n    );\n\n    const content = () => {\n        if (compact) {\n            return <VisuallyHidden>{children}</VisuallyHidden>;\n        }\n        if (status) {\n            return (\n                <>\n                    <div className={cn('mr-1 h-2 w-2 rounded-full', getColorShadeClasses(color))} />\n                    {children}\n                </>\n            );\n        }\n        return children;\n    };\n\n    return (\n        <span\n            {...otherProps}\n            aria-atomic=\"true\"\n            aria-live=\"polite\"\n            className={className}\n            data-taco=\"badge\"\n            ref={ref}\n            role=\"status\"\n            title={props['aria-label']}>\n            {content()}\n        </span>\n    );\n});\n"],"names":["Badge","React","props","ref","children","compact","outline","status","subtle","small","color","otherProps","isTransparent","className","cn","getOutlineColorShadeClasses","getSubtleColorShadeClasses","getColorShadeClasses","content","VisuallyHidden","role","title"],"mappings":";;;;;MA8DaA,KAAK,gBAAGC,UAAgB,CAAC,SAASD,KAAKA,CAACE,KAAiB,EAAEC,GAA+B;EACnG,MAAM;IACFC,QAAQ;IACRC,OAAO,GAAG,KAAK;IACfC,OAAO,GAAG,KAAK;IACfC,MAAM,GAAG,KAAK;IACdC,MAAM,GAAG,KAAK;IACdC,KAAK,GAAG,KAAK;IACbC,KAAK;IACL,GAAGC;GACN,GAAGT,KAAK;EACT,MAAMU,aAAa,GAAGF,KAAK,KAAK,aAAa;EAC7C,MAAMG,SAAS,GAAGC,EAAE,CAChB,+FAA+F,EAC/F;IACI,CAAC,UAAUC,2BAA2B,CAACL,KAAK,CAAC,EAAE,GAAGJ,OAAO;IACzD,CAAC,kCAAkCU,0BAA0B,CAACN,KAAK,CAAC,EAAE,GAAGF,MAAM;IAC/E,CAAC,sBAAsBS,oBAAoB,CAACP,KAAK,CAAC,EAAE,GAAG,CAACJ,OAAO,IAAI,CAACE,MAAM;IAC1E,+BAA+B,EAAEC,KAAK;IACtC,iBAAiB,EAAEJ,OAAO;IAC1B,WAAW,EAAEC,OAAO,IAAI,CAACE,MAAM;IAC/B,SAAS,EAAE,CAACC,KAAK;IACjB,iBAAiB,EAAE,CAACJ,OAAO,IAAI,CAACI,KAAK;IACrC,cAAc,EAAEJ,OAAO,IAAIO;GAC9B,EACDV,KAAK,CAACW,SAAS,CAClB;EAED,MAAMK,OAAO,GAAGA;IACZ,IAAIb,OAAO,EAAE;MACT,oBAAOJ,cAACkB,cAAc,QAAEf,QAAQ,CAAkB;;IAEtD,IAAIG,MAAM,EAAE;MACR,oBACIN,2CACIA;QAAKY,SAAS,EAAEC,EAAE,CAAC,2BAA2B,EAAEG,oBAAoB,CAACP,KAAK,CAAC;QAAK,EAC/EN,QAAQ,CACV;;IAGX,OAAOA,QAAQ;GAClB;EAED,oBACIH,wCACQU,UAAU;mBACF,MAAM;iBACR,QAAQ;IAClBE,SAAS,EAAEA,SAAS;iBACV,OAAO;IACjBV,GAAG,EAAEA,GAAG;IACRiB,IAAI,EAAC,QAAQ;IACbC,KAAK,EAAEnB,KAAK,CAAC,YAAY;MACxBgB,OAAO,EAAE,CACP;AAEf,CAAC;;;;"}
+{"version":3,"file":"Badge.js","sources":["../../../../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport { Color } from '../../types';\nimport { getSubtleColorShadeClasses, getColorShadeClasses, getOutlineColorShadeClasses } from '../../utils/tailwind';\nimport './Badge.css';\n\nexport type BadgeBaseProps = React.HTMLAttributes<HTMLSpanElement> & {\n    /** Content should be a numerical value or tag/status like text **/\n    children: React.ReactNode;\n    /** Show small version of badge **/\n    small?: boolean;\n    /** Background color **/\n    color?: Color;\n};\n\ninterface CompactBadgeProps extends BadgeBaseProps {\n    /** Show compact version **/\n    compact?: boolean;\n    /** Show outlined version **/\n    outline?: never;\n    /** Show subtle version **/\n    subtle?: never;\n    /** Show status dot - can be used only in subtle badge **/\n    status?: never;\n}\n\ninterface OutlineBadgeProps extends BadgeBaseProps {\n    /** Show compact version **/\n    compact?: never;\n    /** Show outlined version **/\n    outline?: boolean;\n    /** Show subtle version **/\n    subtle?: never;\n    /** Show status dot - can be used only in subtle badge **/\n    status?: never;\n}\n\ninterface SubtleBadgeProps extends BadgeBaseProps {\n    /** Show compact version **/\n    compact?: never;\n    /** Show outlined version **/\n    outline?: never;\n    /** Show subtle version **/\n    subtle?: boolean;\n    /** Show status dot - can be used only in subtle badge **/\n    status?: never;\n}\n\ninterface StatusBadgeProps extends BadgeBaseProps {\n    /** Show compact version **/\n    compact?: never;\n    /** Show outlined version **/\n    outline?: never;\n    /** Show subtle version **/\n    subtle?: boolean;\n    /** Show status dot - can be used only in subtle badge **/\n    status?: boolean;\n}\n\nexport type BadgeProps = CompactBadgeProps | OutlineBadgeProps | SubtleBadgeProps | StatusBadgeProps;\n\nexport const Badge = React.forwardRef(function Badge(props: BadgeProps, ref: React.Ref<HTMLSpanElement>) {\n    const {\n        children,\n        compact = false,\n        outline = false,\n        status = false,\n        subtle = false,\n        small = false,\n        color,\n        ...otherProps\n    } = props;\n    const isTransparent = color === 'transparent';\n    const className = cn(\n        'rounded-full border box-border overflow-hidden whitespace-nowrap inline-flex items-center justify-center',\n        {\n            [`border ${getOutlineColorShadeClasses(color)}`]: outline,\n            [`border-none font-normal ${getSubtleColorShadeClasses(color)}`]: subtle,\n            [`border-none ${getColorShadeClasses(color)}`]: !outline && !subtle,\n            'h-4 min-w-0 py-0 px-1 text-xs': small,\n            'h-2 w-2 min-w-0': compact,\n            'font-bold': outline || !subtle,\n            'text-sm': !small,\n            'h-5 py-0 px-1.5': !compact && !small, // custom padding keeps single digits in a perfect circle\n            '!bg-grey-700': compact && isTransparent,\n        },\n        props.className\n    );\n\n    const content = () => {\n        if (compact) {\n            return <VisuallyHidden>{children}</VisuallyHidden>;\n        }\n\n        const contentToRender =\n            typeof children === 'string' ? <span className=\"items-center truncate\">{children}</span> : children;\n\n        if (status) {\n            return (\n                <>\n                    <div className={cn('mr-1 h-2 w-2 shrink-0 rounded-full', getColorShadeClasses(color))} />\n                    {contentToRender}\n                </>\n            );\n        }\n        return contentToRender;\n    };\n\n    return (\n        <span\n            {...otherProps}\n            aria-atomic=\"true\"\n            aria-live=\"polite\"\n            className={className}\n            data-taco=\"badge\"\n            ref={ref}\n            role=\"status\"\n            title={props['aria-label']}>\n            {content()}\n        </span>\n    );\n});\n"],"names":["Badge","React","props","ref","children","compact","outline","status","subtle","small","color","otherProps","isTransparent","className","cn","getOutlineColorShadeClasses","getSubtleColorShadeClasses","getColorShadeClasses","content","VisuallyHidden","contentToRender","role","title"],"mappings":";;;;;MA8DaA,KAAK,gBAAGC,UAAgB,CAAC,SAASD,KAAKA,CAACE,KAAiB,EAAEC,GAA+B;EACnG,MAAM;IACFC,QAAQ;IACRC,OAAO,GAAG,KAAK;IACfC,OAAO,GAAG,KAAK;IACfC,MAAM,GAAG,KAAK;IACdC,MAAM,GAAG,KAAK;IACdC,KAAK,GAAG,KAAK;IACbC,KAAK;IACL,GAAGC;GACN,GAAGT,KAAK;EACT,MAAMU,aAAa,GAAGF,KAAK,KAAK,aAAa;EAC7C,MAAMG,SAAS,GAAGC,EAAE,CAChB,0GAA0G,EAC1G;IACI,CAAC,UAAUC,2BAA2B,CAACL,KAAK,CAAC,EAAE,GAAGJ,OAAO;IACzD,CAAC,2BAA2BU,0BAA0B,CAACN,KAAK,CAAC,EAAE,GAAGF,MAAM;IACxE,CAAC,eAAeS,oBAAoB,CAACP,KAAK,CAAC,EAAE,GAAG,CAACJ,OAAO,IAAI,CAACE,MAAM;IACnE,+BAA+B,EAAEC,KAAK;IACtC,iBAAiB,EAAEJ,OAAO;IAC1B,WAAW,EAAEC,OAAO,IAAI,CAACE,MAAM;IAC/B,SAAS,EAAE,CAACC,KAAK;IACjB,iBAAiB,EAAE,CAACJ,OAAO,IAAI,CAACI,KAAK;IACrC,cAAc,EAAEJ,OAAO,IAAIO;GAC9B,EACDV,KAAK,CAACW,SAAS,CAClB;EAED,MAAMK,OAAO,GAAGA;IACZ,IAAIb,OAAO,EAAE;MACT,oBAAOJ,cAACkB,cAAc,QAAEf,QAAQ,CAAkB;;IAGtD,MAAMgB,eAAe,GACjB,OAAOhB,QAAQ,KAAK,QAAQ,gBAAGH;MAAMY,SAAS,EAAC;OAAyBT,QAAQ,CAAQ,GAAGA,QAAQ;IAEvG,IAAIG,MAAM,EAAE;MACR,oBACIN,2CACIA;QAAKY,SAAS,EAAEC,EAAE,CAAC,oCAAoC,EAAEG,oBAAoB,CAACP,KAAK,CAAC;QAAK,EACxFU,eAAe,CACjB;;IAGX,OAAOA,eAAe;GACzB;EAED,oBACInB,wCACQU,UAAU;mBACF,MAAM;iBACR,QAAQ;IAClBE,SAAS,EAAEA,SAAS;iBACV,OAAO;IACjBV,GAAG,EAAEA,GAAG;IACRkB,IAAI,EAAC,QAAQ;IACbC,KAAK,EAAEpB,KAAK,CAAC,YAAY;MACxBgB,OAAO,EAAE,CACP;AAEf,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Select2/components/Option.js

@@ -72,12 +72,13 @@ const Option = /*#__PURE__*/React__default.forwardRef(function Select2Option(pro
   }), hasValue ? (/*#__PURE__*/React__default.createElement(Icon, {
     name: "tick",
     className: "pointer-events-none invisible -mx-0.5 !h-4 !w-4 group-aria-selected:visible"
-  })) : null, isTag ? (/*#__PURE__*/React__default.createElement(Tag, {
+  })) : null, typeof children !== 'string' ? (/*#__PURE__*/React__default.createElement("span", null, children)) : isTag ? (/*#__PURE__*/React__default.createElement(Tag, {
     className: "pointer-events-none my-1",
     color: color,
     icon: prefix
   }, children)) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, prefix ? typeof prefix === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
-    name: prefix
+    name: prefix,
+    className: "!h-5 !w-5"
   }) : prefix : null, /*#__PURE__*/React__default.createElement("span", {
     className: "flex w-full justify-between"
   }, /*#__PURE__*/React__default.createElement("span", {
@@ -86,9 +87,10 @@ const Option = /*#__PURE__*/React__default.forwardRef(function Select2Option(pro
     className: "text-grey-700 -mt-1.5 mb-1.5 text-xs"
   }, description) : null), /*#__PURE__*/React__default.createElement("span", {
     className: "flex flex-col self-center"
-  }, postfix ? typeof postfix === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
-    name: postfix
-  }) : postfix : null)))), popover ? (/*#__PURE__*/React__default.createElement(IconButton, {
+  }, postfix ? typeof postfix === 'string' ? (/*#__PURE__*/React__default.createElement(Icon, {
+    name: postfix,
+    className: "!h-5 !w-5"
+  })) : postfix : null)))), popover ? (/*#__PURE__*/React__default.createElement(IconButton, {
     icon: "ellipsis-vertical",
     appearance: "discrete",
     className: cn('group-aria-current:visible invisible -mr-1 ml-auto !h-5 min-h-[theme(spacing.6)] !w-5 min-w-[theme(spacing.6)] hover:!bg-black/[.08] focus:!shadow-none group-hover:visible', {

package/dist/esm/packages/taco/src/components/Select2/components/Option.js.map

@@ -1 +1 @@
-{"version":3,"file":"Option.js","sources":["../../../../../../../../src/components/Select2/components/Option.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Icon, IconName } from '../../Icon/Icon';\nimport { Tag } from '../../Tag/Tag';\nimport { isAriaSelectionKey } from '../../../utils/aria';\nimport * as ListboxPrimitive from '../../../primitives/Listbox2/Listbox2';\nimport { createOptionClassName, getFontSize } from '../utilities';\nimport { useSelect2Context } from './Context';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { EditPopover } from './Edit';\nimport { isMobileDevice } from '../../../utils/device';\nimport { Color } from '../../../types';\nimport { FontSize } from '../../../types';\n\nexport type Select2OptionProps = Omit<ListboxPrimitive.Listbox2OptionProps, 'children' | 'prefix'> & {\n    children: string;\n    color?: Color;\n    description?: string;\n    fontSize?: FontSize;\n    prefix?: IconName | JSX.Element;\n    postfix?: IconName | JSX.Element;\n    textValue?: string;\n};\n\nexport const Option = React.forwardRef<HTMLDivElement, Select2OptionProps>(function Select2Option(props, ref) {\n    const { children, color, description, prefix, postfix, className: cName, ...otherProps } = props;\n    const {\n        fontSize,\n        listboxRef,\n        multiple,\n        onDelete,\n        onEdit,\n        ref: selectRef,\n        setOpen,\n        shouldPauseHoverState,\n        tags,\n        value,\n    } = useSelect2Context();\n    const className = cn(createOptionClassName(shouldPauseHoverState), getFontSize(fontSize), cName);\n\n    const hasValue = Array.isArray(value) ? !!value.length : value !== undefined;\n    const isTag = tags && !!color;\n\n    const handleClick = () => {\n        if (!multiple) {\n            setOpen(false);\n        } else {\n            selectRef.current?.focus();\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        if (isAriaSelectionKey(event)) {\n            if (!multiple || event.key === 'Tab') {\n                setOpen(false);\n            }\n        }\n    };\n\n    const isEmptyOption = children !== '';\n\n    const popover =\n        isEmptyOption && (onEdit || onDelete)\n            ? popoverProps => (\n                  <EditPopover\n                      {...popoverProps}\n                      color={props.color}\n                      key={props.textValue ?? String(props.children)}\n                      text={props.textValue ?? String(props.children)}\n                      value={props.value}\n                  />\n              )\n            : undefined;\n\n    return (\n        <ListboxPrimitive.Option {...otherProps} className={className} onClick={handleClick} onKeyDown={handleKeyDown} ref={ref}>\n            {hasValue ? (\n                <Icon name=\"tick\" className=\"pointer-events-none invisible -mx-0.5 !h-4 !w-4 group-aria-selected:visible\" />\n            ) : null}\n\n            {isTag ? (\n                <Tag className=\"pointer-events-none my-1\" color={color} icon={prefix}>\n                    {children}\n                </Tag>\n            ) : (\n                <>\n                    {prefix ? typeof prefix === 'string' ? <Icon name={prefix} /> : prefix : null}\n                    <span className=\"flex w-full justify-between\">\n                        <span className=\"flex flex-col\">\n                            <span>{children}</span>\n                            {description ? <span className=\"text-grey-700 -mt-1.5 mb-1.5 text-xs\">{description}</span> : null}\n                        </span>\n                        <span className=\"flex flex-col self-center\">\n                            {postfix ? typeof postfix === 'string' ? <Icon name={postfix} /> : postfix : null}\n                        </span>\n                    </span>\n                </>\n            )}\n            {popover ? (\n                <IconButton\n                    icon=\"ellipsis-vertical\"\n                    appearance=\"discrete\"\n                    className={cn(\n                        'group-aria-current:visible invisible -mr-1 ml-auto !h-5 min-h-[theme(spacing.6)] !w-5 min-w-[theme(spacing.6)] hover:!bg-black/[.08] focus:!shadow-none group-hover:visible',\n                        {\n                            '!visible': isMobileDevice(window?.navigator),\n                        }\n                    )}\n                    onClick={event => {\n                        event.stopPropagation();\n                        listboxRef?.current?.setActiveIndexByElement(event.currentTarget.parentElement as HTMLDivElement);\n                    }}\n                    popover={popover}\n                    tabIndex={-1}\n                />\n            ) : null}\n        </ListboxPrimitive.Option>\n    );\n});\n"],"names":["Option","React","forwardRef","Select2Option","props","ref","children","color","description","prefix","postfix","className","cName","otherProps","fontSize","listboxRef","multiple","onDelete","onEdit","selectRef","setOpen","shouldPauseHoverState","tags","value","useSelect2Context","cn","createOptionClassName","getFontSize","hasValue","Array","isArray","length","undefined","isTag","handleClick","_selectRef$current","current","focus","handleKeyDown","event","isAriaSelectionKey","key","isEmptyOption","popover","popoverProps","_props$textValue","_props$textValue2","EditPopover","textValue","String","text","ListboxPrimitive","onClick","onKeyDown","Icon","name","Tag","icon","IconButton","appearance","isMobileDevice","_window","window","navigator","stopPropagation","_listboxRef$current","setActiveIndexByElement","currentTarget","parentElement","tabIndex"],"mappings":"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"}
+{"version":3,"file":"Option.js","sources":["../../../../../../../../src/components/Select2/components/Option.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Icon, IconName } from '../../Icon/Icon';\nimport { Tag } from '../../Tag/Tag';\nimport { isAriaSelectionKey } from '../../../utils/aria';\nimport * as ListboxPrimitive from '../../../primitives/Listbox2/Listbox2';\nimport { createOptionClassName, getFontSize } from '../utilities';\nimport { useSelect2Context } from './Context';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { EditPopover } from './Edit';\nimport { isMobileDevice } from '../../../utils/device';\nimport { Color } from '../../../types';\nimport { FontSize } from '../../../types';\n\nexport type Select2OptionProps = Omit<ListboxPrimitive.Listbox2OptionProps, 'children' | 'prefix'> & {\n    children: string | JSX.Element;\n    color?: Color;\n    description?: string;\n    fontSize?: FontSize;\n    prefix?: IconName | JSX.Element;\n    postfix?: IconName | JSX.Element;\n    textValue?: string;\n};\n\nexport const Option = React.forwardRef<HTMLDivElement, Select2OptionProps>(function Select2Option(props, ref) {\n    const { children, color, description, prefix, postfix, className: cName, ...otherProps } = props;\n    const {\n        fontSize,\n        listboxRef,\n        multiple,\n        onDelete,\n        onEdit,\n        ref: selectRef,\n        setOpen,\n        shouldPauseHoverState,\n        tags,\n        value,\n    } = useSelect2Context();\n    const className = cn(createOptionClassName(shouldPauseHoverState), getFontSize(fontSize), cName);\n\n    const hasValue = Array.isArray(value) ? !!value.length : value !== undefined;\n    const isTag = tags && !!color;\n\n    const handleClick = () => {\n        if (!multiple) {\n            setOpen(false);\n        } else {\n            selectRef.current?.focus();\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        if (isAriaSelectionKey(event)) {\n            if (!multiple || event.key === 'Tab') {\n                setOpen(false);\n            }\n        }\n    };\n\n    const isEmptyOption = children !== '';\n\n    const popover =\n        isEmptyOption && (onEdit || onDelete)\n            ? popoverProps => (\n                  <EditPopover\n                      {...popoverProps}\n                      color={props.color}\n                      key={props.textValue ?? String(props.children)}\n                      text={props.textValue ?? String(props.children)}\n                      value={props.value}\n                  />\n              )\n            : undefined;\n\n    return (\n        <ListboxPrimitive.Option {...otherProps} className={className} onClick={handleClick} onKeyDown={handleKeyDown} ref={ref}>\n            {hasValue ? (\n                <Icon name=\"tick\" className=\"pointer-events-none invisible -mx-0.5 !h-4 !w-4 group-aria-selected:visible\" />\n            ) : null}\n\n            {typeof children !== 'string' ? (\n                <span>{children}</span>\n            ) : isTag ? (\n                <Tag className=\"pointer-events-none my-1\" color={color} icon={prefix}>\n                    {children}\n                </Tag>\n            ) : (\n                <>\n                    {prefix ? typeof prefix === 'string' ? <Icon name={prefix} className=\"!h-5 !w-5\" /> : prefix : null}\n                    <span className=\"flex w-full justify-between\">\n                        <span className=\"flex flex-col\">\n                            <span>{children}</span>\n                            {description ? <span className=\"text-grey-700 -mt-1.5 mb-1.5 text-xs\">{description}</span> : null}\n                        </span>\n                        <span className=\"flex flex-col self-center\">\n                            {postfix ? (\n                                typeof postfix === 'string' ? (\n                                    <Icon name={postfix} className=\"!h-5 !w-5\" />\n                                ) : (\n                                    postfix\n                                )\n                            ) : null}\n                        </span>\n                    </span>\n                </>\n            )}\n            {popover ? (\n                <IconButton\n                    icon=\"ellipsis-vertical\"\n                    appearance=\"discrete\"\n                    className={cn(\n                        'group-aria-current:visible invisible -mr-1 ml-auto !h-5 min-h-[theme(spacing.6)] !w-5 min-w-[theme(spacing.6)] hover:!bg-black/[.08] focus:!shadow-none group-hover:visible',\n                        {\n                            '!visible': isMobileDevice(window?.navigator),\n                        }\n                    )}\n                    onClick={event => {\n                        event.stopPropagation();\n                        listboxRef?.current?.setActiveIndexByElement(event.currentTarget.parentElement as HTMLDivElement);\n                    }}\n                    popover={popover}\n                    tabIndex={-1}\n                />\n            ) : null}\n        </ListboxPrimitive.Option>\n    );\n});\n"],"names":["Option","React","forwardRef","Select2Option","props","ref","children","color","description","prefix","postfix","className","cName","otherProps","fontSize","listboxRef","multiple","onDelete","onEdit","selectRef","setOpen","shouldPauseHoverState","tags","value","useSelect2Context","cn","createOptionClassName","getFontSize","hasValue","Array","isArray","length","undefined","isTag","handleClick","_selectRef$current","current","focus","handleKeyDown","event","isAriaSelectionKey","key","isEmptyOption","popover","popoverProps","_props$textValue","_props$textValue2","EditPopover","textValue","String","text","ListboxPrimitive","onClick","onKeyDown","Icon","name","Tag","icon","IconButton","appearance","isMobileDevice","_window","window","navigator","stopPropagation","_listboxRef$current","setActiveIndexByElement","currentTarget","parentElement","tabIndex"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Select2/components/Trigger.js

@@ -135,7 +135,7 @@ const Single = /*#__PURE__*/React__default.forwardRef(function Select2TriggerSin
     readOnly,
     tags
   } = useSelect2Context();
-  const contentClassName = cn('truncate items-center gap-1');
+  const contentClassName = cn('truncate flex items-center gap-1');
   const currentValue = children.find(matchesValue(value));
   let output;
   if (placeholder && currentValue === undefined) {
@@ -145,13 +145,13 @@ const Single = /*#__PURE__*/React__default.forwardRef(function Select2TriggerSin
     }, placeholder);
   } else if (currentValue) {
     if (tags && emptyValue !== value) {
-      output = /*#__PURE__*/React__default.createElement(Tag, {
+      if (typeof currentValue.props.children === 'string') output = /*#__PURE__*/React__default.createElement(Tag, {
         className: "truncate",
         color: currentValue.props.color,
         disabled: disabled,
         icon: currentValue.props.prefix,
         readOnly: readOnly
-      }, currentValue.props.children);
+      }, currentValue.props.children);else output = currentValue.props.children;
     } else {
       output = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, currentValue.props.prefix ? typeof currentValue.props.prefix === 'string' ? (/*#__PURE__*/React__default.createElement(Icon, {
         name: currentValue.props.prefix,
@@ -202,7 +202,7 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
     }, valuesAsChildren.length === 0 ? (/*#__PURE__*/React__default.createElement(Placeholder, {
       disabled: disabled,
       readOnly: readOnly
-    }, placeholder)) : valuesAsChildren.map(child => (/*#__PURE__*/React__default.createElement(Tag, {
+    }, placeholder)) : valuesAsChildren.map(child => typeof child.props.children === 'string' ? (/*#__PURE__*/React__default.createElement(Tag, {
       key: String(child.props.value),
       className: "truncate",
       color: tags ? child.props.color : undefined,
@@ -216,7 +216,23 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
         }
       },
       readOnly: readOnly
-    }, child.props.children)))));
+    }, child.props.children)) : (/*#__PURE__*/React__default.cloneElement(child.props.children, {
+      key: String(child.props.value),
+      className: '!pr-0 !pl-1.5',
+      children: (/*#__PURE__*/React__default.createElement("span", {
+        className: "flex items-center"
+      }, child.props.children.props.children, /*#__PURE__*/React__default.createElement(Icon, {
+        name: "close",
+        onClick: event => {
+          event === null || event === void 0 ? void 0 : event.stopPropagation();
+          event === null || event === void 0 ? void 0 : event.preventDefault();
+          if (!disabled && !readOnly) {
+            setValue(child.props.value);
+          }
+        },
+        className: "ml-0.5 !h-5 !w-5 shrink-0 cursor-pointer rounded-r p-0.5 hover:bg-black/5"
+      })))
+    })))));
   } else {
     content = /*#__PURE__*/React__default.createElement(MultipleValue, {
       onClick: forwardClick,
@@ -247,6 +263,18 @@ const MultipleValue = ({
   } = useSelect2Context();
   const [contentRef, setContentRef] = React__default.useState(null);
   const boundaryIndex = contentRef ? getIndexOfFirstChildOverflowingParent(contentRef, 30) : undefined;
+  // Retrieves the relevant text content from any JSX.Element passed as a select option, handling nested elements, arrays, and direct text
+  const getTooltipTitle = child => {
+    const children = child.props.children;
+    if (typeof children === 'string') return children;
+    if (typeof children.props.children === 'string') {
+      return children.props.children;
+    }
+    if (Array.isArray(children.props.children)) {
+      return children.props.children.filter(item => typeof item === 'string');
+    }
+    return '';
+  };
   return /*#__PURE__*/React__default.createElement("div", {
     className: "relative flex w-full items-center gap-1 overflow-hidden",
     onClick: onClick
@@ -257,26 +285,35 @@ const MultipleValue = ({
     disabled: disabled,
     readOnly: readOnly
   }, placeholder)) : valuesAsChildren.map((child, index) => {
-    const tag = /*#__PURE__*/React__default.createElement(Tag, {
-      key: String(child.props.value),
+    const classNames = {
+      truncate: index === boundaryIndex,
+      hidden: boundaryIndex !== undefined && boundaryIndex !== null ? index > boundaryIndex : false
+    };
+    let output;
+    if (typeof child.props.children === 'string') {
+      output = /*#__PURE__*/React__default.createElement(Tag, {
+        key: String(child.props.value),
+        className: cn('cursor-pointer', classNames),
+        color: tags ? child.props.color : undefined,
+        disabled: disabled,
+        icon: child.props.prefix,
+        readOnly: readOnly
+      }, child.props.children);
+    } else output = /*#__PURE__*/React__default.cloneElement(child.props.children, {
       className: cn('cursor-pointer', {
-        truncate: index === boundaryIndex,
-        hidden: boundaryIndex !== undefined && boundaryIndex !== null ? index > boundaryIndex : false
-      }),
-      color: tags ? child.props.color : undefined,
-      disabled: disabled,
-      icon: child.props.prefix,
-      readOnly: readOnly
-    }, child.props.children);
+        'shrink-0': index !== boundaryIndex
+      }, classNames),
+      key: String(child.props.value)
+    });
     if (index === boundaryIndex) {
       return /*#__PURE__*/React__default.createElement(Tooltip, {
         key: String(child.props.value),
-        title: String(child.props.children)
-      }, tag);
+        title: String(getTooltipTitle(child))
+      }, output);
     }
-    return tag;
+    return output;
   })), boundaryIndex !== undefined && boundaryIndex !== null && boundaryIndex < valuesAsChildren.length - 1 ? (/*#__PURE__*/React__default.createElement(Tooltip, {
-    title: valuesAsChildren.slice(boundaryIndex + 1).map(child => child ? String(child.props.children) : '').join(', ')
+    title: valuesAsChildren.slice(boundaryIndex + 1).map(child => child ? String(getTooltipTitle(child)) : '').join(', ')
   }, /*#__PURE__*/React__default.createElement(Badge, {
     className: "flex-shrink-0"
   }, "+", valuesAsChildren.length - (boundaryIndex + 1)))) : null);