@economic/taco 2.53.2 → 2.55.0-EC-64018.0

package/dist/components/Table3/components/Columns/Cell/EditingControlCell.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import { TableCellRendererProps } from '../../../../../primitives/Table/Core/types';
-export declare function EditingControlCell<TType = unknown>(props: TableCellRendererProps<TType>): JSX.Element;
+export declare function EditingControlCell<TType = unknown>(props: TableCellRendererProps<TType>): React.JSX.Element;

package/dist/components/Table3/components/Columns/Internal/EditingActionsMenu.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 declare type EditingActionsMenuProps = {
     hasChanges: boolean;
     hasErrors: boolean;
@@ -6,5 +6,5 @@ declare type EditingActionsMenuProps = {
     onEditingSave: () => Promise<void>;
     isLastRow: boolean;
 };
-export declare function EditingActionsMenu(props: EditingActionsMenuProps): JSX.Element;
+export declare function EditingActionsMenu(props: EditingActionsMenuProps): React.JSX.Element;
 export {};

package/dist/components/Table3/components/Editing/Alert.d.ts

@@ -8,5 +8,5 @@ declare type AlertProps<TType = unknown> = Omit<BaseAlertProps, 'children'> & {
     table: ReactTable<TType>;
     tableRef: React.RefObject<TableRef>;
 };
-export declare function Alert<TType = unknown>(props: AlertProps<TType>): JSX.Element;
+export declare function Alert<TType = unknown>(props: AlertProps<TType>): React.JSX.Element;
 export {};

package/dist/components/Table3/components/Editing/DiscardChangesConfirmationDialog.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 import { DialogProps } from '../../../Dialog/Dialog';
 declare type DiscardChangesConfirmationDialogProps = Partial<DialogProps> & {
     onDiscard: () => void;
 };
-export declare function DiscardChangesConfirmationDialog(props: DiscardChangesConfirmationDialogProps): JSX.Element;
+export declare function DiscardChangesConfirmationDialog(props: DiscardChangesConfirmationDialogProps): React.JSX.Element;
 export {};

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

@@ -8,5 +8,5 @@ declare type CreateNewRowProps<TType = unknown> = {
     table: ReactTable<TType>;
     tableMeta: ReactTableMeta<TType>;
 };
-export declare function CreateNewRow<TType = unknown>(props: CreateNewRowProps<TType>): JSX.Element;
+export declare function CreateNewRow<TType = unknown>(props: CreateNewRowProps<TType>): React.JSX.Element;
 export {};

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

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import React from 'react';
 import { Table as ReactTable } from '@tanstack/react-table';
 declare type SaveStatusProps<TType = unknown> = {
     rowId: string;
     table: ReactTable<TType>;
 };
-export declare function SaveStatus<TType = unknown>(props: SaveStatusProps<TType>): JSX.Element;
+export declare function SaveStatus<TType = unknown>(props: SaveStatusProps<TType>): React.JSX.Element;
 export {};

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

@@ -8,5 +8,5 @@ declare type TemporaryRowProps<TType = unknown> = {
     tableMeta: ReactTableMeta<TType>;
     tableRef: React.RefObject<TableRef>;
 };
-export declare function TemporaryRow<TType = unknown>(props: TemporaryRowProps<TType>): JSX.Element;
+export declare function TemporaryRow<TType = unknown>(props: TemporaryRowProps<TType>): React.JSX.Element;
 export {};

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

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import { DisplayRowProps } from '../../../../primitives/Table/Core/components/Row/BuiltIns/DisplayRow';
-export declare function Row<TType = unknown>(props: DisplayRowProps<TType>): JSX.Element;
+export declare function Row<TType = unknown>(props: DisplayRowProps<TType>): React.JSX.Element;

package/dist/components/Table3/components/Toolbar/Editing/Editing.d.ts

@@ -4,5 +4,5 @@ declare type EditingProps<TType = unknown> = React.HTMLAttributes<HTMLButtonElem
     scrollToIndex: any;
     table: ReactTable<TType>;
 };
-export declare function Editing<TType = unknown>(props: EditingProps<TType>): JSX.Element;
+export declare function Editing<TType = unknown>(props: EditingProps<TType>): React.JSX.Element;
 export {};

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

@@ -9,11 +9,11 @@ export declare type TagProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'chil
     readOnly?: boolean;
     onDelete?: (event: React.MouseEvent<SVGSVGElement>) => void;
 };
