@economic/taco 2.22.2 → 2.23.0

package/dist/components/OverflowGroup/OverflowGroup.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { ButtonProps } from '../Button/Button';
 export declare const OverflowGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
-    moreButton?: React.ReactElement<ButtonProps, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | undefined;
+    moreButton?: ((moreButtonText: string) => React.ReactElement<ButtonProps>) | undefined;
 } & React.RefAttributes<HTMLDivElement>>;

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

@@ -6,11 +6,13 @@ declare function Column<TType = unknown>(_: ReportColumnProps<TType>): null;
 declare function Group(_: ReportGroupProps): null;
 export declare const Report: (<TType = unknown>(props: (import("../../primitives/Table/types").useTableClientProps<TType> & {
     customSettings?: import("./types").ReportCustomSettingsRenderer | undefined;
+    emptyState?: import("./types").ReportEmptyStateRenderer | undefined;
     toolbarLeft?: JSX.Element | undefined;
     toolbarRight?: JSX.Element | undefined;
     toolbarPanel?: JSX.Element | undefined;
 } & React.RefAttributes<TableRef>) | (import("../../primitives/Table/types").useTableServerProps<TType> & {
     customSettings?: import("./types").ReportCustomSettingsRenderer | undefined;
+    emptyState?: import("./types").ReportEmptyStateRenderer | undefined;
     toolbarLeft?: JSX.Element | undefined;
     toolbarRight?: JSX.Element | undefined;
     toolbarPanel?: JSX.Element | undefined;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ReportEmptyStateRenderer } from '../../types';
+declare type EmptyStateProps = React.HTMLAttributes<HTMLTableSectionElement> & {
+    emptyState?: ReportEmptyStateRenderer;
+};
+export declare function EmptyStateBody(props: EmptyStateProps): JSX.Element;
+export {};

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

@@ -13,6 +13,6 @@ export declare function getCellAttributes<TType = unknown>(cell: ReactTableCell<
     className: string | undefined;
     style: {};
 };
-export declare function useSearchHighlighting<TType = unknown>(cell: ReactTableCell<TType, unknown>, index: number, ref: React.RefObject<HTMLTableCellElement>): true | "current" | undefined;
+export declare function useSearchHighlighting<TType = unknown>(cell: ReactTableCell<TType, unknown>, cellIndex: number, ref: React.RefObject<HTMLTableCellElement>): true | "current" | undefined;
 export declare function getCurrentRowCellElement(index: number, tableEl: HTMLElement): Element | null;
 export declare function scrollColumnIntoView(columnIndex: number, frozenColumnIndex: number, column: HTMLElement, tableEl: HTMLElement): void;

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

@@ -2,8 +2,10 @@
 import { TableColumnProps, TableGroupProps, TableSettings, useTableProps } from '../../primitives/Table/types';
 import { MenuItemProps } from '../Menu/components/Item';
 export type { TableFilterComparator, TableFilterValue, TableFilter, TableColumnAlignment, TableColumnClassNameHandler, TableColumnDataType, TableColumnFilter, TableColumnMenu, TableColumnRenderer, TableColumnRendererAggregate, TableColumnRendererControl, TableColumnRendererControlProps, TableColumnRendererHeader, TableColumnRendererFooter, TableColumnSort, TableColumnSortDirection, TableColumnSortFn, TableColumnWidth, TableRowActionRenderer, TableRowActionGroupRenderer, TableRowClickHandler, TableRowGotoHandler, TableRowHeight, TableRowSelectHandler, TableShortcutHandlerFn, TableShortcutHandlerObject, TableFilterHandler, TableFontSize, TablePreset, TableRowExpansionRenderer, TableScrollToIndexHandler, TableServerLoadPageHandler, TableServerLoadAllHandler, TableServerLoadAllState, TableSettingsHandler, TableShortcuts, TableSortHandler, TableSettings, TableFeatureProps, } from '../../primitives/Table/types';
+export declare type ReportEmptyStateRenderer = () => JSX.Element | null;
 export declare type ReportProps<TType = unknown> = useTableProps<TType> & {
     customSettings?: ReportCustomSettingsRenderer;
+    emptyState?: ReportEmptyStateRenderer;
     toolbarLeft?: JSX.Element;
     toolbarRight?: JSX.Element;
     toolbarPanel?: JSX.Element;

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { ReportProps } from './types';
 import { TableRef } from '../../primitives/Table/types';
 export declare function useReport<TType>(props: ReportProps<TType>, ref: React.RefObject<TableRef>): {
+    id: string;
     instance: import("@tanstack/table-core").Table<TType>;
     length: number;
     meta: import("@tanstack/table-core").TableMeta<TType>;

package/dist/components/Select2/components/Trigger.d.ts

@@ -4,4 +4,5 @@ export declare const Trigger: React.ForwardRefExoticComponent<Pick<React.HTMLAtt
     emptyValue?: string | number | boolean | null | undefined;
     placeholder?: string | undefined;
     children: React.ReactElement<Select2OptionProps>[];
+    fontSize?: "small" | "medium" | "large" | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 export declare type TruncateProps = {
-    tooltip: string;
     children: React.ReactElement;
+    tooltip: string;
 };
-export declare const Truncate: ({ tooltip, children }: TruncateProps) => JSX.Element;
+export declare const Truncate: ({ children, tooltip }: TruncateProps) => JSX.Element;

package/dist/esm/index.css

@@ -903,88 +903,80 @@ table[data-taco='report'][data-table-font-size='large']
 }
 
 /* row/cell backgrounds -- we have to be specific so that nested tables don't inherit */
-
 /* normal rows */
-table[data-taco='report'] > tbody > tr:not([data-row-selected='true']) > td {
-        @apply bg-white;
-    }
+table[data-taco='report'] > tbody > tr:not([data-row-selected]) > td {
+            @apply bg-white;
+        }
+table[data-taco='report'] > tbody > tr:not([data-row-selected]):hover > td,
+        table[data-taco='report'] > tbody > tr:not([data-row-selected])[data-row-active] > td,
+        table[data-taco='report'] > tbody > tr:not([data-row-selected])[data-row-group] > td {
+            --table-row-actions-shadow: theme(colors.grey.100);
+            @apply bg-grey-100;
+        }
 /* search highlighting */
-table[data-taco='report'] > tbody > tr:not([data-row-selected='true']) > td[data-cell-highlighted='true'] {
-            @apply bg-[#e9f2ff];
+table[data-taco='report'] > tbody > tr:not([data-row-selected]) > td[data-cell-highlighted='true'] {
+            --table-row-actions-shadow: #e9f2ff;
+            @apply !bg-[#e9f2ff];
         }
-table[data-taco='report'] > tbody > tr:not([data-row-selected='true']) > td[data-cell-highlighted='current'] {
-            @apply !bg-[#bfd9ff];
+table[data-taco='report'] > tbody > tr:not([data-row-selected]) > td[data-cell-highlighted='current'] {
+            --table-row-actions-shadow: #bdd7fc;
+            @apply !bg-[#bdd7fc];
+        }
+/* selected rows */
+table[data-taco='report'] > tbody > tr[data-row-selected] > td {
+            @apply bg-blue-100;
+        }
+table[data-taco='report'] > tbody > tr[data-row-selected]:hover > td,
+        table[data-taco='report'] > tbody > tr[data-row-selected][data-row-active] > td,
+        table[data-taco='report'] > tbody > tr[data-row-selected][data-row-group] > td {
+            --table-row-actions-shadow: #d6e3f6;
+            @apply bg-[#d6e3f6];
         }
-table[data-taco='report'] > tbody > tr:not([data-row-selected='true'])[data-row-group] > td {
-        @apply bg-grey-100;
-    }
-table[data-taco='report'] > tbody > tr:not([data-row-selected='true']):hover > td,
-    table[data-taco='report'] > tbody > tr:not([data-row-selected='true'])[data-row-active='true'] > td,
-    table[data-taco='report'] > tbody > tr:not([data-row-selected='true'])[data-row-active='true']:hover > td {
-        --table-row-actions-shadow: theme(colors.grey.100);
-        @apply bg-grey-100;
-    }
 /* search highlighting */
-table[data-taco='report'] > tbody > tr:not([data-row-selected='true']):hover > td[data-cell-highlighted='true'], table[data-taco='report'] > tbody > tr:not([data-row-selected='true'])[data-row-active='true'] > td[data-cell-highlighted='true'], table[data-taco='report'] > tbody > tr:not([data-row-selected='true'])[data-row-active='true']:hover > td[data-cell-highlighted='true'] {
-            @apply bg-[#e2ebf8];
+table[data-taco='report'] > tbody > tr[data-row-selected] > td[data-cell-highlighted] {
+            --table-row-actions-shadow: #b4d2fd;
+            @apply !bg-[#b4d2fd];
         }
-/* normal rows when focus is inside the table */
-table[data-taco='report']:focus-within > tbody > tr[data-row-active='true']:not([data-row-selected='true']) > td {
-    --table-row-actions-shadow: theme(colors.grey.200);
-    @apply !bg-grey-200;
-}
 
-/* normal rows when hover is paused */
-table[data-taco='report'][data-table-pause-hover='true'] > tbody > tr:not([data-row-selected='true']):hover:not([data-row-active='true']) > td {
-        --table-row-actions-shadow: theme(colors.white);
-        @apply !bg-white;
-    }
-table[data-taco='report'][data-table-pause-hover='true'] > tbody > tr:not([data-row-selected='true']):hover[data-row-active='true'] > td {
-        --table-row-actions-shadow: theme(colors.grey.200);
-        @apply !bg-grey-200;
-    }
+/* normal rows */
+
+table[data-taco='report']:focus-within > tbody > tr:not([data-row-selected])[data-row-active] > td {
+            --table-row-actions-shadow: theme(colors.grey.200);
+            @apply bg-grey-200;
+        }
 
 /* selected rows */
-table[data-taco='report'] > tbody > tr[data-row-selected='true'] > td {
-        @apply bg-blue-100;
-    }
-/* search highlighting */
-table[data-taco='report'] > tbody > tr[data-row-selected='true'] > td[data-cell-highlighted='true'] {
-            @apply bg-[#d0e4ff];
+
+table[data-taco='report']:focus-within > tbody > tr[data-row-selected][data-row-active] > td {
+            --table-row-actions-shadow: #ccd8eb;
+            @apply bg-[#ccd8eb];
+        }
+
+/* normal rows */
+
+table[data-taco='report'][data-table-pause-hover='true'] > tbody > tr:hover:not([data-row-selected]):not([data-row-active]) > td {
+            --table-row-actions-shadow: theme(colors.white);
+            @apply bg-white;
         }
-table[data-taco='report'] > tbody > tr[data-row-selected='true'] > td[data-cell-highlighted='current'] {
-            @apply !bg-[#b6d4ff];
+
+table[data-taco='report'][data-table-pause-hover='true'] > tbody > tr:hover:not([data-row-selected])[data-row-active] > td {
+            --table-row-actions-shadow: theme(colors.grey.200);
+            @apply bg-grey-200;
         }
-table[data-taco='report'] > tbody > tr[data-row-selected='true']:hover > td,
-    table[data-taco='report'] > tbody > tr[data-row-selected='true'][data-row-active='true'] > td,
-    table[data-taco='report'] > tbody > tr[data-row-selected='true'][data-row-active='true']:hover > td {
-        --table-row-actions-shadow: #d6e3f6;
-        @apply bg-[#D6E3F6];
-    }
-/* search highlighting */
-table[data-taco='report'] > tbody > tr[data-row-selected='true']:hover > td[data-cell-highlighted='true'], table[data-taco='report'] > tbody > tr[data-row-selected='true'][data-row-active='true'] > td[data-cell-highlighted='true'], table[data-taco='report'] > tbody > tr[data-row-selected='true'][data-row-active='true']:hover > td[data-cell-highlighted='true'] {
-            @apply bg-[#cadef9];
+
+/* selected rows */
+
+table[data-taco='report'][data-table-pause-hover='true'] > tbody > tr:hover[data-row-selected]:not([data-row-active]) > td {
+            --table-row-actions-shadow: theme(colors.blue.100);
+            @apply bg-blue-100;
         }
-table[data-taco='report'] > tbody > tr[data-row-selected='true']:hover > td[data-cell-highlighted='current'], table[data-taco='report'] > tbody > tr[data-row-selected='true'][data-row-active='true'] > td[data-cell-highlighted='current'], table[data-taco='report'] > tbody > tr[data-row-selected='true'][data-row-active='true']:hover > td[data-cell-highlighted='current'] {
-            @apply !bg-[#b4d2fd];
+
+table[data-taco='report'][data-table-pause-hover='true'] > tbody > tr:hover[data-row-selected][data-row-active] > td {
+            --table-row-actions-shadow: #ccd8eb;
+            @apply bg-[#CCD8EB];
         }
-/* selected rows when focus is inside the table */
-table[data-taco='report']:focus-within > tbody > tr[data-row-active='true'][data-row-selected='true'] > td {
-    --table-row-actions-shadow: #ccd8eb;
-    @apply bg-[#CCD8EB];
-}
-/* selected rows when hover is paused */
-table[data-taco='report'][data-table-pause-hover='true'] > tbody > tr[data-row-selected='true']:hover:not([data-row-active='true']) > td {
-        --table-row-actions-shadow: theme(colors.blue.100);
-        @apply !bg-blue-100;
-    }
-table[data-taco='report'][data-table-pause-hover='true'] > tbody > tr[data-row-selected='true']:hover[data-row-active='true'] > td {
-        --table-row-actions-shadow: #ccd8eb;
-        @apply !bg-[#CCD8EB];
-    }
 
 /* row metadata */
-
 table[data-taco='report'] tbody tr[data-row-meta-layout='heading']:not([data-row-group='true']) td {
     @apply !border-b-0 border-t font-bold;
 }
@@ -1335,7 +1327,7 @@ table[data-taco='report'] [data-cell-id^='__'] {
 }
 
 [data-font-size='small'] [role='cell'] [data-taco='tag'] {
-    @apply !-my-1;
+    @apply h-4 min-h-[theme(spacing.4)];
 }
 
 [data-font-size='small'] [role='cell'] [data-taco='Select2'],
@@ -1391,7 +1383,7 @@ table[data-taco='report'] [data-cell-id^='__'] {
     }
 
 /* When cell is editable and highlighted, the padding should apply to highlight wrapper and remove 1px border-width,
-       because it should take all the available space in the cell */
+   because it should take all the available space in the cell */
 
 [data-font-size='small'] [role='cell'][data-editable][data-highlighted='true'] [data-taco='highlight'] {
         @apply px-[calc(var(--table3-cell-padding-x)_-_6px_-_1px)];
@@ -1414,8 +1406,8 @@ table[data-taco='report'] [data-cell-id^='__'] {
     @apply !-my-0.5;
 }
 
-[data-font-size='medium'] [role='cell'] [data-taco='tag'] {
-    @apply !-my-0.5;
+[data-font-size='medium'] [role='cell'] [data-taco='Select2'] {
+    @apply !px-2;
 }
 
 [data-font-size='medium'] [role='cell'] [data-taco='Select2'],
@@ -1430,7 +1422,7 @@ table[data-taco='report'] [data-cell-id^='__'] {
     }
 
 /* When cell is editable and highlighted, the padding should apply to highlight wrapper and remove 1px border-width,
-       because it should take all the available space in the cell */
+   because it should take all the available space in the cell */
 
 [data-font-size='medium'] [role='cell'][data-editable][data-highlighted='true'] [data-taco='highlight'] {
         @apply px-[calc(var(--table3-cell-padding-x)_-_8px_-_1px)];
@@ -1460,8 +1452,8 @@ table[data-taco='report'] [data-cell-id^='__'] {
     @apply !-my-0.5;
 }
 
-[data-font-size='large'] [role='cell'] [data-taco='tag'] {
-    @apply !-my-0.5;
+[data-font-size='large'] [role='cell'] [data-taco='Select2'] {
+    @apply !px-2.5;
 }
 
 [data-font-size='large'] [role='cell'] [data-taco='Select2'],
@@ -1502,7 +1494,7 @@ table[data-taco='report'] [data-cell-id^='__'] {
     }
 
 /* When cell is editable and highlighted, the padding should apply to highlight wrapper and remove 1px border-width,
-       because it should take all the available space in the cell */
+   because it should take all the available space in the cell */
 
 [data-font-size='large'] [role='cell'][data-editable][data-highlighted='true'] [data-taco='highlight'] {
         @apply px-[calc(var(--table3-cell-padding-x)_-_10px_-_1px)];
@@ -1520,3 +1512,9 @@ table[data-taco='report'] [data-cell-id^='__'] {
 [data-font-size='large'] [role='columnheader'] button {
     @apply !text-sm;
 }
+
+/* When spinner is rendered in the last cell of the table, it slightly pushes the edge of the table(while rotating),
+   and making horisontal scroll bar jump */
+[data-editing='true'] [role='cell']:last-child [data-taco='spinner'] {
+    overflow: hidden;
+}

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

@@ -1,6 +1,7 @@
 import { forwardRef, createElement } from 'react';
 import cn from 'clsx';
 import { IconButton } from '../IconButton/IconButton.js';
+import { Truncate } from '../Truncate/Truncate.js';
 
 const Content = /*#__PURE__*/forwardRef(function CardContent(externalProps, ref) {
   const {
@@ -28,9 +29,11 @@ const Card = /*#__PURE__*/forwardRef(function Card(props, ref) {
     ref: ref
   }, /*#__PURE__*/createElement("div", {
     className: "mx-4 mb-2 mt-4 flex"
-  }, title && /*#__PURE__*/createElement("h4", {
-    className: "mb-0 flex-grow text-left"
-  }, title), menu ? /*#__PURE__*/createElement(IconButton, {
+  }, title && ( /*#__PURE__*/createElement(Truncate, {
+    tooltip: title
+  }, /*#__PURE__*/createElement("h4", {
+    className: "mb-0 flex-grow truncate text-left"
+  }, title))), menu ? /*#__PURE__*/createElement(IconButton, {
     icon: "ellipsis-horizontal",
     appearance: "discrete",
     menu: menu,

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

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../../../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\n\nimport { MenuProps } from '../Menu/Menu';\nimport { IconButton } from '../IconButton/IconButton';\n\nexport type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    noPadding?: boolean;\n};\n\nconst Content = React.forwardRef<HTMLDivElement, CardContentProps>(function CardContent(externalProps, ref) {\n    const { noPadding, ...props } = externalProps;\n    const className = cn(\n        'flex-grow overflow-auto',\n        {\n            'mx-4 mb-4': !noPadding,\n        },\n        props.className\n    );\n    return <div {...props} className={className} ref={ref} />;\n});\n\nexport type CardProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Title of the Card */\n    title: string | React.ReactElement;\n    /** Menu component associated with the Card */\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\n};\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(props, ref) {\n    const { title, menu, children } = props;\n    const className = cn(\n        'bg-white flex flex-col rounded-xl border border-solid border-radius-[12px] border-grey-300 hover:border-grey-500 [&_[data-taco=\"table2\"]]:!border-0',\n        props.className\n    );\n\n    return (\n        <div className={className} data-taco=\"card\" ref={ref}>\n            <div className=\"mx-4 mb-2 mt-4 flex\">\n                {title && <h4 className=\"mb-0 flex-grow text-left\">{title}</h4>}\n                {menu ? <IconButton icon=\"ellipsis-horizontal\" appearance=\"discrete\" menu={menu} className=\"-mt-[4px]\" /> : null}\n            </div>\n            {children}\n        </div>\n    );\n}) as React.ForwardRefExoticComponent<CardProps> & {\n    Content: React.ForwardRefExoticComponent<CardContentProps>;\n};\nCard.Content = Content;\n"],"names":["Content","React","CardContent","externalProps","ref","noPadding","props","className","cn","Card","title","menu","children","IconButton","icon","appearance"],"mappings":";;;;AAUA,MAAMA,OAAO,gBAAGC,UAAgB,CAAmC,SAASC,WAAWA,CAACC,aAAa,EAAEC,GAAG;EACtG,MAAM;IAAEC,SAAS;IAAE,GAAGC;GAAO,GAAGH,aAAa;EAC7C,MAAMI,SAAS,GAAGC,EAAE,CAChB,yBAAyB,EACzB;IACI,WAAW,EAAE,CAACH;GACjB,EACDC,KAAK,CAACC,SAAS,CAClB;EACD,oBAAON,uCAASK,KAAK;IAAEC,SAAS,EAAEA,SAAS;IAAEH,GAAG,EAAEA;KAAO;AAC7D,CAAC,CAAC;MASWK,IAAI,gBAAGR,UAAgB,CAA4B,SAASQ,IAAIA,CAACH,KAAK,EAAEF,GAAG;EACpF,MAAM;IAAEM,KAAK;IAAEC,IAAI;IAAEC;GAAU,GAAGN,KAAK;EACvC,MAAMC,SAAS,GAAGC,EAAE,CAChB,qJAAqJ,EACrJF,KAAK,CAACC,SAAS,CAClB;EAED,oBACIN;IAAKM,SAAS,EAAEA,SAAS;iBAAY,MAAM;IAACH,GAAG,EAAEA;kBAC7CH;IAAKM,SAAS,EAAC;KACVG,KAAK,iBAAIT;IAAIM,SAAS,EAAC;KAA4BG,KAAK,CAAM,EAC9DC,IAAI,gBAAGV,cAACY,UAAU;IAACC,IAAI,EAAC,qBAAqB;IAACC,UAAU,EAAC,UAAU;IAACJ,IAAI,EAAEA,IAAI;IAAEJ,SAAS,EAAC;IAAc,GAAG,IAAI,CAC9G,EACLK,QAAQ,CACP;AAEd,CAAC;AAGDH,IAAI,CAACT,OAAO,GAAGA,OAAO;;;;"}
+{"version":3,"file":"Card.js","sources":["../../../../../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\n\nimport { MenuProps } from '../Menu/Menu';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Truncate } from '../Truncate/Truncate';\n\nexport type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    noPadding?: boolean;\n};\n\nconst Content = React.forwardRef<HTMLDivElement, CardContentProps>(function CardContent(externalProps, ref) {\n    const { noPadding, ...props } = externalProps;\n    const className = cn(\n        'flex-grow overflow-auto',\n        {\n            'mx-4 mb-4': !noPadding,\n        },\n        props.className\n    );\n    return <div {...props} className={className} ref={ref} />;\n});\n\nexport type CardProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Title of the Card */\n    title: string | React.ReactElement;\n    /** Menu component associated with the Card */\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\n};\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(props, ref) {\n    const { title, menu, children } = props;\n    const className = cn(\n        'bg-white flex flex-col rounded-xl border border-solid border-radius-[12px] border-grey-300 hover:border-grey-500 [&_[data-taco=\"table2\"]]:!border-0',\n        props.className\n    );\n\n    return (\n        <div className={className} data-taco=\"card\" ref={ref}>\n            <div className=\"mx-4 mb-2 mt-4 flex\">\n                {title && (\n                    <Truncate tooltip={title}>\n                        <h4 className=\"mb-0 flex-grow truncate text-left\">{title}</h4>\n                    </Truncate>\n                )}\n                {menu ? <IconButton icon=\"ellipsis-horizontal\" appearance=\"discrete\" menu={menu} className=\"-mt-[4px]\" /> : null}\n            </div>\n            {children}\n        </div>\n    );\n}) as React.ForwardRefExoticComponent<CardProps> & {\n    Content: React.ForwardRefExoticComponent<CardContentProps>;\n};\nCard.Content = Content;\n"],"names":["Content","React","CardContent","externalProps","ref","noPadding","props","className","cn","Card","title","menu","children","Truncate","tooltip","IconButton","icon","appearance"],"mappings":";;;;;AAWA,MAAMA,OAAO,gBAAGC,UAAgB,CAAmC,SAASC,WAAWA,CAACC,aAAa,EAAEC,GAAG;EACtG,MAAM;IAAEC,SAAS;IAAE,GAAGC;GAAO,GAAGH,aAAa;EAC7C,MAAMI,SAAS,GAAGC,EAAE,CAChB,yBAAyB,EACzB;IACI,WAAW,EAAE,CAACH;GACjB,EACDC,KAAK,CAACC,SAAS,CAClB;EACD,oBAAON,uCAASK,KAAK;IAAEC,SAAS,EAAEA,SAAS;IAAEH,GAAG,EAAEA;KAAO;AAC7D,CAAC,CAAC;MASWK,IAAI,gBAAGR,UAAgB,CAA4B,SAASQ,IAAIA,CAACH,KAAK,EAAEF,GAAG;EACpF,MAAM;IAAEM,KAAK;IAAEC,IAAI;IAAEC;GAAU,GAAGN,KAAK;EACvC,MAAMC,SAAS,GAAGC,EAAE,CAChB,qJAAqJ,EACrJF,KAAK,CAACC,SAAS,CAClB;EAED,oBACIN;IAAKM,SAAS,EAAEA,SAAS;iBAAY,MAAM;IAACH,GAAG,EAAEA;kBAC7CH;IAAKM,SAAS,EAAC;KACVG,KAAK,mBACFT,cAACY,QAAQ;IAACC,OAAO,EAAEJ;kBACfT;IAAIM,SAAS,EAAC;KAAqCG,KAAK,CAAM,CACvD,CACd,EACAC,IAAI,gBAAGV,cAACc,UAAU;IAACC,IAAI,EAAC,qBAAqB;IAACC,UAAU,EAAC,UAAU;IAACN,IAAI,EAAEA,IAAI;IAAEJ,SAAS,EAAC;IAAc,GAAG,IAAI,CAC9G,EACLK,QAAQ,CACP;AAEd,CAAC;AAGDH,IAAI,CAACT,OAAO,GAAGA,OAAO;;;;"}

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

@@ -1,16 +1,9 @@
-import { forwardRef, useState, useRef, useEffect, createElement } from 'react';
+import { forwardRef, useRef, createElement } from 'react';
 import cn from 'clsx';
-import { Tooltip } from '../Tooltip/Tooltip.js';
-import { useTruncated } from '../../utils/hooks/useTruncated.js';
+import { Truncate } from '../Truncate/Truncate.js';
 
 const Field = /*#__PURE__*/forwardRef(function Field(props, ref) {
-  const [showTooltip, setShowTooltip] = useState(false);
   const messageRef = useRef(null);
-  useEffect(() => {
-    // refs are null on the first render so setting showTooltip state forces the rerender to see if message is
-    // truncated or not
-    setShowTooltip(true);
-  }, []);
   const {
     disabled,
     children,
@@ -28,16 +21,12 @@ const Field = /*#__PURE__*/forwardRef(function Field(props, ref) {
     'text-yellow-700': warning && !invalid,
     'opacity-50': disabled
   });
-  const {
-    truncated: isMessageTrucated
-  } = useTruncated(messageRef.current, [message, showTooltip]);
   return /*#__PURE__*/createElement("label", Object.assign({}, otherProps, {
     className: className,
     "data-taco": "label",
     ref: ref
-  }), children, message && ( /*#__PURE__*/createElement(Tooltip, {
-    title: message,
-    hide: !isMessageTrucated
+  }), children, message && ( /*#__PURE__*/createElement(Truncate, {
+    tooltip: message
   }, /*#__PURE__*/createElement("span", {
     className: messageClassName,
     ref: messageRef,

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

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sources":["../../../../../../../src/components/Field/Field.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\n\nimport './Field.css';\nimport { useTruncated } from '../../utils/hooks/useTruncated';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\nexport type FieldProps = React.LabelHTMLAttributes<HTMLLabelElement> & {\n    /** Content of the field */\n    children: React.ReactNode;\n    /**\tChanges the style to indicate the element is disabled */\n    disabled?: boolean;\n    /* Whether the input is in an invalid state */\n    invalid?: boolean;\n    /* Whether the input is in a warning state */\n    warning?: boolean;\n    /**\n     * Text displayed below the children of Field.\n     * Should be a short text that indicates feedback for user.\n     */\n    message?: string;\n};\n\nexport const Field = React.forwardRef(function Field(props: FieldProps, ref: React.Ref<HTMLLabelElement>) {\n    const [showTooltip, setShowTooltip] = React.useState(false);\n    const messageRef = React.useRef<HTMLSpanElement>(null);\n\n    React.useEffect(() => {\n        // refs are null on the first render so setting showTooltip state forces the rerender to see if message is\n        // truncated or not\n        setShowTooltip(true);\n    }, []);\n\n    const { disabled, children, invalid = false, warning = false, message, ...otherProps } = props;\n    const className = cn(\n        'flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]',\n        {\n            'text-grey-300': disabled,\n        },\n        props.className\n    );\n    const messageClassName = cn('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {\n        'text-grey-700': !invalid && !warning,\n        'text-red-500': invalid,\n        'text-yellow-700': warning && !invalid,\n        'opacity-50': disabled,\n    });\n\n    const { truncated: isMessageTrucated } = useTruncated(messageRef.current, [message, showTooltip]);\n\n    return (\n        <label {...otherProps} className={className} data-taco=\"label\" ref={ref}>\n            {children}\n            {message && (\n                <Tooltip title={message} hide={!isMessageTrucated}>\n                    <span className={messageClassName} ref={messageRef} role={invalid ? 'alert' : undefined}>\n                        {message}\n                    </span>\n                </Tooltip>\n            )}\n        </label>\n    );\n});\n"],"names":["Field","React","props","ref","showTooltip","setShowTooltip","messageRef","disabled","children","invalid","warning","message","otherProps","className","cn","messageClassName","truncated","isMessageTrucated","useTruncated","current","Tooltip","title","hide","role","undefined"],"mappings":";;;;;MAuBaA,KAAK,gBAAGC,UAAgB,CAAC,SAASD,KAAKA,CAACE,KAAiB,EAAEC,GAAgC;EACpG,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGJ,QAAc,CAAC,KAAK,CAAC;EAC3D,MAAMK,UAAU,GAAGL,MAAY,CAAkB,IAAI,CAAC;EAEtDA,SAAe,CAAC;;;IAGZI,cAAc,CAAC,IAAI,CAAC;GACvB,EAAE,EAAE,CAAC;EAEN,MAAM;IAAEE,QAAQ;IAAEC,QAAQ;IAAEC,OAAO,GAAG,KAAK;IAAEC,OAAO,GAAG,KAAK;IAAEC,OAAO;IAAE,GAAGC;GAAY,GAAGV,KAAK;EAC9F,MAAMW,SAAS,GAAGC,EAAE,CAChB,8EAA8E,EAC9E;IACI,eAAe,EAAEP;GACpB,EACDL,KAAK,CAACW,SAAS,CAClB;EACD,MAAME,gBAAgB,GAAGD,EAAE,CAAC,iEAAiE,EAAE;IAC3F,eAAe,EAAE,CAACL,OAAO,IAAI,CAACC,OAAO;IACrC,cAAc,EAAED,OAAO;IACvB,iBAAiB,EAAEC,OAAO,IAAI,CAACD,OAAO;IACtC,YAAY,EAAEF;GACjB,CAAC;EAEF,MAAM;IAAES,SAAS,EAAEC;GAAmB,GAAGC,YAAY,CAACZ,UAAU,CAACa,OAAO,EAAE,CAACR,OAAO,EAAEP,WAAW,CAAC,CAAC;EAEjG,oBACIH,yCAAWW,UAAU;IAAEC,SAAS,EAAEA,SAAS;iBAAY,OAAO;IAACV,GAAG,EAAEA;MAC/DK,QAAQ,EACRG,OAAO,mBACJV,cAACmB,OAAO;IAACC,KAAK,EAAEV,OAAO;IAAEW,IAAI,EAAE,CAACL;kBAC5BhB;IAAMY,SAAS,EAAEE,gBAAgB;IAAEZ,GAAG,EAAEG,UAAU;IAAEiB,IAAI,EAAEd,OAAO,GAAG,OAAO,GAAGe;KACzEb,OAAO,CACL,CACD,CACb,CACG;AAEhB,CAAC;;;;"}
+{"version":3,"file":"Field.js","sources":["../../../../../../../src/components/Field/Field.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\n\nimport './Field.css';\nimport { Truncate } from '../Truncate/Truncate';\n\nexport type FieldProps = React.LabelHTMLAttributes<HTMLLabelElement> & {\n    /** Content of the field */\n    children: React.ReactNode;\n    /**\tChanges the style to indicate the element is disabled */\n    disabled?: boolean;\n    /* Whether the input is in an invalid state */\n    invalid?: boolean;\n    /* Whether the input is in a warning state */\n    warning?: boolean;\n    /**\n     * Text displayed below the children of Field.\n     * Should be a short text that indicates feedback for user.\n     */\n    message?: string;\n};\n\nexport const Field = React.forwardRef(function Field(props: FieldProps, ref: React.Ref<HTMLLabelElement>) {\n    const messageRef = React.useRef<HTMLSpanElement>(null);\n\n    const { disabled, children, invalid = false, warning = false, message, ...otherProps } = props;\n    const className = cn(\n        'flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]',\n        {\n            'text-grey-300': disabled,\n        },\n        props.className\n    );\n    const messageClassName = cn('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {\n        'text-grey-700': !invalid && !warning,\n        'text-red-500': invalid,\n        'text-yellow-700': warning && !invalid,\n        'opacity-50': disabled,\n    });\n\n    return (\n        <label {...otherProps} className={className} data-taco=\"label\" ref={ref}>\n            {children}\n            {message && (\n                <Truncate tooltip={message}>\n                    <span className={messageClassName} ref={messageRef} role={invalid ? 'alert' : undefined}>\n                        {message}\n                    </span>\n                </Truncate>\n            )}\n        </label>\n    );\n});\n"],"names":["Field","React","props","ref","messageRef","disabled","children","invalid","warning","message","otherProps","className","cn","messageClassName","Truncate","tooltip","role","undefined"],"mappings":";;;;MAsBaA,KAAK,gBAAGC,UAAgB,CAAC,SAASD,KAAKA,CAACE,KAAiB,EAAEC,GAAgC;EACpG,MAAMC,UAAU,GAAGH,MAAY,CAAkB,IAAI,CAAC;EAEtD,MAAM;IAAEI,QAAQ;IAAEC,QAAQ;IAAEC,OAAO,GAAG,KAAK;IAAEC,OAAO,GAAG,KAAK;IAAEC,OAAO;IAAE,GAAGC;GAAY,GAAGR,KAAK;EAC9F,MAAMS,SAAS,GAAGC,EAAE,CAChB,8EAA8E,EAC9E;IACI,eAAe,EAAEP;GACpB,EACDH,KAAK,CAACS,SAAS,CAClB;EACD,MAAME,gBAAgB,GAAGD,EAAE,CAAC,iEAAiE,EAAE;IAC3F,eAAe,EAAE,CAACL,OAAO,IAAI,CAACC,OAAO;IACrC,cAAc,EAAED,OAAO;IACvB,iBAAiB,EAAEC,OAAO,IAAI,CAACD,OAAO;IACtC,YAAY,EAAEF;GACjB,CAAC;EAEF,oBACIJ,yCAAWS,UAAU;IAAEC,SAAS,EAAEA,SAAS;iBAAY,OAAO;IAACR,GAAG,EAAEA;MAC/DG,QAAQ,EACRG,OAAO,mBACJR,cAACa,QAAQ;IAACC,OAAO,EAAEN;kBACfR;IAAMU,SAAS,EAAEE,gBAAgB;IAAEV,GAAG,EAAEC,UAAU;IAAEY,IAAI,EAAET,OAAO,GAAG,OAAO,GAAGU;KACzER,OAAO,CACL,CACA,CACd,CACG;AAEhB,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Header/components/PrimaryNavigation.js

@@ -12,9 +12,9 @@ const PrimaryNavigation = /*#__PURE__*/React__default.forwardRef(function Primar
   } = useLocalization();
   const internalRef = useMergedRef(ref);
   const className = cn('flex h-full w-full flex-grow items-center overflow-hidden active:outline-none relative', props.className);
-  const moreButton = /*#__PURE__*/React__default.createElement(Button, {
+  const moreButton = () => ( /*#__PURE__*/React__default.createElement(Button, {
     className: cn(getLinkClasses(), '!bg-transparent aria-expanded:!bg-white/[.08]')
-  }, texts.header.more);
+  }, texts.header.more));
   return /*#__PURE__*/React__default.createElement("nav", Object.assign({}, props, {
     className: className,
     ref: internalRef

package/dist/esm/packages/taco/src/components/Header/components/PrimaryNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimaryNavigation.js","sources":["../../../../../../../../src/components/Header/components/PrimaryNavigation.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { getLinkClasses } from './Link';\nimport { useLocalization } from '../../Provider/Localization';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { Button } from '../../Button/Button';\nimport { OverflowGroup } from '../../OverflowGroup/OverflowGroup';\n\nexport type PrimaryNavigationProps = React.HTMLAttributes<HTMLElement>;\n\nexport const PrimaryNavigation = React.forwardRef<HTMLElement, PrimaryNavigationProps>(function PrimaryNavigation(props, ref) {\n    const { texts } = useLocalization();\n    const internalRef = useMergedRef<HTMLDivElement>(ref);\n\n    const className = cn(\n        'flex h-full w-full flex-grow items-center overflow-hidden active:outline-none relative',\n        props.className\n    );\n\n    const moreButton = (\n        <Button className={cn(getLinkClasses(), '!bg-transparent aria-expanded:!bg-white/[.08]')}>{texts.header.more}</Button>\n    );\n    return (\n        <nav {...props} className={className} ref={internalRef}>\n            <OverflowGroup className=\"h-full flex-grow items-center gap-1 px-1\" moreButton={moreButton}>\n                {props.children}\n            </OverflowGroup>\n        </nav>\n    );\n});\n"],"names":["PrimaryNavigation","React","forwardRef","props","ref","texts","useLocalization","internalRef","useMergedRef","className","cn","moreButton","Button","getLinkClasses","header","more","OverflowGroup","children"],"mappings":";;;;;;;;MAUaA,iBAAiB,gBAAGC,cAAK,CAACC,UAAU,CAAsC,SAASF,iBAAiBA,CAACG,KAAK,EAAEC,GAAG;EACxH,MAAM;IAAEC;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,WAAW,GAAGC,YAAY,CAAiBJ,GAAG,CAAC;EAErD,MAAMK,SAAS,GAAGC,EAAE,CAChB,wFAAwF,EACxFP,KAAK,CAACM,SAAS,CAClB;EAED,MAAME,UAAU,gBACZV,6BAACW,MAAM;IAACH,SAAS,EAAEC,EAAE,CAACG,cAAc,EAAE,EAAE,+CAA+C;KAAIR,KAAK,CAACS,MAAM,CAACC,IAAI,CAC/G;EACD,oBACId,sDAASE,KAAK;IAAEM,SAAS,EAAEA,SAAS;IAAEL,GAAG,EAAEG;mBACvCN,6BAACe,aAAa;IAACP,SAAS,EAAC,0CAA0C;IAACE,UAAU,EAAEA;KAC3ER,KAAK,CAACc,QAAQ,CACH,CACd;AAEd,CAAC;;;;"}
+{"version":3,"file":"PrimaryNavigation.js","sources":["../../../../../../../../src/components/Header/components/PrimaryNavigation.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { getLinkClasses } from './Link';\nimport { useLocalization } from '../../Provider/Localization';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { Button } from '../../Button/Button';\nimport { OverflowGroup } from '../../OverflowGroup/OverflowGroup';\n\nexport type PrimaryNavigationProps = React.HTMLAttributes<HTMLElement>;\n\nexport const PrimaryNavigation = React.forwardRef<HTMLElement, PrimaryNavigationProps>(function PrimaryNavigation(props, ref) {\n    const { texts } = useLocalization();\n    const internalRef = useMergedRef<HTMLDivElement>(ref);\n\n    const className = cn(\n        'flex h-full w-full flex-grow items-center overflow-hidden active:outline-none relative',\n        props.className\n    );\n\n    const moreButton = () => (\n        <Button className={cn(getLinkClasses(), '!bg-transparent aria-expanded:!bg-white/[.08]')}>{texts.header.more}</Button>\n    );\n    return (\n        <nav {...props} className={className} ref={internalRef}>\n            <OverflowGroup className=\"h-full flex-grow items-center gap-1 px-1\" moreButton={moreButton}>\n                {props.children}\n            </OverflowGroup>\n        </nav>\n    );\n});\n"],"names":["PrimaryNavigation","React","forwardRef","props","ref","texts","useLocalization","internalRef","useMergedRef","className","cn","moreButton","Button","getLinkClasses","header","more","OverflowGroup","children"],"mappings":";;;;;;;;MAUaA,iBAAiB,gBAAGC,cAAK,CAACC,UAAU,CAAsC,SAASF,iBAAiBA,CAACG,KAAK,EAAEC,GAAG;EACxH,MAAM;IAAEC;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,WAAW,GAAGC,YAAY,CAAiBJ,GAAG,CAAC;EAErD,MAAMK,SAAS,GAAGC,EAAE,CAChB,wFAAwF,EACxFP,KAAK,CAACM,SAAS,CAClB;EAED,MAAME,UAAU,GAAGA,qBACfV,6BAACW,MAAM;IAACH,SAAS,EAAEC,EAAE,CAACG,cAAc,EAAE,EAAE,+CAA+C;KAAIR,KAAK,CAACS,MAAM,CAACC,IAAI,CAAU,CACzH;EACD,oBACId,sDAASE,KAAK;IAAEM,SAAS,EAAEA,SAAS;IAAEL,GAAG,EAAEG;mBACvCN,6BAACe,aAAa;IAACP,SAAS,EAAC,0CAA0C;IAACE,UAAU,EAAEA;KAC3ER,KAAK,CAACc,QAAQ,CACH,CACd;AAEd,CAAC;;;;"}

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

@@ -2,6 +2,7 @@ import React__default from 'react';
 import cn from 'clsx';
 import { useMergedRef } from '../../hooks/useMergedRef.js';
 import { IconButton } from '../IconButton/IconButton.js';
+import { useLocalization } from '../Provider/Localization.js';
 import { Menu } from '../Menu/Menu.js';
 import { useIntersectionObserver } from '../../hooks/useIntersectionObserver.js';
 
@@ -36,8 +37,9 @@ const sanitizeButtonPropsForMenuItem = (button, index) => {
 };
 const DEFAULT_OFFSET = 32 + 8;
 const OverflowGroup = /*#__PURE__*/React__default.forwardRef(function OverflowGroup(props, ref) {
+  var _moreButton;
   const {
-    moreButton: MoreButton,
+    moreButton,
     ...attributes
   } = props;
   const internalRef = useMergedRef(ref);
@@ -47,12 +49,17 @@ const OverflowGroup = /*#__PURE__*/React__default.forwardRef(function OverflowGr
     var _el$getBoundingClient;
     return setButtonWidth(el === null || el === void 0 ? void 0 : (_el$getBoundingClient = el.getBoundingClientRect()) === null || _el$getBoundingClient === void 0 ? void 0 : _el$getBoundingClient.width);
   }, []);
-  const button = MoreButton !== null && MoreButton !== void 0 ? MoreButton : /*#__PURE__*/React__default.createElement(IconButton, {
-    icon: "more"
-  });
+  const {
+    texts
+  } = useLocalization();
   const intersectedChildIndex = useIntersectionObserver(internalRef, buttonWidth);
   const children = React__default.Children.toArray(props.children);
   const hiddenChildren = intersectedChildIndex !== undefined ? children.slice(intersectedChildIndex) : [];
+  const hiddenChildrenCount = hiddenChildren.length;
+  const moreButtonText = hiddenChildrenCount ? `${hiddenChildrenCount} ${texts.header.more}` : '';
+  const MoreButton = (_moreButton = moreButton === null || moreButton === void 0 ? void 0 : moreButton(moreButtonText)) !== null && _moreButton !== void 0 ? _moreButton : /*#__PURE__*/React__default.createElement(IconButton, {
+    icon: "more"
+  });
   const className = cn('flex overflow-hidden', props.className);
   return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, {
     className: className,
@@ -63,8 +70,8 @@ const OverflowGroup = /*#__PURE__*/React__default.forwardRef(function OverflowGr
       visible: intersectedChildIndex === undefined || index < intersectedChildIndex,
       'invisible order-[100] pointer-events-none': intersectedChildIndex !== undefined && index >= intersectedChildIndex
     })
-  })), hiddenChildren.length ? /*#__PURE__*/React__default.cloneElement(button, {
-    className: cn('sticky right-0 order-[99]', button.props.className),
+  })), hiddenChildren.length ? /*#__PURE__*/React__default.cloneElement(MoreButton, {
+    className: cn('sticky right-0 order-[99]', MoreButton.props.className),
     'data-observer-ignore': true,
     menu: menuProps => ( /*#__PURE__*/React__default.createElement(Menu, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu.Content, null, hiddenChildren.map(sanitizeButtonPropsForMenuItem)))),
     ref: buttonRefCallback

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

@@ -1 +1 @@
-{"version":3,"file":"OverflowGroup.js","sources":["../../../../../../../src/components/OverflowGroup/OverflowGroup.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { ButtonProps } from '../Button/Button';\nimport { Menu } from '../Menu/Menu';\nimport { useIntersectionObserver } from '../../hooks/useIntersectionObserver';\nimport { IconButton } from '../IconButton/IconButton';\n\nconst sanitizeButtonPropsForMenuItem = (button: any, index) => {\n    const href: string | undefined = button.props.to || button.props.href;\n    const Tag = href ? Menu.Link : Menu.Item;\n\n    // Removing className prop so that custom styling cannot be applied on Menu.Link\n    const {\n        as,\n        className: _,\n        appearance: _1,\n        drawer: _2,\n        fluid: _3,\n        hanger: _4,\n        menu: _5,\n        popover: _6,\n        tooltip: _7,\n        ...attributes\n    } = button.props;\n\n    const props = {\n        ...attributes,\n        key: index,\n        target: href ? (href.startsWith('http') ? '_blank' : '_self') : undefined,\n    };\n\n    if (as) {\n        return React.cloneElement(button, { as: Tag, ...props });\n    }\n\n    return <Tag {...props} />;\n};\n\ntype OverflowGroupProps = React.HTMLAttributes<HTMLElement> & {\n    moreButton?: React.ReactElement<ButtonProps>;\n};\n\nconst DEFAULT_OFFSET = 32 + 8;\n\nexport const OverflowGroup = React.forwardRef(function OverflowGroup(props: OverflowGroupProps, ref: React.Ref<HTMLDivElement>) {\n    const { moreButton: MoreButton, ...attributes } = props;\n    const internalRef = useMergedRef<HTMLDivElement>(ref);\n    // determine width of more button, to add intersection observer margin\n    const [buttonWidth, setButtonWidth] = React.useState(DEFAULT_OFFSET);\n    const buttonRefCallback = React.useCallback((el: HTMLElement) => setButtonWidth(el?.getBoundingClientRect()?.width), []);\n    const button = MoreButton ?? <IconButton icon=\"more\" />;\n\n    const intersectedChildIndex = useIntersectionObserver(internalRef, buttonWidth);\n    const children = React.Children.toArray(props.children) as React.ReactElement<ButtonProps>[];\n    const hiddenChildren = intersectedChildIndex !== undefined ? children.slice(intersectedChildIndex) : [];\n\n    const className = cn('flex overflow-hidden', props.className);\n\n    return (\n        <div {...attributes} className={className} data-taco=\"overflow-group\" ref={internalRef}>\n            {children.map((child, index) =>\n                React.cloneElement(child, {\n                    className: cn(child.props.className, {\n                        visible: intersectedChildIndex === undefined || index < intersectedChildIndex,\n                        'invisible order-[100] pointer-events-none':\n                            intersectedChildIndex !== undefined && index >= intersectedChildIndex,\n                    }),\n                })\n            )}\n            {hiddenChildren.length\n                ? React.cloneElement(button, {\n                      className: cn('sticky right-0 order-[99]', button.props.className),\n                      'data-observer-ignore': true,\n                      menu: menuProps => (\n                          <Menu {...menuProps}>\n                              <Menu.Content>{hiddenChildren.map(sanitizeButtonPropsForMenuItem)}</Menu.Content>\n                          </Menu>\n                      ),\n                      ref: buttonRefCallback,\n                  })\n                : null}\n        </div>\n    );\n});\n"],"names":["sanitizeButtonPropsForMenuItem","button","index","href","props","to","Tag","Menu","Link","Item","as","className","_","appearance","_1","drawer","_2","fluid","_3","hanger","_4","menu","_5","popover","_6","tooltip","_7","attributes","key","target","startsWith","undefined","React","cloneElement","DEFAULT_OFFSET","OverflowGroup","forwardRef","ref","moreButton","MoreButton","internalRef","useMergedRef","buttonWidth","setButtonWidth","useState","buttonRefCallback","useCallback","el","_el$getBoundingClient","getBoundingClientRect","width","IconButton","icon","intersectedChildIndex","useIntersectionObserver","children","Children","toArray","hiddenChildren","slice","cn","map","child","visible","length","menuProps","Content"],"mappings":"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"}
+{"version":3,"file":"OverflowGroup.js","sources":["../../../../../../../src/components/OverflowGroup/OverflowGroup.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { ButtonProps } from '../Button/Button';\nimport { Menu } from '../Menu/Menu';\nimport { useIntersectionObserver } from '../../hooks/useIntersectionObserver';\nimport { IconButton } from '../IconButton/IconButton';\nimport { useLocalization } from '../Provider/Localization';\n\nconst sanitizeButtonPropsForMenuItem = (button: any, index) => {\n    const href: string | undefined = button.props.to || button.props.href;\n    const Tag = href ? Menu.Link : Menu.Item;\n\n    // Removing className prop so that custom styling cannot be applied on Menu.Link\n    const {\n        as,\n        className: _,\n        appearance: _1,\n        drawer: _2,\n        fluid: _3,\n        hanger: _4,\n        menu: _5,\n        popover: _6,\n        tooltip: _7,\n        ...attributes\n    } = button.props;\n\n    const props = {\n        ...attributes,\n        key: index,\n        target: href ? (href.startsWith('http') ? '_blank' : '_self') : undefined,\n    };\n\n    if (as) {\n        return React.cloneElement(button, { as: Tag, ...props });\n    }\n\n    return <Tag {...props} />;\n};\n\ntype OverflowGroupProps = React.HTMLAttributes<HTMLElement> & {\n    moreButton?: (moreButtonText: string) => React.ReactElement<ButtonProps>;\n};\n\nconst DEFAULT_OFFSET = 32 + 8;\n\nexport const OverflowGroup = React.forwardRef(function OverflowGroup(props: OverflowGroupProps, ref: React.Ref<HTMLDivElement>) {\n    const { moreButton, ...attributes } = props;\n    const internalRef = useMergedRef<HTMLDivElement>(ref);\n    // determine width of more button, to add intersection observer margin\n    const [buttonWidth, setButtonWidth] = React.useState(DEFAULT_OFFSET);\n    const buttonRefCallback = React.useCallback((el: HTMLElement) => setButtonWidth(el?.getBoundingClientRect()?.width), []);\n    const { texts } = useLocalization();\n\n    const intersectedChildIndex = useIntersectionObserver(internalRef, buttonWidth);\n    const children = React.Children.toArray(props.children) as React.ReactElement<ButtonProps>[];\n    const hiddenChildren = intersectedChildIndex !== undefined ? children.slice(intersectedChildIndex) : [];\n    const hiddenChildrenCount = hiddenChildren.length;\n    const moreButtonText = hiddenChildrenCount ? `${hiddenChildrenCount} ${texts.header.more}` : '';\n\n    const MoreButton = moreButton?.(moreButtonText) ?? <IconButton icon=\"more\" />;\n\n    const className = cn('flex overflow-hidden', props.className);\n\n    return (\n        <div {...attributes} className={className} data-taco=\"overflow-group\" ref={internalRef}>\n            {children.map((child, index) =>\n                React.cloneElement(child, {\n                    className: cn(child.props.className, {\n                        visible: intersectedChildIndex === undefined || index < intersectedChildIndex,\n                        'invisible order-[100] pointer-events-none':\n                            intersectedChildIndex !== undefined && index >= intersectedChildIndex,\n                    }),\n                })\n            )}\n            {hiddenChildren.length\n                ? React.cloneElement(MoreButton, {\n                      className: cn('sticky right-0 order-[99]', MoreButton.props.className),\n                      'data-observer-ignore': true,\n                      menu: menuProps => (\n                          <Menu {...menuProps}>\n                              <Menu.Content>{hiddenChildren.map(sanitizeButtonPropsForMenuItem)}</Menu.Content>\n                          </Menu>\n                      ),\n                      ref: buttonRefCallback,\n                  })\n                : null}\n        </div>\n    );\n});\n"],"names":["sanitizeButtonPropsForMenuItem","button","index","href","props","to","Tag","Menu","Link","Item","as","className","_","appearance","_1","drawer","_2","fluid","_3","hanger","_4","menu","_5","popover","_6","tooltip","_7","attributes","key","target","startsWith","undefined","React","cloneElement","DEFAULT_OFFSET","OverflowGroup","forwardRef","ref","moreButton","internalRef","useMergedRef","buttonWidth","setButtonWidth","useState","buttonRefCallback","useCallback","el","_el$getBoundingClient","getBoundingClientRect","width","texts","useLocalization","intersectedChildIndex","useIntersectionObserver","children","Children","toArray","hiddenChildren","slice","hiddenChildrenCount","length","moreButtonText","header","more","MoreButton","_moreButton","IconButton","icon","cn","map","child","visible","menuProps","Content"],"mappings":"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"}

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

@@ -11,6 +11,7 @@ import { Toolbar } from './components/Toolbar/Toolbar.js';
 import { useStylesheet } from './styles/useStylesheet.js';
 import { useTableRenderer } from './util/useTableRenderer.js';
 import { useTableGlobalShortcuts } from './util/useTableGlobalShortcuts.js';
+import { EmptyStateBody } from './components/Body/EmptyStateBody.js';
 
 function Column(_) {
   return null;
@@ -19,11 +20,11 @@ function Group(_) {
   return null;
 }
 const Report = /*#__PURE__*/fixedForwardRef(function Report(props, ref) {
-  var _report$state$groupin;
+  var _report$state$groupin, _renderer$rows;
   const tableRef = useMergedRef(ref);
   const report = useReport(props, tableRef);
   const renderer = useTableRenderer(report.instance, tableRef, props.defaultRowActiveIndex);
-  const stylesheet = useStylesheet(props.id, report.instance);
+  const stylesheet = useStylesheet(report.id, report.instance);
   useTableGlobalShortcuts(report.instance, tableRef, renderer.scrollToIndex);
   const handleFocus = report.meta.rowActive.rowActiveIndex === undefined ? event => {
     report.meta.rowActive.handleFocus(event, report.length, renderer.scrollToIndex);
@@ -35,12 +36,12 @@ const Report = /*#__PURE__*/fixedForwardRef(function Report(props, ref) {
     right: props.toolbarRight,
     scrollToIndex: renderer.scrollToIndex,
     table: report.instance,
-    tableId: props.id,
+    tableId: report.id,
     tableRef: tableRef
   }), props.toolbarPanel ? /*#__PURE__*/React__default.createElement("div", {
     className: "mb-4"
   }, props.toolbarPanel) : undefined, /*#__PURE__*/React__default.createElement(FocusScope, null, /*#__PURE__*/React__default.createElement("table", {
-    id: props.id,
+    id: report.id,
     "data-taco": "report",
     "data-table-font-size": report.meta.fontSize.size,
     "data-table-horizontally-scrolled": report.meta.columnFreezing.isHorizontallyScrolled ? true : undefined,
@@ -54,11 +55,13 @@ const Report = /*#__PURE__*/fixedForwardRef(function Report(props, ref) {
     tabIndex: -1
   }, /*#__PURE__*/React__default.createElement("thead", null, report.instance.getHeaderGroups().map(headerGroup => ( /*#__PURE__*/React__default.createElement("tr", {
     key: headerGroup.id
-  }, headerGroup.headers.map(Header))))), /*#__PURE__*/React__default.createElement(Body, {
+  }, headerGroup.headers.map(Header))))), (_renderer$rows = renderer.rows) !== null && _renderer$rows !== void 0 && _renderer$rows.length ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Body, {
     length: report.length,
     table: report.instance,
     style: renderer.style
-  }, renderer.rows), report.meta.footer.isEnabled ? ( /*#__PURE__*/React__default.createElement("tfoot", null, /*#__PURE__*/React__default.createElement("tr", null, report.instance.getFooterGroups()[0].headers.map(Footer)))) : null), report.meta.footer.isEnabled ? /*#__PURE__*/React__default.createElement(Summary, {
+  }, renderer.rows), report.meta.footer.isEnabled ? ( /*#__PURE__*/React__default.createElement("tfoot", null, /*#__PURE__*/React__default.createElement("tr", null, report.instance.getFooterGroups()[0].headers.map(Footer)))) : null)) : ( /*#__PURE__*/React__default.createElement(EmptyStateBody, {
+    emptyState: props.emptyState
+  }))), report.meta.footer.isEnabled ? /*#__PURE__*/React__default.createElement(Summary, {
     length: report.length,
     table: report.instance
   }) : null));