@economic/taco 2.46.10-alpha.0 → 2.47.0-alpha.0

package/dist/index.css

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

package/dist/primitives/Table/Core/Table.d.ts

@@ -13,6 +13,7 @@ export declare namespace Table {
 export declare type TableGridProps<TType = unknown> = React.TableHTMLAttributes<HTMLTableElement> & {
     'data-taco': string;
     enableHorizontalArrowKeyNavigation?: boolean;
+    footerRows?: null | JSX.Element | JSX.Element[];
     table: useTableReturnValue<TType>;
 };
 export declare function TableGrid<TType = unknown>(props: TableGridProps<TType>): JSX.Element;

package/dist/primitives/Table/Core/components/Toolbar/components/Filters/FilterContext.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TableFilter } from '../../../../../types';
+export declare const FilterContext: React.Context<TableFilter[]>;

package/dist/primitives/Table/Core/components/Toolbar/components/Filters/components/Filter.d.ts

@@ -4,7 +4,6 @@ import { TableFilter } from '../../../../../../types';
 export declare type FilterProps<TType = unknown> = {
     allColumns: ReactTableColumn<TType, unknown>[];
     filter: TableFilter;
-    filters: TableFilter[];
     position: number;
     onChange: (position: number, value: TableFilter) => void;
     onRemove?: (position: number) => void;

package/dist/primitives/Table/Core/components/Toolbar/components/Filters/components/FilterColumn.d.ts

@@ -1,12 +1,9 @@
 import React from 'react';
 import { Column as ReactTableColumn } from '@tanstack/react-table';
 import { Select2Props } from '../../../../../../../../components/Select2/Select2';
-import { TableFilter } from '../../../../../../types';
 export declare type FilterColumnProps<TType = unknown> = Omit<Select2Props, 'children'> & {
     allColumns: ReactTableColumn<TType, unknown>[];
-    filters: TableFilter[];
 };
 export declare const FilterColumn: React.ForwardRefExoticComponent<Pick<Select2Props, "defaultValue" | "onChange" | "value" | "defaultChecked" | "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" | "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" | "autoFocus" | "emptyValue" | "disabled" | "fontSize" | "highlighted" | "invalid" | "loading" | "multiple" | "name" | "onCreate" | "onDelete" | "onEdit" | "readOnly" | "required" | "tags" | "createDialog" | "createTriggerText"> & {
     allColumns: ReactTableColumn<unknown, unknown>[];
-    filters: TableFilter[];
 } & React.RefAttributes<HTMLButtonElement>>;

package/dist/primitives/Table/types.d.ts

@@ -41,7 +41,7 @@ export declare type TableColumnFilter = ReactTableColumnFilter;
 export declare type TableColumnMenu = ((columnId: string) => React.ReactNode | null)[];
 export declare type TableColumnRenderer<TType, TValue> = (value: TValue, row: TType) => JSX.Element | string | number | null;
 export declare type TableColumnRendererAggregate<TType, TValue> = (value: TValue, row: TType) => JSX.Element | string | number | null;
-export declare type TableColumnRendererControl<TType = unknown> = ((props: TableColumnRendererControlProps, row?: TType) => JSX.Element) | 'datepicker' | 'input' | 'switch' | 'checkbox' | 'textarea';
+export declare type TableColumnRendererControl<TType = unknown> = ((props: TableColumnRendererControlProps, row?: TType, filterState?: TableFilter[]) => JSX.Element) | 'datepicker' | 'input' | 'switch' | 'checkbox' | 'textarea';
 export declare type TableColumnRendererControlProps = {
     className?: string;
     disabled?: boolean;
@@ -134,6 +134,7 @@ export declare type TableFeatureProps<TType = unknown> = {
     enableColumnHiding?: boolean;
     enableColumnResizing?: boolean;
     enableRowExpansion?: boolean;
+    enableRowExpansionAll?: boolean;
     enableRowSelection?: TableConditionalRowProp<TType>;
     enableColumnOrdering?: boolean;
     enableFontSize?: boolean;

package/dist/primitives/Table/useTableManager/features/useTableRowExpansion.d.ts

@@ -1,5 +1,6 @@
 import { TableRowExpansionRenderer } from '../../types';
-export declare function useTableRowExpansion<TType = unknown>(isEnabled?: boolean, rowExpansionRenderer?: TableRowExpansionRenderer<TType>): {
+export declare function useTableRowExpansion<TType = unknown>(isEnabled?: boolean, canExpandAll?: boolean, rowExpansionRenderer?: TableRowExpansionRenderer<TType>): {
     isEnabled: boolean;
+    canExpandAll: boolean;
     rowExpansionRenderer: TableRowExpansionRenderer<TType> | undefined;
 };

package/dist/taco.cjs.development.js

@@ -4083,10 +4083,10 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(props, ref) {
     ...otherProps
   } = props;
   const isTransparent = color === 'transparent';
-  const className = cn('rounded-full border overflow-hidden whitespace-nowrap inline-flex items-center justify-center', {
+  const className = cn('rounded-full border box-border overflow-hidden whitespace-nowrap inline-flex items-center justify-center', {
     [`border ${getOutlineColorShadeClasses(color)}`]: outline,
-    [`border-transparent font-normal ${getSubtleColorShadeClasses(color)}`]: subtle,
-    [`border-transparent ${getColorShadeClasses(color)}`]: !outline && !subtle,
+    [`border-none font-normal ${getSubtleColorShadeClasses(color)}`]: subtle,
+    [`border-none ${getColorShadeClasses(color)}`]: !outline && !subtle,
     'h-4 min-w-0 py-0 px-1 text-xs': small,
     'h-2 w-2 min-w-0': compact,
     'font-bold': outline || !subtle,
@@ -4098,12 +4098,15 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(props, ref) {
     if (compact) {
       return /*#__PURE__*/React.createElement(VisuallyHidden, null, children);
     }
+    const contentToRender = typeof children === 'string' ? /*#__PURE__*/React.createElement("span", {
+      className: "items-center truncate"
+    }, children) : children;
     if (status) {
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-        className: cn('mr-1 h-2 w-2 rounded-full', getColorShadeClasses(color))
-      }), children);
+        className: cn('mr-1 h-2 w-2 shrink-0 rounded-full', getColorShadeClasses(color))
+      }), contentToRender);
     }
-    return children;
+    return contentToRender;
   };
   return /*#__PURE__*/React.createElement("span", Object.assign({}, otherProps, {
     "aria-atomic": "true",
@@ -10525,6 +10528,7 @@ const DEFAULT_PRESET = {
   enableColumnHiding: false,
   enableColumnResizing: false,
   enableRowExpansion: false,
+  enableRowExpansionAll: true,
   enableRowSelection: false,
   // custom -- common between all table types
   enableColumnOrdering: false,
@@ -10551,6 +10555,7 @@ const presets = {
     enableColumnHiding: true,
     enableColumnResizing: true,
     enableRowExpansion: true,
+    enableRowExpansionAll: true,
     enableRowSelection: true,
     // custom -- common between all table types
     enableColumnOrdering: true,
@@ -10576,6 +10581,7 @@ const presets = {
     enableColumnHiding: false,
     enableColumnResizing: false,
     enableRowExpansion: true,
+    enableRowExpansionAll: true,
     enableRowSelection: true,
     // custom -- common between all table types
     enableColumnOrdering: false,
@@ -10601,6 +10607,7 @@ const presets = {
     enableColumnHiding: false,
     enableColumnResizing: false,
     enableRowExpansion: true,
+    enableRowExpansionAll: true,
     enableRowSelection: false,
     // custom -- common between all table types
     enableColumnOrdering: false,
@@ -10618,7 +10625,7 @@ const presets = {
   }
 };
 function getTableFeaturePreset(props) {
-  var _props$enableRowActio, _props$enableRowClick, _props$enableRowDrag, _props$enableRowDrop, _props$enableRowGoto, _props$enableRowExpan, _props$enableRowSelec, _props$enableFilterin, _props$enableSearch, _props$enableSorting, _props$enableColumnFr, _props$enableColumnHi, _props$enableColumnRe, _props$enableColumnOr, _props$enableFontSize, _props$enableFooter, _props$enablePrinting, _props$enableRowActiv, _props$rowActions, _props$enableRowHeigh, _props$enableSaveSett;
+  var _props$enableRowActio, _props$enableRowClick, _props$enableRowDrag, _props$enableRowDrop, _props$enableRowGoto, _props$enableRowExpan, _props$enableRowExpan2, _props$enableRowSelec, _props$enableFilterin, _props$enableSearch, _props$enableSorting, _props$enableColumnFr, _props$enableColumnHi, _props$enableColumnRe, _props$enableColumnOr, _props$enableFontSize, _props$enableFooter, _props$enablePrinting, _props$enableRowActiv, _props$rowActions, _props$enableRowHeigh, _props$enableSaveSett;
   const presetOptions = props.preset ? presets[props.preset] : DEFAULT_PRESET;
   const enableRowActions = (_props$enableRowActio = props.enableRowActions) !== null && _props$enableRowActio !== void 0 ? _props$enableRowActio : presetOptions.enableRowActions;
   const enableRowClick = (_props$enableRowClick = props.enableRowClick) !== null && _props$enableRowClick !== void 0 ? _props$enableRowClick : presetOptions.enableRowClick;
@@ -10626,6 +10633,7 @@ function getTableFeaturePreset(props) {
   const enableRowDrop = (_props$enableRowDrop = props.enableRowDrop) !== null && _props$enableRowDrop !== void 0 ? _props$enableRowDrop : presetOptions.enableRowDrop;
   const enableRowGoto = (_props$enableRowGoto = props.enableRowGoto) !== null && _props$enableRowGoto !== void 0 ? _props$enableRowGoto : presetOptions.enableRowGoto;
   const enableRowExpansion = (_props$enableRowExpan = props.enableRowExpansion) !== null && _props$enableRowExpan !== void 0 ? _props$enableRowExpan : presetOptions.enableRowExpansion;
+  const enableRowExpansionAll = (_props$enableRowExpan2 = props.enableRowExpansionAll) !== null && _props$enableRowExpan2 !== void 0 ? _props$enableRowExpan2 : presetOptions.enableRowExpansionAll;
   const enableRowSelection = (_props$enableRowSelec = props.enableRowSelection) !== null && _props$enableRowSelec !== void 0 ? _props$enableRowSelec : presetOptions.enableRowSelection;
   return {
     // react-table built-in
@@ -10650,6 +10658,7 @@ function getTableFeaturePreset(props) {
     enableRowDrag: enableRowDrag && !!props.onRowDrag,
     enableRowDrop: enableRowDrop && !!props.onRowDrop,
     enableRowGoto: enableRowGoto && !!props.onRowGoto,
+    enableRowExpansionAll: enableRowExpansion && enableRowExpansionAll && !!props.rowExpansionRenderer,
     enableRowHeight: (_props$enableRowHeigh = props.enableRowHeight) !== null && _props$enableRowHeigh !== void 0 ? _props$enableRowHeigh : presetOptions.enableRowHeight,
     enableSaveSettings: (_props$enableSaveSett = props.enableSaveSettings) !== null && _props$enableSaveSett !== void 0 ? _props$enableSaveSett : presetOptions.enableSaveSettings
   };
@@ -10894,9 +10903,10 @@ function useTableRowClick(isEnabled = false, onRowClick) {
   };
 }
 
-function useTableRowExpansion(isEnabled = false, rowExpansionRenderer) {
+function useTableRowExpansion(isEnabled = false, canExpandAll = true, rowExpansionRenderer) {
   return {
     isEnabled,
+    canExpandAll,
     rowExpansionRenderer: isEnabled ? rowExpansionRenderer : undefined
   };
 }
@@ -11737,7 +11747,7 @@ function useTableManager(props, meta, internalColumns) {
   const rowClick = useTableRowClick(options.enableRowClick, props.onRowClick);
   const rowDrag = useTableRowDrag(options.enableRowDrag && !(meta !== null && meta !== void 0 && (_meta$editing = meta.editing) !== null && _meta$editing !== void 0 && _meta$editing.isEditing), props.onRowDrag);
   const rowDrop = useTableRowDrop(options.enableRowDrop, props.onRowDrop);
-  const rowExpansion = useTableRowExpansion(options.enableRowExpansion, props.rowExpansionRenderer);
+  const rowExpansion = useTableRowExpansion(options.enableRowExpansion, options.enableRowExpansionAll, props.rowExpansionRenderer);
   const rowGoto = useTableRowGoto(options.enableRowGoto, props.onRowGoto);
   const rowGroups = useTableRowGroups(props.rowActionsForGroup);
   const rowHeight = useTableRowHeight(options.enableRowHeight, settings.rowHeight);
@@ -12479,6 +12489,10 @@ function Header$3(context) {
   const {
     table
   } = context;
+  const tableMeta = table.options.meta;
+  if (!tableMeta.rowExpansion.canExpandAll) {
+    return null;
+  }
   const isSomeRowsExpanded = table.getIsSomeRowsExpanded();
   const handleClick = event => {
     event.stopPropagation();
@@ -13785,8 +13799,13 @@ function Summary(props) {
 }
 
 function Foot(props) {
-  const nonGroupedHeaders = props.table.getFooterGroups()[0].headers.filter(header => !header.column.getIsGrouped());
-  return /*#__PURE__*/React__default.createElement("tfoot", null, /*#__PURE__*/React__default.createElement("tr", null, nonGroupedHeaders.map((header, index) => (/*#__PURE__*/React__default.createElement(Footer$3, {
+  const {
+    children,
+    table,
+    ...attributes
+  } = props;
+  const nonGroupedHeaders = table.getFooterGroups()[0].headers.filter(header => !header.column.getIsGrouped());
+  return /*#__PURE__*/React__default.createElement("tfoot", Object.assign({}, attributes), children, /*#__PURE__*/React__default.createElement("tr", null, nonGroupedHeaders.map((header, index) => (/*#__PURE__*/React__default.createElement(Footer$3, {
     key: header.id,
     header: header,
     index: index
@@ -14816,14 +14835,16 @@ const Tag$1 = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     ref: ref,
     "data-taco": "tag"
   }), /*#__PURE__*/React__default.createElement("span", {
-    className: "truncate px-2",
+    className: "flex items-center truncate px-2",
     ref: textRef
   }, icon ? typeof icon === 'string' ? (/*#__PURE__*/React__default.createElement(Icon, {
     name: icon,
-    className: "-ml-1 -mt-0.5 mr-1 !h-5 !w-5"
+    className: "-ml-1 mr-1 !h-5 !w-5"
   })) : (/*#__PURE__*/React__default.cloneElement(icon, {
-    className: 'mr-1 -ml-1 -mt-0.5 !h-5 !w-5'
-  })) : null, children), onDelete ? (/*#__PURE__*/React__default.createElement(Icon, {
+    className: 'mr-1 -ml-1 !h-5 !w-5'
+  })) : null, /*#__PURE__*/React__default.createElement("span", {
+    className: "truncate"
+  }, children)), onDelete ? (/*#__PURE__*/React__default.createElement(Icon, {
     name: "close",
     onClick: onDelete,
     className: "-ml-1.5 !h-6 !w-5 flex-shrink-0 cursor-pointer rounded-r p-0.5 hover:bg-black/5"
@@ -15102,12 +15123,13 @@ const Option$1 = /*#__PURE__*/React__default.forwardRef(function Select2Option(p
   }), hasValue ? (/*#__PURE__*/React__default.createElement(Icon, {
     name: "tick",
     className: "pointer-events-none invisible -mx-0.5 !h-4 !w-4 group-aria-selected:visible"
-  })) : null, isTag ? (/*#__PURE__*/React__default.createElement(Tag$1, {
+  })) : null, typeof children !== 'string' ? (/*#__PURE__*/React__default.createElement("span", null, children)) : isTag ? (/*#__PURE__*/React__default.createElement(Tag$1, {
     className: "pointer-events-none my-1",
     color: color,
     icon: prefix
   }, children)) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, prefix ? typeof prefix === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
-    name: prefix
+    name: prefix,
+    className: "!h-5 !w-5"
   }) : prefix : null, /*#__PURE__*/React__default.createElement("span", {
     className: "flex w-full justify-between"
   }, /*#__PURE__*/React__default.createElement("span", {
@@ -15116,9 +15138,10 @@ const Option$1 = /*#__PURE__*/React__default.forwardRef(function Select2Option(p
     className: "text-grey-700 -mt-1.5 mb-1.5 text-xs"
   }, description) : null), /*#__PURE__*/React__default.createElement("span", {
     className: "flex flex-col self-center"
-  }, postfix ? typeof postfix === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
-    name: postfix
-  }) : postfix : null)))), popover ? (/*#__PURE__*/React__default.createElement(IconButton, {
+  }, postfix ? typeof postfix === 'string' ? (/*#__PURE__*/React__default.createElement(Icon, {
+    name: postfix,
+    className: "!h-5 !w-5"
+  })) : postfix : null)))), popover ? (/*#__PURE__*/React__default.createElement(IconButton, {
     icon: "ellipsis-vertical",
     appearance: "discrete",
     className: cn('group-aria-current:visible invisible -mr-1 ml-auto !h-5 min-h-[theme(spacing.6)] !w-5 min-w-[theme(spacing.6)] hover:!bg-black/[.08] focus:!shadow-none group-hover:visible', {
@@ -15284,7 +15307,7 @@ const Single = /*#__PURE__*/React__default.forwardRef(function Select2TriggerSin
     readOnly,
     tags
   } = useSelect2Context();
-  const contentClassName = cn('truncate items-center gap-1');
+  const contentClassName = cn('truncate flex items-center gap-1');
   const currentValue = children.find(matchesValue(value));
   let output;
   if (placeholder && currentValue === undefined) {
@@ -15294,13 +15317,13 @@ const Single = /*#__PURE__*/React__default.forwardRef(function Select2TriggerSin
     }, placeholder);
   } else if (currentValue) {
     if (tags && emptyValue !== value) {
-      output = /*#__PURE__*/React__default.createElement(Tag$1, {
+      if (typeof currentValue.props.children === 'string') output = /*#__PURE__*/React__default.createElement(Tag$1, {
         className: "truncate",
         color: currentValue.props.color,
         disabled: disabled,
         icon: currentValue.props.prefix,
         readOnly: readOnly
-      }, currentValue.props.children);
+      }, currentValue.props.children);else output = currentValue.props.children;
     } else {
       output = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, currentValue.props.prefix ? typeof currentValue.props.prefix === 'string' ? (/*#__PURE__*/React__default.createElement(Icon, {
         name: currentValue.props.prefix,
@@ -15351,7 +15374,7 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
     }, valuesAsChildren.length === 0 ? (/*#__PURE__*/React__default.createElement(Placeholder, {
       disabled: disabled,
       readOnly: readOnly
-    }, placeholder)) : valuesAsChildren.map(child => (/*#__PURE__*/React__default.createElement(Tag$1, {
+    }, placeholder)) : valuesAsChildren.map(child => typeof child.props.children === 'string' ? (/*#__PURE__*/React__default.createElement(Tag$1, {
       key: String(child.props.value),
       className: "truncate",
       color: tags ? child.props.color : undefined,
@@ -15365,7 +15388,23 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
         }
       },
       readOnly: readOnly
-    }, child.props.children)))));
+    }, child.props.children)) : (/*#__PURE__*/React__default.cloneElement(child.props.children, {
+      key: String(child.props.value),
+      className: '!pr-0 !pl-1.5',
+      children: (/*#__PURE__*/React__default.createElement("span", {
+        className: "flex items-center"
+      }, child.props.children.props.children, /*#__PURE__*/React__default.createElement(Icon, {
+        name: "close",
+        onClick: event => {
+          event === null || event === void 0 ? void 0 : event.stopPropagation();
+          event === null || event === void 0 ? void 0 : event.preventDefault();
+          if (!disabled && !readOnly) {
+            setValue(child.props.value);
+          }
+        },
+        className: "ml-0.5 !h-5 !w-5 shrink-0 cursor-pointer rounded-r p-0.5 hover:bg-black/5"
+      })))
+    })))));
   } else {
     content = /*#__PURE__*/React__default.createElement(MultipleValue, {
       onClick: forwardClick,
@@ -15396,6 +15435,18 @@ const MultipleValue = ({
   } = useSelect2Context();
   const [contentRef, setContentRef] = React__default.useState(null);
   const boundaryIndex = contentRef ? getIndexOfFirstChildOverflowingParent(contentRef, 30) : undefined;
+  // Retrieves the relevant text content from any JSX.Element passed as a select option, handling nested elements, arrays, and direct text
+  const getTooltipTitle = child => {
+    const children = child.props.children;
+    if (typeof children === 'string') return children;
+    if (typeof children.props.children === 'string') {
+      return children.props.children;
+    }
+    if (Array.isArray(children.props.children)) {
+      return children.props.children.filter(item => typeof item === 'string');
+    }
+    return '';
+  };
   return /*#__PURE__*/React__default.createElement("div", {
     className: "relative flex w-full items-center gap-1 overflow-hidden",
     onClick: onClick
@@ -15406,26 +15457,35 @@ const MultipleValue = ({
     disabled: disabled,
     readOnly: readOnly
   }, placeholder)) : valuesAsChildren.map((child, index) => {
-    const tag = /*#__PURE__*/React__default.createElement(Tag$1, {
-      key: String(child.props.value),
+    const classNames = {
+      truncate: index === boundaryIndex,
+      hidden: boundaryIndex !== undefined && boundaryIndex !== null ? index > boundaryIndex : false
+    };
+    let output;
+    if (typeof child.props.children === 'string') {
+      output = /*#__PURE__*/React__default.createElement(Tag$1, {
+        key: String(child.props.value),
+        className: cn('cursor-pointer', classNames),
+        color: tags ? child.props.color : undefined,
+        disabled: disabled,
+        icon: child.props.prefix,
+        readOnly: readOnly
+      }, child.props.children);
+    } else output = /*#__PURE__*/React__default.cloneElement(child.props.children, {
       className: cn('cursor-pointer', {
-        truncate: index === boundaryIndex,
-        hidden: boundaryIndex !== undefined && boundaryIndex !== null ? index > boundaryIndex : false
-      }),
-      color: tags ? child.props.color : undefined,
-      disabled: disabled,
-      icon: child.props.prefix,
-      readOnly: readOnly
-    }, child.props.children);
+        'shrink-0': index !== boundaryIndex
+      }, classNames),
+      key: String(child.props.value)
+    });
     if (index === boundaryIndex) {
       return /*#__PURE__*/React__default.createElement(Tooltip, {
         key: String(child.props.value),
-        title: String(child.props.children)
-      }, tag);
+        title: String(getTooltipTitle(child))
+      }, output);
     }
-    return tag;
+    return output;
   })), boundaryIndex !== undefined && boundaryIndex !== null && boundaryIndex < valuesAsChildren.length - 1 ? (/*#__PURE__*/React__default.createElement(Tooltip, {
-    title: valuesAsChildren.slice(boundaryIndex + 1).map(child => child ? String(child.props.children) : '').join(', ')
+    title: valuesAsChildren.slice(boundaryIndex + 1).map(child => child ? String(getTooltipTitle(child)) : '').join(', ')
   }, /*#__PURE__*/React__default.createElement(Badge, {
     className: "flex-shrink-0"
   }, "+", valuesAsChildren.length - (boundaryIndex + 1)))) : null);
@@ -16299,10 +16359,11 @@ function guessComparatorsBasedOnControl(column) {
   return getDataTypeProperties(columnMeta.dataType).filterComparators;
 }
 
+const FilterContext = /*#__PURE__*/React__default.createContext([]);
+
 const FilterColumn = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   const {
     allColumns,
-    filters,
     onChange: handleChange,
     value = null,
     ...attributes
@@ -16310,6 +16371,7 @@ const FilterColumn = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   const {
     texts
   } = useLocalization();
+  const filters = React__default.useContext(FilterContext);
   const selectedColumn = allColumns.find(column => column.id === value);
   const warning = selectedColumn && !selectedColumn.getIsVisible();
   return /*#__PURE__*/React__default.createElement("div", {
@@ -16475,6 +16537,7 @@ function Control(props) {
   } = props;
   const controlRenderer = column === null || column === void 0 ? void 0 : (_column$columnDef$met2 = column.columnDef.meta) === null || _column$columnDef$met2 === void 0 ? void 0 : _column$columnDef$met2.control;
   const dataType = column === null || column === void 0 ? void 0 : (_column$columnDef$met3 = column.columnDef.meta) === null || _column$columnDef$met3 === void 0 ? void 0 : _column$columnDef$met3.dataType;
+  const filters = React__default.useContext(FilterContext);
   React.useEffect(() => {
     // Set value to false only after first render of the control (when it's undefined) after setting the FilterColumn value, because we don't want to change then the value every time filter is opened
     if ((controlRenderer === 'switch' || controlRenderer === 'checkbox') && value === undefined) {
@@ -16486,7 +16549,7 @@ function Control(props) {
       ...attributes,
       setValue: value => onChange(value),
       value
-    }), {
+    }, undefined, filters), {
       ['data-query-selector']: querySelector,
       className: 'focus:yt-focus'
     });
@@ -16528,7 +16591,6 @@ function Filter$1(props) {
   const {
     allColumns,
     filter,
-    filters,
     onChange: handleChange,
     onRemove,
     position
@@ -16603,7 +16665,6 @@ function Filter$1(props) {
     className: "flex min-h-[theme(spacing.8)] w-14 flex-shrink-0 items-center justify-end pr-2 text-right"
   }, position > 0 ? texts.table.filters.conditions.and : texts.table.filters.conditions.where), /*#__PURE__*/React__default.createElement(FilterColumn, {
     allColumns: allColumns,
-    filters: filters,
     onChange: handleChangeColumn,
     value: id,
     ref: ref
@@ -16707,7 +16768,9 @@ function ManageFiltersPopover(props) {
   };
   return /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps, {
     onChange: handleClose
-  }), /*#__PURE__*/React__default.createElement(Popover.Content, null, /*#__PURE__*/React__default.createElement("div", {
+  }), /*#__PURE__*/React__default.createElement(Popover.Content, null, /*#__PURE__*/React__default.createElement(FilterContext.Provider, {
+    value: filters
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: "flex w-[40rem] flex-col gap-4"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "flex h-8"
@@ -16723,7 +16786,6 @@ function ManageFiltersPopover(props) {
     key: `filter_${index}`,
     allColumns: allColumns,
     filter: filter,
-    filters: filters,
     position: index,
     onChange: handleChangeFilter,
     onRemove: filters.length > 0 && filters.some(f => f.id) || filters.length > 1 ? handleRemoveFilter : undefined
@@ -16739,7 +16801,7 @@ function ManageFiltersPopover(props) {
   }, texts.table.filters.buttons.clear), /*#__PURE__*/React__default.createElement(Button$1, {
     appearance: "primary",
     onClick: handleApply
-  }, texts.table.filters.buttons.apply)))));
+  }, texts.table.filters.buttons.apply))))));
 }
 
 function Filters(props) {
@@ -16859,6 +16921,7 @@ function TableGrid(props) {
   var _table$state$grouping;
   const {
     enableHorizontalArrowKeyNavigation,
+    footerRows,
     table,
     ...attributes
   } = props;
@@ -16901,7 +16964,7 @@ function TableGrid(props) {
     } : table.renderer.style
   }, table.renderer.rows, props.children), table.meta.footer.isEnabled ? /*#__PURE__*/React__default.createElement(Foot, {
     table: table.instance
-  }) : null)))));
+  }, footerRows) : null)))));
 }
 
 function Column$1(_) {
@@ -18493,6 +18556,14 @@ const shortcut = {
   meta: true,
   shift: false
 };
+function isTableScrolled(ref) {
+  if (ref.current) {
+    var _ref$current, _ref$current$querySel, _ref$current2, _ref$current2$querySe;
+    const height = parseFloat(((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : (_ref$current$querySel = _ref$current.querySelector('tbody')) === null || _ref$current$querySel === void 0 ? void 0 : _ref$current$querySel.style.height) || '0') + parseFloat(((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : (_ref$current2$querySe = _ref$current2.querySelector('tbody')) === null || _ref$current2$querySe === void 0 ? void 0 : _ref$current2$querySe.style.paddingBottom) || '0');
+    return height > ref.current.scrollHeight;
+  }
+  return false;
+}
 
 function useTableEditingListener(table, tableRef, scrollToIndex) {
   const tableMeta = table.options.meta;
@@ -20037,10 +20108,10 @@ function CreateNewRow(props) {
   var _temporaryRows$0$tabl, _temporaryRows$, _table$getState$colum;
   const {
     buttonRef,
+    isScrolled,
     scrollToIndex,
     table,
-    tableMeta,
-    tableRef
+    tableMeta
   } = props;
   const {
     texts
@@ -20073,11 +20144,9 @@ function CreateNewRow(props) {
       keys: shortcut
     });
   }
-  const isScrolled = tableRef.current ? tableRef.current.scrollHeight > tableRef.current.clientHeight : false;
   const className = cn('group/row border-grey-300 !sticky z-[21]', {
     'bottom-10': tableMeta.footer.isEnabled,
     'bottom-0': !tableMeta.footer.isEnabled,
-    'border-t-2': isScrolled,
     'border-b': !isScrolled
   });
   return /*#__PURE__*/React__default.createElement("tr", {
@@ -20102,6 +20171,7 @@ function CreateNewRow(props) {
 function TemporaryRow(props) {
   const {
     createRowButtonRef,
+    isScrolled,
     table,
     tableMeta,
     tableRef
@@ -20164,10 +20234,9 @@ function TemporaryRow(props) {
       }
     }
   };
-  const isScrolled = tableRef.current ? tableRef.current.scrollHeight > tableRef.current.clientHeight : false;
   const className = cn('group/row border-grey-300 !sticky z-[22]', {
-    'bottom-[calc(5rem_+_3px)] data-[row-editing-move]:bottom-[calc(5rem_+_2px)]': tableMeta.footer.isEnabled,
-    'bottom-[calc(2.5rem_+_3px)] data-[row-editing-move]:bottom-[calc(2.5rem_+_2px)]': !tableMeta.footer.isEnabled,
+    'bottom-[calc(5rem_+_2px)] data-[row-editing-move]:bottom-[calc(5rem_+_2px)]': tableMeta.footer.isEnabled,
+    'bottom-[calc(2.5rem_+_2px)] data-[row-editing-move]:bottom-[calc(2.5rem_+_2px)]': !tableMeta.footer.isEnabled,
     'border-t-2 shadow-[0px_-5px_20px_0px_rgba(0,0,0,0.1)] [&>td]:!border-b-0': isScrolled
   });
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, table.getBottomRows().map(row => (/*#__PURE__*/React__default.createElement(Row, {
@@ -20203,6 +20272,17 @@ const BaseTable3 = /*#__PURE__*/fixedForwardRef(function BaseTable3(props, ref)
   };
   const hasAlertErrors = table3.meta.editing.getErrorsShownInAlert().length;
   const hasCreateWorkflow = table3.meta.editing.isEnabled && props.onEditingCreate;
+  const isScrolled = isTableScrolled(table3.ref);
+  let createWorkflow;
+  if (hasCreateWorkflow) {
+    createWorkflow = /*#__PURE__*/React__default.createElement(CreateNewRow, {
+      buttonRef: table3.meta.editing.createRowButtonRef,
+      isScrolled: isScrolled,
+      scrollToIndex: table3.renderer.scrollToIndex,
+      table: table3.instance,
+      tableMeta: table3.meta
+    });
+  }
   return /*#__PURE__*/React__default.createElement(Table, null, /*#__PURE__*/React__default.createElement(Table.Toolbar, {
     table: table3
   }, table3.meta.editing.isEnabled ? (/*#__PURE__*/React__default.createElement(Editing, {
@@ -20215,19 +20295,15 @@ const BaseTable3 = /*#__PURE__*/fixedForwardRef(function BaseTable3(props, ref)
     tableRef: table3.ref
   })) : null, /*#__PURE__*/React__default.createElement(Table.Grid, Object.assign({}, gridAttributes, {
     "data-taco": "table3",
+    footerRows: hasCreateWorkflow && isScrolled ? createWorkflow : undefined,
     table: table3
   }), hasCreateWorkflow ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TemporaryRow, {
     createRowButtonRef: table3.meta.editing.createRowButtonRef,
+    isScrolled: isScrolled,
     table: table3.instance,
     tableMeta: table3.meta,
     tableRef: table3.ref
-  }), /*#__PURE__*/React__default.createElement(CreateNewRow, {
-    buttonRef: table3.meta.editing.createRowButtonRef,
-    scrollToIndex: table3.renderer.scrollToIndex,
-    table: table3.instance,
-    tableMeta: table3.meta,
-    tableRef: table3.ref
-  }))) : null));
+  }), !isScrolled ? createWorkflow : null)) : null));
 });
 const Table3 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   const stringifiedChildren = String(props.children);