-export declare const Tag: React.ForwardRefExoticComponent<Pick<React.HTMLAttributes<HTMLSpanElement>, "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" | "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" | "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"> & {
+export declare const Tag: React.ForwardRefExoticComponent<Pick<React.HTMLAttributes<HTMLSpanElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "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-rowindextext" | "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" | "onResize" | "onResizeCapture" | "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" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
     children: string;
     color?: "green" | "yellow" | "red" | "blue" | "purple" | "brown" | "pink" | "orange" | "grey" | "transparent" | undefined;
     disabled?: boolean | undefined;
-    icon?: "id" | 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" | "autopay-paused" | "autopay" | "autotext-insert" | "autotext" | "basic-tabs" | "basic" | "bell-solid" | "book" | "booking" | "budget" | "calendar" | "cash-account" | "cash-reports" | "chart-area" | "chart-bar" | "chart-line" | "chart-pie" | "chart-table" | "chat-solid" | "chat" | "chevron-down-double" | "chevron-down-solid" | "chevron-down" | "chevron-left-double" | "chevron-left-solid" | "chevron-left" | "chevron-right-double" | "chevron-right-solid" | "chevron-right" | "chevron-up-double" | "chevron-up-solid" | "chevron-up" | "circle-close" | "circle-information" | "circle-minus" | "circle-plus" | "circle-questionmark" | "circle-tick" | "circle-warning" | "clamp-open" | "clamp" | "close" | "column-freeze" | "column-unfreeze" | "columns" | "connection-enable" | "connection-revoke" | "contacts" | "copy" | "courses" | "credit" | "delete-permanently" | "delete" | "depecriate" | "developer" | "distribution-template" | "document-approve" | "document-create-entry" | "document-cut" | "document-error" | "document-isolate-page" | "document-merge" | "document-move" | "document-preview" | "document-received" | "document-rejected-request" | "document-signed-solid" | "document-signed" | "document-split" | "document-time" | "document" | "download" | "drag" | "e-copedia" | "edit-simple" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "entries-on-account" | "entries-open" | "entries-warning" | "entry-type-customer-invoice" | "entry-type-customer-payment" | "entry-type-journal-entry" | "entry-type-manual-customer-invoice" | "entry-type-supplier-invoice" | "entry-type-supplier-payment" | "envelope-approved" | "envelope-solid" | "envelope" | "expand-view" | "expenses" | "experiment" | "export-to-excel" | "export-to-pdf" | "export" | "eye-off" | "eye-on" | "filter-solid" | "filter" | "font-size" | "graph-solid" | "hash" | "height-extra-tall" | "height-medium" | "height-short" | "height-tall" | "house-solid" | "house" | "images" | "import" | "inbox-einvoicing" | "inbox-scanning" | "inbox-smart" | "inbox" | "info" | "inventory-matrix" | "inventory" | "journal-pro" | "layout-both" | "layout-first" | "layout-last" | "layout-none" | "layout" | "ledger-card-customer-reminder" | "ledger-card-manual-customer-invoice" | "ledger-card-obsolete-stock" | "ledger-card-opening-entry" | "ledger-card-reserved-entry" | "ledger-card-shrinkage-pilferage" | "ledger-card-stock-adjustment" | "ledger-card-transferred-opening-entry" | "ledger-card" | "lightbulb" | "line" | "link-external" | "list-bulleted" | "list-search" | "list" | "location" | "lock-open" | "lock" | "log-out" | "log" | "market" | "mastercard-os" | "match-amount" | "match-entries" | "menu" | "mileage" | "modal-resize" | "modal-shrink" | "more-solid" | "more" | "move" | "navigation-list" | "note-follow-up" | "note-read" | "note" | "november-first" | "numbers" | "partner-api" | "payment-paid" | "payment-unpaid" | "period" | "person-change" | "person-minus" | "person-plus" | "person-solid" | "person-tick" | "person" | "phone-solid" | "phone" | "play" | "plus-minus" | "print" | "process-payment" | "product-ledger-card" | "profile" | "project-cards" | "projects" | "question-mark-bold" | "question-mark" | "quicklinks" | "rating-bankruptcy" | "rating-payment-problems" | "reconciled" | "refresh" | "report-solid" | "report" | "restore" | "rotate-left" | "rotate-right" | "sales" | "search-bold" | "search" | "secure-tick" | "secure" | "settings-solid" | "settings" | "shortcuts" | "show-all" | "show-less" | "show-more" | "show-template" | "sliders" | "smartpay" | "sort-by" | "star-solid" | "star" | "subscriptions" | "system-entries" | "tag" | "template-override" | "templates" | "thumb-both" | "thumb-down-solid" | "thumb-down" | "thumb-up-solid" | "thumb-up" | "tick-bold" | "tick" | "time" | "transfer-cancel" | "transfer-locked" | "transfer" | "undo" | "undock" | "unreconciled" | "wallet" | "warning" | "webshop" | "website" | "workflow-template-basic" | "workflow" | "zoom" | undefined;
+    icon?: "id" | React.ReactElement<IconProps, string | ((props: any, deprecatedLegacyContext?: any) => React.ReactElement<any, any> | null) | (new (props: any, deprecatedLegacyContext?: 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" | "autopay-paused" | "autopay" | "autotext-insert" | "autotext" | "basic-tabs" | "basic" | "bell-solid" | "book" | "booking" | "budget" | "calendar" | "cash-account" | "cash-reports" | "chart-area" | "chart-bar" | "chart-line" | "chart-pie" | "chart-table" | "chat-solid" | "chat" | "chevron-down-double" | "chevron-down-solid" | "chevron-down" | "chevron-left-double" | "chevron-left-solid" | "chevron-left" | "chevron-right-double" | "chevron-right-solid" | "chevron-right" | "chevron-up-double" | "chevron-up-solid" | "chevron-up" | "circle-close" | "circle-information" | "circle-minus" | "circle-plus" | "circle-questionmark" | "circle-tick" | "circle-warning" | "clamp-open" | "clamp" | "close" | "column-freeze" | "column-unfreeze" | "columns" | "connection-enable" | "connection-revoke" | "contacts" | "copy" | "courses" | "credit" | "delete-permanently" | "delete" | "depecriate" | "developer" | "distribution-template" | "document-approve" | "document-create-entry" | "document-cut" | "document-error" | "document-isolate-page" | "document-merge" | "document-move" | "document-preview" | "document-received" | "document-rejected-request" | "document-signed-solid" | "document-signed" | "document-split" | "document-time" | "document" | "download" | "drag" | "e-copedia" | "edit-simple" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "entries-on-account" | "entries-open" | "entries-warning" | "entry-type-customer-invoice" | "entry-type-customer-payment" | "entry-type-journal-entry" | "entry-type-manual-customer-invoice" | "entry-type-supplier-invoice" | "entry-type-supplier-payment" | "envelope-approved" | "envelope-solid" | "envelope" | "expand-view" | "expenses" | "experiment" | "export-to-excel" | "export-to-pdf" | "export" | "eye-off" | "eye-on" | "filter-solid" | "filter" | "font-size" | "graph-solid" | "hash" | "height-extra-tall" | "height-medium" | "height-short" | "height-tall" | "house-solid" | "house" | "images" | "import" | "inbox-einvoicing" | "inbox-scanning" | "inbox-smart" | "inbox" | "info" | "inventory-matrix" | "inventory" | "journal-pro" | "layout-both" | "layout-first" | "layout-last" | "layout-none" | "layout" | "ledger-card-customer-reminder" | "ledger-card-manual-customer-invoice" | "ledger-card-obsolete-stock" | "ledger-card-opening-entry" | "ledger-card-reserved-entry" | "ledger-card-shrinkage-pilferage" | "ledger-card-stock-adjustment" | "ledger-card-transferred-opening-entry" | "ledger-card" | "lightbulb" | "line" | "link-external" | "list-bulleted" | "list-search" | "list" | "location" | "lock-open" | "lock" | "log-out" | "log" | "market" | "mastercard-os" | "match-amount" | "match-entries" | "menu" | "mileage" | "modal-resize" | "modal-shrink" | "more-solid" | "more" | "move" | "navigation-list" | "note-follow-up" | "note-read" | "note" | "november-first" | "numbers" | "partner-api" | "payment-paid" | "payment-unpaid" | "period" | "person-change" | "person-minus" | "person-plus" | "person-solid" | "person-tick" | "person" | "phone-solid" | "phone" | "play" | "plus-minus" | "print" | "process-payment" | "product-ledger-card" | "profile" | "project-cards" | "projects" | "question-mark-bold" | "question-mark" | "quicklinks" | "rating-bankruptcy" | "rating-payment-problems" | "reconciled" | "refresh" | "report-solid" | "report" | "restore" | "rotate-left" | "rotate-right" | "sales" | "search-bold" | "search" | "secure-tick" | "secure" | "settings-solid" | "settings" | "shortcuts" | "show-all" | "show-less" | "show-more" | "show-template" | "sliders" | "smartpay" | "sort-by" | "star-solid" | "star" | "subscriptions" | "system-entries" | "tag" | "template-override" | "templates" | "thumb-both" | "thumb-down-solid" | "thumb-down" | "thumb-up-solid" | "thumb-up" | "tick-bold" | "tick" | "time" | "transfer-cancel" | "transfer-locked" | "transfer" | "undo" | "undock" | "unreconciled" | "wallet" | "warning" | "webshop" | "website" | "workflow-template-basic" | "workflow" | "zoom" | undefined;
     readOnly?: boolean | undefined;
     onDelete?: ((event: React.MouseEvent<SVGSVGElement>) => void) | undefined;
 } & React.RefAttributes<HTMLSpanElement>>;

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

@@ -12,7 +12,7 @@ export declare type TooltipProps = Omit<React.HTMLAttributes<HTMLDivElement>, 't
      */
     placement?: 'top' | 'right' | 'bottom' | 'left';
 };
-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"> & {
+export declare const Tooltip: React.ForwardRefExoticComponent<Pick<React.HTMLAttributes<HTMLDivElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "style" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "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-rowindextext" | "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" | "onResize" | "onResizeCapture" | "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" | "onPointerLeave" | "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 */

package/dist/components/Tour/Tour.d.ts

@@ -67,6 +67,6 @@ export declare type TourProps = {
     scrollOffset?: number;
 };
 export declare const Tour: {
-    (props: TourProps): JSX.Element;
+    (props: TourProps): React.JSX.Element;
     Step: (_props: TourStepProps) => null;
 };

package/dist/components/Truncate/Truncate.d.ts

@@ -3,4 +3,4 @@ export declare type TruncateProps = {
     children: React.ReactElement;
     tooltip: string;
 };
-export declare const Truncate: ({ children, tooltip }: TruncateProps) => JSX.Element;
+export declare const Truncate: ({ children, tooltip }: TruncateProps) => React.JSX.Element;

package/dist/esm/index.css

@@ -350,6 +350,77 @@
     stroke: currentColor;
 }
 
+/* Base styles */
+[data-taco='checkbox-container'] [data-taco='checkbox'] {
+    @apply border-grey-500;
+}
+
+[data-taco='checkbox-container'][data-focus-visible] [data-taco='checkbox'] {
+    @apply yt-focus;
+}
+
+/* Readonly state */
+[data-taco='checkbox-container'][data-readonly] [data-taco='checkbox'] {
+    @apply cursor-default;
+}
+
+/* Invalid state */
+[data-taco='checkbox-container'][data-invalid] [data-taco='checkbox'] {
+    @apply border-red-500;
+}
+
+/* Selected or indeterminate state */
+[data-taco='checkbox-container'][data-selected] [data-taco='checkbox'],
+[data-taco='checkbox-container'][data-indeterminate] [data-taco='checkbox'] {
+    @apply border-blue-500 bg-blue-500;
+}
+
+/* Selected or indeterminate AND invalid state */
+[data-taco='checkbox-container'][data-selected][data-invalid] [data-taco='checkbox'],
+[data-taco='checkbox-container'][data-indeterminate][data-invalid] [data-taco='checkbox'] {
+    @apply !border-red-500 !bg-red-500;
+}
+
+/* Disabled state */
+[data-taco='checkbox-container'][data-disabled] [data-taco='checkbox'] {
+    @apply border-grey-500/50 cursor-not-allowed;
+}
+
+[data-taco='checkbox-container'][data-disabled][data-invalid] [data-taco='checkbox'] {
+    @apply !border-red-500/50 !bg-red-500/50;
+}
+
+[data-taco='checkbox-container'][data-disabled][data-selected] [data-taco='checkbox'],
+[data-taco='checkbox-container'][data-disabled][data-indeterminate] [data-taco='checkbox'] {
+    @apply !bg-blue-500/50;
+}
+
+[data-taco='checkbox-container'][data-disabled][data-selected][data-invalid] [data-taco='checkbox'],
+[data-taco='checkbox-container'][data-disabled][data-indeterminate][data-invalid] [data-taco='checkbox'] {
+    @apply !bg-red-500/50 text-white;
+}
+
+/* Hover states (separate rules for clarity) */
+[data-taco='checkbox-container']:hover:not([data-disabled]):not([data-readonly]) [data-taco='checkbox'] {
+    @apply border-grey-700;
+}
+
+[data-taco='checkbox-container']:hover[data-selected]:not([data-disabled]):not([data-readonly]) [data-taco='checkbox'],
+[data-taco='checkbox-container']:hover[data-indeterminate]:not([data-disabled]):not([data-readonly]) [data-taco='checkbox'] {
+    @apply !border-blue-700 !bg-blue-700;
+}
+
+[data-taco='checkbox-container']:hover[data-invalid]:not([data-disabled]):not([data-readonly]) [data-taco='checkbox'] {
+    @apply !border-red-700;
+}
+
+[data-taco='checkbox-container']:hover[data-invalid][data-selected]:not([data-disabled]):not([data-readonly])
+    [data-taco='checkbox'],
+[data-taco='checkbox-container']:hover[data-invalid][data-indeterminate]:not([data-disabled]):not([data-readonly])
+    [data-taco='checkbox'] {
+    @apply !border-red-700 !bg-red-700;
+}
+
 [data-taco='scrollable-list'].yt-list--multiselect li:first-child {
     @apply border-grey-100 border-b-2 pl-4; /* Listbox max-height is dependant on this border-bottom-width value! */
 }
@@ -824,7 +895,7 @@ table[data-taco^='table'] td[data-cell-truncate='true'] [data-taco='textarea'] {
     @apply focus:absolute focus:overflow-y-auto;
 }
 
-table[data-taco^='table'] td label {
+table[data-taco^='table'] td label:not([data-taco='checkbox-label']) {
     @apply h-fit !min-h-fit w-full !pb-0;
 }
 
@@ -863,14 +934,14 @@ table[data-taco^='table'][data-table-font-size='small'] td [data-taco='spinner']
     @apply !h-4 !w-4;
 }
 
-table[data-taco^='table'][data-table-font-size='small'] td [data-taco='icon'],
+table[data-taco^='table'][data-table-font-size='small'] td [data-taco='icon']:not([data-taco='checkbox'] *),
 table[data-taco^='table'][data-table-font-size='small'] td [data-taco='spinner'] {
     @apply !-my-[3px];
 }
 
 table[data-taco^='table'][data-table-font-size='small'] td [data-taco='badge'],
 table[data-taco^='table'][data-table-font-size='small'] td [data-taco='badge-icon'],
-table[data-taco^='table'][data-table-font-size='small'] td [data-taco='icon'],
+table[data-taco^='table'][data-table-font-size='small'] td [data-taco='icon']:not([data-taco='checkbox'] *),
 table[data-taco^='table'][data-table-font-size='small'] td [data-taco='spinner'] {
     @apply !-my-0.5 !text-xs;
 }
@@ -999,7 +1070,7 @@ table[data-taco^='table'][data-table-font-size='medium'] td [data-taco='icon-but
     @apply !-my-1.5;
 }
 
-table[data-taco^='table'][data-table-font-size='medium'] td [data-taco='icon'] {
+table[data-taco^='table'][data-table-font-size='medium'] td [data-taco='icon']:not([data-taco='checkbox'] *) {
     @apply !-my-0.5;
 }
 
@@ -1084,7 +1155,7 @@ table[data-taco^='table'][data-table-font-size='large'] td [data-taco='icon-butt
     @apply !-my-1;
 }
 
-table[data-taco^='table'][data-table-font-size='large'] td [data-taco='icon'] {
+table[data-taco^='table'][data-table-font-size='large'] td [data-taco='icon']:not([data-taco='checkbox'] *) {
     @apply !-my-0.5;
 }
 

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

@@ -1,82 +1,60 @@
-import { forwardRef, createElement } from 'react';
+import { forwardRef, createElement, Fragment } from 'react';
 import cn from 'clsx';
 import { Icon } from '../Icon/Icon.js';
-import { Root, Indicator } from '@radix-ui/react-checkbox';
-import { useId } from '../../hooks/useId.js';
+import { useMergedRef } from '../../hooks/useMergedRef.js';
+import { Checkbox as Checkbox$1 } from 'react-aria-components';
 import { Spinner } from '../Spinner/Spinner.js';
 
 const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
   const {
     checked,
+    className,
+    defaultChecked,
     indeterminate,
+    readOnly,
     invalid,
-    label,
-    loading,
+    disabled,
+    required,
     onChange,
+    loading,
+    label,
+    onClick,
     ...otherProps
   } = props;
-  const id = useId(props.id);
-  const className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 focus-visible:yt-focus disabled:cursor-not-allowed text-white', {
+  // Converts the forwarded ref to an object ref, as required by RAC Checkbox.
+  const inputRef = useMergedRef(ref);
+  const checkboxContainerClassName = cn('group flex justify-center gap-2 data-[disabled]:text-grey-300 data-[disabled]:cursor-not-allowed');
+  // Styling for other complex, state-driven scenarios is managed directly within the styles.css file.
+  const checkboxClassName = cn('bg-white h-5 w-5 border rounded text-sm flex flex-shrink-0 text-white cursor-pointer', {
     'self-start': !!label,
     'mt-[0.1rem]': !label
-  }, invalid ? {
-    'border-red-500 hover:border-red-700 aria-checked:border-red-500 aria-checked-mixed:border-red-500 aria-checked:bg-red-500 aria-checked-mixed:bg-red-500 aria-checked:hover:border-red-700 aria-checked-mixed:hover:border-red-700 aria-checked:hover:bg-red-700 aria-checked-mixed:hover:bg-red-700': !props.disabled,
-    'border-red-500/50 aria-checked:wcag-red-500/50 aria-checked-mixed:wcag-red-500/50': props.disabled
-  } : {
-    'border-grey-500 hover:border-grey-700 aria-checked:border-blue-500 aria-checked-mixed:border-blue-500 aria-checked:bg-blue-500 aria-checked-mixed:bg-blue-500 aria-checked:hover:border-blue-700 aria-checked-mixed:hover:border-blue-700 aria-checked:hover:bg-blue-700 aria-checked-mixed:hover:bg-blue-700': !props.disabled,
-    'border-grey-500/50 aria-checked:bg-blue-500/50 aria-checked-mixed:bg-blue-500/50': props.disabled
-  }, props.className);
-  let handleChange;
-  if (onChange) {
-    handleChange = checked => onChange(checked === 'indeterminate' ? false : checked);
-  }
-  let labelledByProps = null;
-  if (label) {
-    labelledByProps = {
-      'aria-labelledby': `${id}-label`,
-      id
-    };
-  }
-  // the enter keyboard shortcut isn't supported by default, but we want it
-  const handleKeyDown = event => {
-    if (event.key === 'Enter') {
-      event.currentTarget.click();
-    }
-  };
-  const spinnerClassname = cn(
-  //Spinner is slightly bigger then 'line' and 'tick' icons, so making it 2px smaller from each side
-  "m-0.5 !h-[calc(100%-theme('spacing.1'))] !w-[calc(100%-theme('spacing.1'))]", {
-    'text-blue-500': !checked && !indeterminate
-  });
-  const element = /*#__PURE__*/createElement(Root, Object.assign({}, otherProps, labelledByProps, {
-    "aria-invalid": invalid ? 'true' : undefined,
+  }, className);
+  return /*#__PURE__*/createElement(Checkbox$1, Object.assign({}, otherProps, {
+    className: checkboxContainerClassName,
+    "data-taco": "checkbox-container",
+    defaultSelected: defaultChecked,
+    isDisabled: disabled,
+    isIndeterminate: indeterminate,
+    isInvalid: invalid,
+    isRequired: required,
+    isReadOnly: readOnly,
+    isSelected: checked,
+    inputRef: inputRef,
+    onChange: onChange
+  }), ({
+    isIndeterminate,
+    isSelected
+  }) => (/*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement("span", {
+    className: checkboxClassName,
     "data-taco": "checkbox",
-    checked: indeterminate ? 'indeterminate' : checked,
-    className: className,
-    onCheckedChange: handleChange,
-    onKeyDown: handleKeyDown,
-    ref: ref
-  }), loading ? (/*#__PURE__*/createElement(Spinner, {
-    className: spinnerClassname
-  })) : (/*#__PURE__*/createElement(Indicator, {
-    className: "flex h-full w-full"
-  }, /*#__PURE__*/createElement(Icon, {
-    name: indeterminate ? 'line' : 'tick',
+    onClick: onClick
+  }, loading ? (/*#__PURE__*/createElement(Spinner, {
+    className: "m-0.5 !h-[calc(100%-theme('spacing.1'))] !w-[calc(100%-theme('spacing.1'))] text-blue-500 group-data-[indeterminate]:text-white group-data-[selected]:text-white"
+  })) : (isIndeterminate || isSelected) && (/*#__PURE__*/createElement(Icon, {
+    "aria-hidden": true,
+    name: isIndeterminate ? 'line' : 'tick',
     className: "!h-full !w-full"
-  }))));
-  if (label) {
-    const labelContainerClassName = cn('flex items-center cursor-pointer gap-2', {
-      'cursor-not-allowed text-grey-300': props.disabled
-    });
-    return /*#__PURE__*/createElement("span", {
-      className: labelContainerClassName,
-      "data-taco": "checkbox-container"
-    }, element, /*#__PURE__*/createElement("label", {
-      htmlFor: id,
-      id: `${id}-label`
-    }, label));
-  }
-  return element;
+  }))), label)));
 });
 Checkbox.displayName = 'Checkbox';
 

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { Icon } from '../Icon/Icon';\nimport { useId } from '../../hooks/useId';\nimport { Spinner } from '../Spinner/Spinner';\n\ntype CheckedState = boolean | 'indeterminate';\n\ntype CheckboxBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\n    /**\n     * Indeterminate state should only be used with sub-checkboxes. The indeterminate state is shown if not all\n     * sub-checkboxes are selected. This only affects the style, changing the icon in the checkbox.\n     */\n    indeterminate?: boolean;\n    /* Whether the checkbox is in an invalid state */\n    invalid?: boolean;\n    /** Label for the checkbox */\n    label?: React.ReactNode;\n    /** Displays loading state in checkbox */\n    loading?: boolean;\n    /* Whether user input is required */\n    required?: boolean;\n};\n\nexport interface UncontrolledCheckboxProps extends CheckboxBaseProps {\n    checked?: never;\n    onChange?: never;\n    /* The default checked state (uncontrolled) */\n    defaultChecked?: boolean;\n}\n\nexport interface ControlledCheckboxProps extends CheckboxBaseProps {\n    defaultChecked?: never;\n    /* The current checked state (controlled) */\n    checked: boolean;\n    /* Handler called when the checked state changes */\n    onChange: (checked: boolean) => void;\n}\n\nexport type CheckboxProps = UncontrolledCheckboxProps | ControlledCheckboxProps;\n\nexport const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: React.Ref<HTMLButtonElement>) {\n    const { checked, indeterminate, invalid, label, loading, onChange, ...otherProps } = props;\n    const id = useId(props.id);\n\n    const className = cn(\n        'bg-white h-5 w-5 border rounded text-sm flex-shrink-0 focus-visible:yt-focus disabled:cursor-not-allowed text-white',\n        {\n            'self-start': !!label,\n            'mt-[0.1rem]': !label,\n        },\n        invalid\n            ? {\n                  'border-red-500 hover:border-red-700 aria-checked:border-red-500 aria-checked-mixed:border-red-500 aria-checked:bg-red-500 aria-checked-mixed:bg-red-500 aria-checked:hover:border-red-700 aria-checked-mixed:hover:border-red-700 aria-checked:hover:bg-red-700 aria-checked-mixed:hover:bg-red-700':\n                      !props.disabled,\n                  'border-red-500/50 aria-checked:wcag-red-500/50 aria-checked-mixed:wcag-red-500/50': props.disabled,\n              }\n            : {\n                  'border-grey-500 hover:border-grey-700 aria-checked:border-blue-500 aria-checked-mixed:border-blue-500 aria-checked:bg-blue-500 aria-checked-mixed:bg-blue-500 aria-checked:hover:border-blue-700 aria-checked-mixed:hover:border-blue-700 aria-checked:hover:bg-blue-700 aria-checked-mixed:hover:bg-blue-700':\n                      !props.disabled,\n                  'border-grey-500/50 aria-checked:bg-blue-500/50 aria-checked-mixed:bg-blue-500/50': props.disabled,\n              },\n        props.className\n    );\n\n    let handleChange: ((checked: CheckedState) => void) | undefined;\n\n    if (onChange) {\n        handleChange = (checked: CheckedState) => onChange(checked === 'indeterminate' ? false : checked);\n    }\n\n    let labelledByProps: Record<string, string> | null = null;\n\n    if (label) {\n        labelledByProps = {\n            'aria-labelledby': `${id}-label`,\n            id,\n        };\n    }\n\n    // the enter keyboard shortcut isn't supported by default, but we want it\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (event.key === 'Enter') {\n            event.currentTarget.click();\n        }\n    };\n\n    const spinnerClassname = cn(\n        //Spinner is slightly bigger then 'line' and 'tick' icons, so making it 2px smaller from each side\n        \"m-0.5 !h-[calc(100%-theme('spacing.1'))] !w-[calc(100%-theme('spacing.1'))]\",\n        { 'text-blue-500': !checked && !indeterminate }\n    );\n\n    const element = (\n        <CheckboxPrimitive.Root\n            {...otherProps}\n            {...labelledByProps}\n            aria-invalid={invalid ? 'true' : undefined}\n            data-taco=\"checkbox\"\n            checked={indeterminate ? 'indeterminate' : checked}\n            className={className}\n            onCheckedChange={handleChange}\n            onKeyDown={handleKeyDown}\n            ref={ref}>\n            {loading ? (\n                <Spinner className={spinnerClassname} />\n            ) : (\n                <CheckboxPrimitive.Indicator className=\"flex h-full w-full\">\n                    <Icon name={indeterminate ? 'line' : 'tick'} className=\"!h-full !w-full\" />\n                </CheckboxPrimitive.Indicator>\n            )}\n        </CheckboxPrimitive.Root>\n    );\n\n    if (label) {\n        const labelContainerClassName = cn('flex items-center cursor-pointer gap-2', {\n            'cursor-not-allowed text-grey-300': props.disabled,\n        });\n\n        return (\n            <span className={labelContainerClassName} data-taco=\"checkbox-container\">\n                {element}\n                <label htmlFor={id} id={`${id}-label`}>\n                    {label}\n                </label>\n            </span>\n        );\n    }\n\n    return element;\n});\nCheckbox.displayName = 'Checkbox';\n"],"names":["Checkbox","React","props","ref","checked","indeterminate","invalid","label","loading","onChange","otherProps","id","useId","className","cn","disabled","handleChange","labelledByProps","handleKeyDown","event","key","currentTarget","click","spinnerClassname","element","CheckboxPrimitive","undefined","onCheckedChange","onKeyDown","Spinner","Icon","name","labelContainerClassName","htmlFor","displayName"],"mappings":";;;;;;;MA0CaA,QAAQ,gBAAGC,UAAgB,CAAC,SAASD,QAAQA,CAACE,KAAoB,EAAEC,GAAiC;EAC9G,MAAM;IAAEC,OAAO;IAAEC,aAAa;IAAEC,OAAO;IAAEC,KAAK;IAAEC,OAAO;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGR,KAAK;EAC1F,MAAMS,EAAE,GAAGC,KAAK,CAACV,KAAK,CAACS,EAAE,CAAC;EAE1B,MAAME,SAAS,GAAGC,EAAE,CAChB,qHAAqH,EACrH;IACI,YAAY,EAAE,CAAC,CAACP,KAAK;IACrB,aAAa,EAAE,CAACA;GACnB,EACDD,OAAO,GACD;IACI,qSAAqS,EACjS,CAACJ,KAAK,CAACa,QAAQ;IACnB,mFAAmF,EAAEb,KAAK,CAACa;GAC9F,GACD;IACI,+SAA+S,EAC3S,CAACb,KAAK,CAACa,QAAQ;IACnB,kFAAkF,EAAEb,KAAK,CAACa;GAC7F,EACPb,KAAK,CAACW,SAAS,CAClB;EAED,IAAIG,YAA2D;EAE/D,IAAIP,QAAQ,EAAE;IACVO,YAAY,GAAIZ,OAAqB,IAAKK,QAAQ,CAACL,OAAO,KAAK,eAAe,GAAG,KAAK,GAAGA,OAAO,CAAC;;EAGrG,IAAIa,eAAe,GAAkC,IAAI;EAEzD,IAAIV,KAAK,EAAE;IACPU,eAAe,GAAG;MACd,iBAAiB,EAAE,GAAGN,EAAE,QAAQ;MAChCA;KACH;;;EAIL,MAAMO,aAAa,GAAIC,KAA6C;IAChE,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,EAAE;MACvBD,KAAK,CAACE,aAAa,CAACC,KAAK,EAAE;;GAElC;EAED,MAAMC,gBAAgB,GAAGT,EAAE;;EAEvB,6EAA6E,EAC7E;IAAE,eAAe,EAAE,CAACV,OAAO,IAAI,CAACC;GAAe,CAClD;EAED,MAAMmB,OAAO,gBACTvB,cAACwB,IAAsB,oBACff,UAAU,EACVO,eAAe;oBACLX,OAAO,GAAG,MAAM,GAAGoB,SAAS;iBAChC,UAAU;IACpBtB,OAAO,EAAEC,aAAa,GAAG,eAAe,GAAGD,OAAO;IAClDS,SAAS,EAAEA,SAAS;IACpBc,eAAe,EAAEX,YAAY;IAC7BY,SAAS,EAAEV,aAAa;IACxBf,GAAG,EAAEA;MACJK,OAAO,iBACJP,cAAC4B,OAAO;IAAChB,SAAS,EAAEU;IAAoB,kBAExCtB,cAACwB,SAA2B;IAACZ,SAAS,EAAC;kBACnCZ,cAAC6B,IAAI;IAACC,IAAI,EAAE1B,aAAa,GAAG,MAAM,GAAG,MAAM;IAAEQ,SAAS,EAAC;IAAoB,CACjD,CACjC,CAER;EAED,IAAIN,KAAK,EAAE;IACP,MAAMyB,uBAAuB,GAAGlB,EAAE,CAAC,wCAAwC,EAAE;MACzE,kCAAkC,EAAEZ,KAAK,CAACa;KAC7C,CAAC;IAEF,oBACId;MAAMY,SAAS,EAAEmB,uBAAuB;mBAAY;OAC/CR,OAAO,eACRvB;MAAOgC,OAAO,EAAEtB,EAAE;MAAEA,EAAE,EAAE,GAAGA,EAAE;OACxBJ,KAAK,CACF,CACL;;EAIf,OAAOiB,OAAO;AAClB,CAAC;AACDxB,QAAQ,CAACkC,WAAW,GAAG,UAAU;;;;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Checkbox as CheckboxPrimitive, CheckboxProps as CheckboxPrimitiveProps } from 'react-aria-components';\n\nimport { Icon } from '../Icon/Icon';\nimport { Spinner } from '../Spinner/Spinner';\nimport './styles.css';\nimport { useMergedRef } from '../../hooks/useMergedRef';\n\ntype CheckboxBaseProps = Omit<\n    CheckboxPrimitiveProps,\n    'onChange' | 'isDisabled' | 'isIndeterminate' | 'isInvalid' | 'isRequired' | 'isSelected' | 'isReadOnly' | 'defaultSelected'\n> & {\n    disabled?: boolean;\n    /**\n     * Indeterminate state should only be used with sub-checkboxes. The indeterminate state is shown if not all\n     * sub-checkboxes are selected. This only affects the style, changing the icon in the checkbox.\n     */\n    indeterminate?: boolean;\n    /* Whether the checkbox is in a read only state */\n    readOnly?: boolean;\n    /* Whether the checkbox is in an invalid state */\n    invalid?: boolean;\n    /** Label for the checkbox */\n    label?: React.ReactNode;\n    /** Displays loading state in checkbox */\n    loading?: boolean;\n    /* Whether user input is required */\n    required?: boolean;\n    onClick?: (event: React.MouseEvent<HTMLSpanElement>) => void;\n};\n\nexport interface UncontrolledCheckboxProps extends CheckboxBaseProps {\n    checked?: never;\n    onChange?: never;\n    /* The default checked state (uncontrolled) */\n    defaultChecked?: boolean;\n}\n\nexport interface ControlledCheckboxProps extends CheckboxBaseProps {\n    defaultChecked?: never;\n    /* The current checked state (controlled) */\n    checked: boolean;\n    /* Handler called when the checked state changes */\n    onChange: (checked: boolean) => void;\n}\n\nexport type CheckboxProps = UncontrolledCheckboxProps | ControlledCheckboxProps;\n\nexport const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: React.Ref<HTMLInputElement>) {\n    const {\n        checked,\n        className,\n        defaultChecked,\n        indeterminate,\n        readOnly,\n        invalid,\n        disabled,\n        required,\n        onChange,\n        loading,\n        label,\n        onClick,\n        ...otherProps\n    } = props;\n    // Converts the forwarded ref to an object ref, as required by RAC Checkbox.\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n\n    const checkboxContainerClassName = cn(\n        'group flex justify-center gap-2 data-[disabled]:text-grey-300 data-[disabled]:cursor-not-allowed'\n    );\n\n    // Styling for other complex, state-driven scenarios is managed directly within the styles.css file.\n    const checkboxClassName = cn(\n        'bg-white h-5 w-5 border rounded text-sm flex flex-shrink-0 text-white cursor-pointer',\n        {\n            'self-start': !!label,\n            'mt-[0.1rem]': !label,\n        },\n        className\n    );\n\n    return (\n        <CheckboxPrimitive\n            {...otherProps}\n            className={checkboxContainerClassName}\n            data-taco=\"checkbox-container\"\n            defaultSelected={defaultChecked}\n            isDisabled={disabled}\n            isIndeterminate={indeterminate}\n            isInvalid={invalid}\n            isRequired={required}\n            isReadOnly={readOnly}\n            isSelected={checked}\n            inputRef={inputRef}\n            onChange={onChange}>\n            {({ isIndeterminate, isSelected }) => (\n                <>\n                    <span className={checkboxClassName} data-taco=\"checkbox\" onClick={onClick}>\n                        {loading ? (\n                            <Spinner className=\"m-0.5 !h-[calc(100%-theme('spacing.1'))] !w-[calc(100%-theme('spacing.1'))] text-blue-500 group-data-[indeterminate]:text-white group-data-[selected]:text-white\" />\n                        ) : (\n                            (isIndeterminate || isSelected) && (\n                                <Icon aria-hidden name={isIndeterminate ? 'line' : 'tick'} className=\"!h-full !w-full\" />\n                            )\n                        )}\n                    </span>\n                    {label}\n                </>\n            )}\n        </CheckboxPrimitive>\n    );\n});\nCheckbox.displayName = 'Checkbox';\n"],"names":["Checkbox","React","props","ref","checked","className","defaultChecked","indeterminate","readOnly","invalid","disabled","required","onChange","loading","label","onClick","otherProps","inputRef","useMergedRef","checkboxContainerClassName","cn","checkboxClassName","CheckboxPrimitive","defaultSelected","isDisabled","isIndeterminate","isInvalid","isRequired","isReadOnly","isSelected","Spinner","Icon","name","displayName"],"mappings":";;;;;;;MAiDaA,QAAQ,gBAAGC,UAAgB,CAAC,SAASD,QAAQA,CAACE,KAAoB,EAAEC,GAAgC;EAC7G,MAAM;IACFC,OAAO;IACPC,SAAS;IACTC,cAAc;IACdC,aAAa;IACbC,QAAQ;IACRC,OAAO;IACPC,QAAQ;IACRC,QAAQ;IACRC,QAAQ;IACRC,OAAO;IACPC,KAAK;IACLC,OAAO;IACP,GAAGC;GACN,GAAGd,KAAK;;EAET,MAAMe,QAAQ,GAAGC,YAAY,CAAmBf,GAAG,CAAC;EAEpD,MAAMgB,0BAA0B,GAAGC,EAAE,CACjC,kGAAkG,CACrG;;EAGD,MAAMC,iBAAiB,GAAGD,EAAE,CACxB,sFAAsF,EACtF;IACI,YAAY,EAAE,CAAC,CAACN,KAAK;IACrB,aAAa,EAAE,CAACA;GACnB,EACDT,SAAS,CACZ;EAED,oBACIJ,cAACqB,UAAiB,oBACVN,UAAU;IACdX,SAAS,EAAEc,0BAA0B;iBAC3B,oBAAoB;IAC9BI,eAAe,EAAEjB,cAAc;IAC/BkB,UAAU,EAAEd,QAAQ;IACpBe,eAAe,EAAElB,aAAa;IAC9BmB,SAAS,EAAEjB,OAAO;IAClBkB,UAAU,EAAEhB,QAAQ;IACpBiB,UAAU,EAAEpB,QAAQ;IACpBqB,UAAU,EAAEzB,OAAO;IACnBa,QAAQ,EAAEA,QAAQ;IAClBL,QAAQ,EAAEA;MACT,CAAC;IAAEa,eAAe;IAAEI;GAAY,mBAC7B5B,2CACIA;IAAMI,SAAS,EAAEgB,iBAAiB;iBAAY,UAAU;IAACN,OAAO,EAAEA;KAC7DF,OAAO,iBACJZ,cAAC6B,OAAO;IAACzB,SAAS,EAAC;IAAqK,IAExL,CAACoB,eAAe,IAAII,UAAU,mBAC1B5B,cAAC8B,IAAI;;IAAaC,IAAI,EAAEP,eAAe,GAAG,MAAM,GAAG,MAAM;IAAEpB,SAAS,EAAC;IAAoB,CAEhG,CACE,EACNS,KAAK,CACP,CACN,CACe;AAE5B,CAAC;AACDd,QAAQ,CAACiC,WAAW,GAAG,UAAU;;;;"}

package/dist/esm/packages/taco/src/components/Combobox/useCombobox.js

@@ -37,22 +37,23 @@ const useCombobox = ({
   const data = useMemo(() => shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData, [shouldFilterData, inputValue, flattenedData]);
   // listbox/select change value _with_ the index, but combobox changes on select of an index (click/enter), so we need state
   const [currentIndex, setCurrentIndex] = useState(inputValue !== undefined ? getIndexFromValue(data, inputValue) : undefined);
-  const setInputValueByIndex = index => {
+  const setInputValueByIndex = (index, event) => {
     if (index !== undefined) {
       const option = data[index];
       if (option && !option.disabled) {
-        setInputValueByRef(inputRef.current, option.value, 'focusout');
+        const eventType = event !== null && event !== void 0 ? event : 'focusout';
+        setInputValueByRef(inputRef.current, option.value, eventType);
       }
     }
   };
-  const setCurrentValue = index => {
+  const setCurrentValue = (index, event) => {
     if (index === undefined) {
       return;
     }
     const option = data[index];
     // if the selected option is not already selected, trigger blur event
     if (option.value !== value) {
-      setInputValueByIndex(index);
+      setInputValueByIndex(index, event);
     } else {
       // if the selected option is already selected, refill input with its value
       setInputValue(convertToInputValue(value));
@@ -148,7 +149,8 @@ const useCombobox = ({
           }
         case 'Tab':
           {
-            setCurrentValue(currentIndex);
+            // default focusout will trigger onBlur and we don't want to trigger it twice
+            setCurrentValue(currentIndex, 'change');
             setOpen(false);
             return;
           }
@@ -163,7 +165,8 @@ const useCombobox = ({
               }
             }
             if (open) {
-              setCurrentValue(currentIndex);
+              // we need to focusout to trigger onBlur as we are not actually blurring the input
+              setCurrentValue(currentIndex, 'focusout');
               setOpen(false);
             }
             return;