@economic/taco 2.37.2 → 2.39.0

package/dist/taco.cjs.development.js

@@ -4211,6 +4211,14 @@ function isElementInteractive(element) {
 function isElementInsideTable3OrReport(element) {
   return !!(element !== null && element !== void 0 && element.closest('[data-taco^=table]'));
 }
+function setDataFocusAttribute(target) {
+  target.setAttribute('data-focus', 'programmatic');
+  const cleanup = () => {
+    target.removeAttribute('data-focus');
+    target.removeEventListener('blur', cleanup);
+  };
+  target.addEventListener('blur', cleanup);
+}
 
 function isPressingMetaKey(event) {
   return isMacOs() ? event.metaKey : event.ctrlKey;
@@ -8966,7 +8974,9 @@ const OverflowGroup = /*#__PURE__*/React__default.forwardRef(function OverflowGr
   })), 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$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, null, hiddenChildren.map(sanitizeButtonPropsForMenuItem)))),
+    menu: menuProps => ( /*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, null, hiddenChildren.map((child, index) => props.wrapChild ? ( /*#__PURE__*/React__default.createElement(Menu$1.Item, {
+      key: index
+    }, child)) : sanitizeButtonPropsForMenuItem(child, index))))),
     ref: buttonRefCallback
   }) : null);
 });
@@ -10220,6 +10230,9 @@ function mapTableChildrenToColumns(props, settings, options, internalColumns) {
 function configureReactTableOptions(options, props) {
   var _options$enableFilter, _options$enableColumn, _options$enableRowExp, _options$enableColumn2, _options$enableColumn3, _options$enableSortin;
   const enableRowSelection = options.enableRowSelection || options.enableRowSelectionSingle;
+  // We don't want to expose internal Tanstack Table row, so we need to wrap enableRowSelection callback into additional function,
+  // which receives the React Table Row object and passes row.original to a callback.
+  const reactTableEnableRowSelection = typeof enableRowSelection === 'function' ? row => enableRowSelection(row.original) : enableRowSelection;
   const tableOptions = {
     defaultColumn: {
       enableColumnFilter: options.enableFiltering || true,
@@ -10238,8 +10251,8 @@ function configureReactTableOptions(options, props) {
     enableGrouping: true,
     enableHiding: (_options$enableColumn2 = options.enableColumnHiding) !== null && _options$enableColumn2 !== void 0 ? _options$enableColumn2 : false,
     enablePinning: (_options$enableColumn3 = options.enableColumnFreezing) !== null && _options$enableColumn3 !== void 0 ? _options$enableColumn3 : false,
-    enableRowSelection: enableRowSelection !== null && enableRowSelection !== void 0 ? enableRowSelection : false,
-    enableMultiRowSelection: options.enableRowSelectionSingle === true ? false : enableRowSelection,
+    enableRowSelection: reactTableEnableRowSelection !== null && reactTableEnableRowSelection !== void 0 ? reactTableEnableRowSelection : false,
+    enableMultiRowSelection: !options.enableRowSelectionSingle && reactTableEnableRowSelection,
     enableSorting: (_options$enableSortin = options.enableSorting) !== null && _options$enableSortin !== void 0 ? _options$enableSortin : false,
     // models for default features
     getExpandedRowModel: reactTable.getExpandedRowModel(),
@@ -10439,8 +10452,8 @@ function getTableFeaturePreset(props) {
     enableColumnHiding: (_props$enableColumnHi = props.enableColumnHiding) !== null && _props$enableColumnHi !== void 0 ? _props$enableColumnHi : presetOptions.enableColumnHiding,
     enableColumnResizing: (_props$enableColumnRe = props.enableColumnResizing) !== null && _props$enableColumnRe !== void 0 ? _props$enableColumnRe : presetOptions.enableColumnResizing,
     enableRowExpansion: enableRowExpansion && !!props.rowExpansionRenderer,
-    enableRowSelection: enableRowSelection && !!props.onRowSelect,
-    enableRowSelectionSingle: enableRowSelectionSingle && !!props.onRowSelect,
+    enableRowSelection: !!props.onRowSelect && enableRowSelection,
+    enableRowSelectionSingle: !!props.onRowSelect && enableRowSelectionSingle,
     // custom -- common between all table types
     enableColumnOrdering: (_props$enableColumnOr = props.enableColumnOrdering) !== null && _props$enableColumnOr !== void 0 ? _props$enableColumnOr : presetOptions.enableColumnOrdering,
     enableFontSize: (_props$enableFontSize = props.enableFontSize) !== null && _props$enableFontSize !== void 0 ? _props$enableFontSize : presetOptions.enableFontSize,
@@ -10737,11 +10750,12 @@ function useTableRowSelection(isEnabled = false) {
     const rows = table.getRowModel().rows;
     const tableMeta = table.options.meta;
     if (event.key === ' ') {
+      var _rows$rowActiveIndex;
       event.preventDefault();
       const rowActiveIndex = tableMeta.rowActive.rowActiveIndex;
-      if (rowActiveIndex !== undefined) {
-        var _rows$rowActiveIndex;
-        (_rows$rowActiveIndex = rows[rowActiveIndex]) === null || _rows$rowActiveIndex === void 0 ? void 0 : _rows$rowActiveIndex.toggleSelected();
+      if (rowActiveIndex !== undefined && (_rows$rowActiveIndex = rows[rowActiveIndex]) !== null && _rows$rowActiveIndex !== void 0 && _rows$rowActiveIndex.getCanSelect()) {
+        var _rows$rowActiveIndex2;
+        (_rows$rowActiveIndex2 = rows[rowActiveIndex]) === null || _rows$rowActiveIndex2 === void 0 ? void 0 : _rows$rowActiveIndex2.toggleSelected();
       }
       return;
     } else if ((event.ctrlKey || event.metaKey) && event.key === 'a') {
@@ -11357,22 +11371,22 @@ function useTableRowHeightListener(table) {
 }
 
 function useTableRowSelectionListener(table, onRowSelect) {
-  const rowSelection = table.getState().rowSelection;
+  const rows = table.getSelectedRowModel().flatRows;
+  const rowSelection = React__default.useMemo(() => rows.map(row => row.original), [rows]);
   useLazyEffect(() => {
-    const selectedRows = table.getSelectedRowModel().rows;
     if (table.options.enableRowSelection && typeof onRowSelect === 'function') {
       if (table.options.enableMultiRowSelection) {
-        onRowSelect(selectedRows.map(row => row.original));
+        onRowSelect(rowSelection);
       } else {
-        var _ref, _selectedRows$;
-        onRowSelect((_ref = [(_selectedRows$ = selectedRows[0]) === null || _selectedRows$ === void 0 ? void 0 : _selectedRows$.original]) !== null && _ref !== void 0 ? _ref : []);
+        var _ref;
+        onRowSelect((_ref = [rowSelection[0]]) !== null && _ref !== void 0 ? _ref : []);
       }
     }
     // It is important to stringify either rowSelection state or selectedRows, because we don't
     // know if the array or object that is returned by react-table has the same reference or not.
     // rowSelection state is used here because it will be more expensive to strigify selectedRows
     // than rowSelection state.
-  }, [table.options.enableRowSelection, table.options.enableMultiRowSelection, JSON.stringify(rowSelection)]);
+  }, [table.options.enableRowSelection, table.options.enableMultiRowSelection, rowSelection]);
 }
 
 function resetHighlightedColumnIndexes(value, table) {
@@ -11571,7 +11585,7 @@ function useTableManager(props, meta, internalColumns) {
   const rowGoto = useTableRowGoto(options.enableRowGoto, props.onRowGoto);
   const rowGroups = useTableRowGroups(props.rowActionsForGroup);
   const rowHeight = useTableRowHeight(options.enableRowHeight, settings.rowHeight);
-  const rowSelection = useTableRowSelection(options.enableRowSelection);
+  const rowSelection = useTableRowSelection(!!options.enableRowSelection);
   const search = useTableSearch(options.enableSearch, settings.excludeUnmatchedRecordsInSearch);
   const server = useTableServerLoading(props.loadPage, props.loadAll, props.pageSize);
   // TODO: memoise
@@ -11978,7 +11992,7 @@ function Row(props) {
 }
 
 function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex) {
-  var _table$getState$group, _ref, _virtualItems$padding, _virtualItems$padding2, _ref2, _virtualItems;
+  var _table$getState$group, _virtualItems$padding, _virtualItems$padding2, _virtualItems$padding3, _ref, _virtualItems;
   const tableMeta = table.options.meta;
   const rows = table.getRowModel().rows;
   const isTableRowGrouped = !!((_table$getState$group = table.getState().grouping) !== null && _table$getState$group !== void 0 && _table$getState$group.length);
@@ -12000,8 +12014,6 @@ function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex) {
     getScrollElement: () => tableRef.current,
     overscan: tableMeta.printing.isPrinting ? rows.length : undefined,
     rangeExtractor,
-    // correctly sets top and bottom spacing for the scroll container - very sensitive, don't change
-    scrollMargin: isTableRowGrouped ? 0 : scrollPaddingStart,
     // correctly sets the scroll padding offset, e.g. when keyboard navigating rows in the list
     scrollPaddingStart,
     scrollPaddingEnd: tableMeta.footer.isEnabled ? scrollPaddingEnd * 2 : scrollPaddingEnd
@@ -12029,8 +12041,9 @@ function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex) {
   }, [virtualItems.length, tableRef.current, totalSize, rows.length]);
   // use row 1 not 0, because 0 might be sticky in grouped tables and it's start value will always be 0
   const paddingStartIndex = isTableRowGrouped && rows.length > 1 ? 1 : 0;
+  const startValue = isTableRowGrouped ? ((_virtualItems$padding = virtualItems[paddingStartIndex]) === null || _virtualItems$padding === void 0 ? void 0 : _virtualItems$padding.start) - ((_virtualItems$padding2 = virtualItems[paddingStartIndex]) === null || _virtualItems$padding2 === void 0 ? void 0 : _virtualItems$padding2.size) : (_virtualItems$padding3 = virtualItems[paddingStartIndex]) === null || _virtualItems$padding3 === void 0 ? void 0 : _virtualItems$padding3.start;
   // styling for offsetting rows - this "is" the virtualisation
-  const [paddingTop, paddingBottom] = virtualItems.length > 0 ? [Math.max(0, (_ref = ((_virtualItems$padding = virtualItems[paddingStartIndex]) === null || _virtualItems$padding === void 0 ? void 0 : _virtualItems$padding.start) - ((_virtualItems$padding2 = virtualItems[paddingStartIndex]) === null || _virtualItems$padding2 === void 0 ? void 0 : _virtualItems$padding2.size)) !== null && _ref !== void 0 ? _ref : 0), Math.max(0, (_ref2 = totalSize - ((_virtualItems = virtualItems[virtualItems.length - 1]) === null || _virtualItems === void 0 ? void 0 : _virtualItems.end)) !== null && _ref2 !== void 0 ? _ref2 : 0)] : [0, 0];
+  const [paddingTop, paddingBottom] = virtualItems.length > 0 ? [Math.max(0, startValue !== null && startValue !== void 0 ? startValue : 0), Math.max(0, (_ref = totalSize - ((_virtualItems = virtualItems[virtualItems.length - 1]) === null || _virtualItems === void 0 ? void 0 : _virtualItems.end)) !== null && _ref !== void 0 ? _ref : 0)] : [0, 0];
   // ensure default active rows are scrolled to
   React__default.useEffect(() => {
     if (defaultRowActiveIndex) {
@@ -12260,7 +12273,7 @@ function Cell$1(context) {
   const onDragStart = event => {
     var _tableMeta$rowDrag$se, _tableMeta$rowDrag, _tableMeta$rowDrag$ha, _tableMeta$rowDrag2;
     let rows = [row];
-    if (table.options.enableRowSelection) {
+    if (row.getCanSelect()) {
       rows = row.getIsSelected() ? table.getSelectedRowModel().rows : [row, ...table.getSelectedRowModel().rows];
     }
     const data = rows.map(row => row.original);
@@ -12409,9 +12422,8 @@ function Header$4(context) {
     }, /*#__PURE__*/React__default.createElement(Checkbox, {
       "aria-label": title,
       className: "hover:border-blue !-mt-px",
-      key: String(`${isAllRowsSelected}_${isSomeRowsSelected}`),
       checked: isAllRowsSelected,
-      indeterminate: isSomeRowsSelected,
+      indeterminate: isSomeRowsSelected && !isAllRowsSelected,
       loading: tableMeta.server.loadAllStatus === exports.TableServerLoadAllState.Loading,
       onChange: handleChange
     }));
@@ -12440,6 +12452,7 @@ function Cell$3(context) {
     return null;
   }
   const isSelected = row.getIsGrouped() ? row.getIsAllSubRowsSelected() : row.getIsSelected();
+  const canSelect = row.getCanSelect();
   const title = isSelected ? texts.table.columns.select.deselect : texts.table.columns.select.select;
   if (table.options.enableMultiRowSelection) {
     const handleClick = function (event) {
@@ -12458,7 +12471,7 @@ function Cell$3(context) {
                 function _temp4() {
                   table.setRowSelection(currentRowSelection => ({
                     ...currentRowSelection,
-                    ...selectedRows.reduce((state, row) => ({
+                    ...selectedRows.filter(row => row.getCanSelect()).reduce((state, row) => ({
                       ...state,
                       [row.id]: true
                     }), {})
@@ -12486,6 +12499,7 @@ function Cell$3(context) {
       }
     };
     return /*#__PURE__*/React__default.createElement(Tooltip, {
+      hidden: !canSelect,
       title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, title, /*#__PURE__*/React__default.createElement(Shortcut, {
         className: "ml-2",
         keys: "Space"
@@ -12495,11 +12509,12 @@ function Cell$3(context) {
       className: "!mt-0",
       checked: isSelected,
       onClick: handleClick,
+      disabled: !canSelect,
       // this is necessary to remove console spam from eslint
       onChange: () => false
     }));
   } else {
-    const className = cn('!mt-0', getRadioClassnames());
+    const className = cn('!mt-0', getRadioClassnames(!canSelect));
     const handleClick = event => {
       event.stopPropagation();
       row.toggleSelected();
@@ -12507,7 +12522,8 @@ function Cell$3(context) {
     };
     return /*#__PURE__*/React__default.createElement("button", {
       className: className,
-      "aria-checked": isSelected,
+      "aria-checked": canSelect && isSelected,
+      disabled: !canSelect,
       onClick: handleClick,
       role: "radio",
       type: "button"
@@ -12778,7 +12794,7 @@ const DisplayRow = /*#__PURE__*/React__default.memo(function DisplayRow(props) {
     attributes['data-row-group'] = row.getIsGrouped() ? true : undefined;
   }
   // row selection
-  if (table.options.enableRowSelection) {
+  if (row.getCanSelect()) {
     attributes['data-row-selected'] = row.getIsSelected() || row.getIsAllSubRowsSelected() ? true : undefined;
   }
   // row expansion
@@ -12916,6 +12932,7 @@ function Resizer(props) {
     headerRef,
     id,
     isResizing,
+    onResetSize,
     onResize,
     setColumnSizing,
     width
@@ -12930,16 +12947,21 @@ function Resizer(props) {
   };
   // columns set to "grow" don't set a width, so if resize is being triggered on a grow column make sure to set a size first
   const handleResize = event => {
-    if (!Number.isInteger(width) && headerRef) {
-      setColumnSizing(sizes => ({
-        ...sizes,
-        [id]: headerRef.getBoundingClientRect().width
-      }));
-      setTimeout(() => {
-        onResize === null || onResize === void 0 ? void 0 : onResize(event);
-      }, 1);
+    // event.detail >= 2 means a user has clicked more than once quickly.
+    if (event.detail >= 2) {
+      onResetSize();
     } else {
-      onResize === null || onResize === void 0 ? void 0 : onResize(event);
+      if (!Number.isInteger(width) && headerRef) {
+        setColumnSizing(sizes => ({
+          ...sizes,
+          [id]: headerRef.getBoundingClientRect().width
+        }));
+        setTimeout(() => {
+          onResize === null || onResize === void 0 ? void 0 : onResize(event);
+        }, 1);
+      } else {
+        onResize === null || onResize === void 0 ? void 0 : onResize(event);
+      }
     }
   };
   const handle = /*#__PURE__*/React__default.createElement("div", {
@@ -13315,6 +13337,7 @@ function Header$5(props) {
   if (canResize) {
     memoedProps.isResizing = header.column.getIsResizing();
     memoedProps.onResize = header.getResizeHandler();
+    memoedProps.resetSize = header.column.resetSize;
   }
   if (canSort) {
     const handleSortToggle = sortDirection => {
@@ -13363,6 +13386,7 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
     onResize: handleResize,
     onSort: handleSort,
     onSortToggle: handleSortToggle,
+    resetSize: handleResetSize,
     scrollToIndex,
     setRowActiveIndex,
     setColumnSizing,
@@ -13424,6 +13448,7 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
     id: id,
     isResizing: isResizing,
     onResize: handleResize,
+    onResetSize: handleResetSize,
     setColumnSizing: setColumnSizing,
     width: width
   })) : null);
@@ -14607,7 +14632,7 @@ const Tag$1 = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   })) : null);
 });
 
-const createOptionClassName = (shouldPauseHoverState = false) => cn('group mb-px flex w-full text-sm flex-shrink-0 font-normal cursor-pointer items-center rounded bg-white px-2 leading-8 text-black aria-hidden:hidden gap-1.5 bg-white aria-current:wcag-grey-200 aria-disabled:text-black/25 aria-disabled:pointer-events-none', {
+const createOptionClassName = (shouldPauseHoverState = false) => cn('group mb-px flex w-full text-sm flex-shrink-0 font-normal cursor-pointer items-center rounded bg-white px-2 leading-8 text-black aria-hidden:hidden gap-1.5 bg-white aria-current:wcag-grey-200 aria-disabled:text-black/25 aria-disabled:pointer-events-none !justify-normal', {
   'hover:wcag-grey-200': !shouldPauseHoverState
 });
 const createCollectionClassName = () => 'flex flex-col gap-px';
@@ -15064,7 +15089,7 @@ const Single = /*#__PURE__*/React__default.forwardRef(function Select2TriggerSin
   }, output));
 });
 const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerMultiple(props, ref) {
-  var _buttonRef$current;
+  var _buttonRef$current2;
   const {
     children,
     emptyValue: _,
@@ -15081,6 +15106,11 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
   } = useSelect2Context();
   const buttonRef = useMergedRef(ref);
   const valuesAsChildren = values.map(value => children.find(c => c.props.value === value)).filter(c => !!c);
+  const forwardClick = event => {
+    var _buttonRef$current;
+    event.preventDefault();
+    (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.click();
+  };
   let content;
   let {
     className
@@ -15088,7 +15118,8 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
   if (open) {
     className = cn('!absolute z-20 !h-fit', buttonProps.className);
     content = /*#__PURE__*/React__default.createElement(ScrollArea, {
-      className: "my-1 flex max-h-[5.5rem] flex-col"
+      className: "my-1 flex max-h-[5.5rem] flex-col",
+      onClick: forwardClick
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "flex flex-wrap gap-1"
     }, valuesAsChildren.length === 0 ? ( /*#__PURE__*/React__default.createElement(Placeholder, {
@@ -15111,7 +15142,7 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
     }, child.props.children)))));
   } else {
     content = /*#__PURE__*/React__default.createElement(MultipleValue, {
-      key: String(open),
+      onClick: forwardClick,
       valuesAsChildren: valuesAsChildren,
       placeholder: placeholder
     });
@@ -15120,7 +15151,7 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
     className: "relative inline-flex h-fit flex-grow",
     "data-taco": "select2-container",
     style: {
-      width: open ? (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.offsetWidth : undefined
+      width: open ? (_buttonRef$current2 = buttonRef.current) === null || _buttonRef$current2 === void 0 ? void 0 : _buttonRef$current2.offsetWidth : undefined
     }
   }, /*#__PURE__*/React__default.createElement(Button$3, Object.assign({}, buttonProps, {
     className: className,
@@ -15128,30 +15159,23 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
   }), content));
 });
 const MultipleValue = ({
+  onClick,
   valuesAsChildren,
   placeholder
 }) => {
   const {
     disabled,
-    open,
     readOnly,
-    setValue,
     tags
   } = useSelect2Context();
   const [contentRef, setContentRef] = React__default.useState(null);
   const boundaryIndex = contentRef ? getIndexOfFirstChildOverflowingParent(contentRef, 30) : undefined;
-  const createClickHandler = tagValue => event => {
-    event === null || event === void 0 ? void 0 : event.stopPropagation();
-    event === null || event === void 0 ? void 0 : event.preventDefault();
-    if (!disabled && !readOnly) {
-      setValue(tagValue);
-    }
-  };
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "relative flex items-center gap-1 overflow-hidden"
+    className: "relative flex w-full items-center gap-1 overflow-hidden",
+    onClick: onClick
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex gap-1 truncate",
-    ref: el => setContentRef(el)
+    className: "flex flex-1 gap-1 truncate",
+    ref: ref => setContentRef(ref)
   }, valuesAsChildren.length === 0 ? ( /*#__PURE__*/React__default.createElement(Placeholder, {
     disabled: disabled,
     readOnly: readOnly
@@ -15165,7 +15189,6 @@ const MultipleValue = ({
       color: tags ? child.props.color : undefined,
       disabled: disabled,
       icon: child.props.prefix,
-      onDelete: open ? createClickHandler(child.props.value) : undefined,
       readOnly: readOnly
     }, child.props.children);
     if (index === boundaryIndex) {
@@ -15420,20 +15443,25 @@ const Create = props => {
     setOpen,
     setSearchQuery,
     setValidationError,
-    setValue
+    setValue,
+    createDialog,
+    createTriggerText
   } = useSelect2Context();
   const {
     texts
   } = useLocalization();
   // determine what the next color tag should be based on color occurences
   const nextColor = React__default.useMemo(() => getNextColor(options), [options]);
-  if (!searchQuery) {
+  const onCreateDialogClose = React__default.useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+  if (!createDialog && !searchQuery) {
     return null;
   }
-  const handleClick = function () {
+  const create = function (value) {
     try {
       const _temp = _catch(function () {
-        return Promise.resolve(handleCreate(searchQuery, nextColor)).then(function (item) {
+        return Promise.resolve(handleCreate(value, nextColor)).then(function (item) {
           setValue(item.value);
           if (multiple) {
             setSearchQuery('');
@@ -15454,17 +15482,33 @@ const Create = props => {
       event.currentTarget.click();
     }
   };
-  const className = cn('!w-[calc(100%_-_theme(spacing.3))] ml-1.5', createOptionClassName());
-  return /*#__PURE__*/React__default.createElement("button", {
-    className: className,
-    onClick: handleClick,
-    onKeyDown: handleKeyDown
-  }, /*#__PURE__*/React__default.createElement("span", {
+  const className = cn(createOptionClassName(), {
+    '!w-[calc(100%_-_theme(spacing.3))] ml-1.5': !createDialog,
+    'leading-normal border-grey-300 h-9 border-t py-2.5 px-4 !-mb-1.5': !!createDialog
+  });
+  const creationOptions = createDialog ? {
+    dialog: props => createDialog({
+      ...props,
+      onClose: onCreateDialogClose
+    }, searchQuery, create)
+  } : {
+    onClick: () => create(searchQuery)
+  };
+  const createText = createTriggerText || texts.select2.create;
+  return /*#__PURE__*/React__default.createElement(Button$1, Object.assign({
+    className: className
+  }, creationOptions, {
+    onKeyDown: handleKeyDown,
+    appearance: createDialog ? 'discrete' : 'default'
+  }), /*#__PURE__*/React__default.createElement("span", {
     className: "flex items-center gap-1.5"
-  }, texts.select2.create, /*#__PURE__*/React__default.createElement(Tag$1, {
+  }, createDialog ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Icon, {
+    className: "text-xs",
+    name: "circle-plus"
+  }), " ", createText)) : ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, createText, /*#__PURE__*/React__default.createElement(Tag$1, {
     color: nextColor,
     className: "cursor-pointer"
-  }, searchQuery)));
+  }, searchQuery)))));
 };
 
 const Collection$1 = props => {
@@ -15497,6 +15541,8 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     readOnly = false,
     tags = false,
     value: prop,
+    createDialog,
+    createTriggerText,
     ...otherProps
   } = props;
   const emptyOption = React__default.useMemo(() => {
@@ -15576,7 +15622,9 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     tags,
     fontSize,
     validationError,
-    value
+    value,
+    createDialog,
+    createTriggerText
   };
   const handleKeyDown = event => {
     var _listboxRef$current;
@@ -15661,7 +15709,8 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
       setValue(nextValue);
     }
   };
-  const className = cn('border-grey-300 rounded border bg-white py-1.5 shadow-md outline-none"', createCollectionClassName());
+  const className = cn('border-grey-300 rounded border bg-white py-1.5 shadow-md outline-none', createCollectionClassName());
+  const isInlineCreation = onCreate && !createDialog;
   return /*#__PURE__*/React__default.createElement(Select2Context.Provider, {
     value: context
   }, /*#__PURE__*/React__default.createElement(PopoverPrimitive.Root, {
@@ -15692,8 +15741,8 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     style: {
       minWidth: dimensions !== null && dimensions !== void 0 && dimensions.width ? `${dimensions.width}px` : undefined
     }
-  }, flattenedChildren.length > 0 || onCreate ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Search$2, {
-    placeholder: onCreate ? texts.select2.searchOrCreate : texts.select2.search,
+  }, flattenedChildren.length > 0 || isInlineCreation ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Search$2, {
+    placeholder: isInlineCreation ? texts.select2.searchOrCreate : texts.select2.search,
     ref: searchRef,
     onTabKeyPress: () => setTabTriggeredClose(true)
   }), multiple && selectOptions.length > 1 && ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button$1, {
@@ -15714,7 +15763,7 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
   })), /*#__PURE__*/React__default.createElement("span", null, texts.listbox.loading))) : flattenedChildren.length <= 0 ? ( /*#__PURE__*/React__default.createElement("div", {
     className: "text-grey-700 -mt-0.5 flex h-8 items-center px-2",
     role: "presentation"
-  }, "No results found...")) : ( /*#__PURE__*/React__default.createElement(Root$1, {
+  }, texts.listbox.empty)) : ( /*#__PURE__*/React__default.createElement(Root$1, {
     className: "flex flex-col gap-0.5",
     customSelector: ":scope > button",
     disabled: disabled,
@@ -16632,7 +16681,7 @@ function TableGrid(props) {
     scrollToIndex: table.renderer.scrollToIndex,
     style: props.children ? {
       ...table.renderer.style,
-      height: table.renderer.style.height + 41
+      height: table.renderer.style.height + ROW_HEIGHT_ESTIMATES[table.meta.rowHeight.height]
     } : table.renderer.style
   }, table.renderer.rows, props.children), table.meta.footer.isEnabled ? /*#__PURE__*/React__default.createElement(Foot, {
     table: table.instance
@@ -18275,8 +18324,12 @@ function willRowMoveAfterSorting(cell, change, rowIndex) {
 function animateCreateRow(id) {
   const templateRow = document.querySelector(`[data-row-id="${id}"]`);
   if (templateRow) {
-    var _templateRow$querySel;
-    (_templateRow$querySel = templateRow.querySelector(':first-child')) === null || _templateRow$querySel === void 0 ? void 0 : _templateRow$querySel.focus();
+    const firstCell = templateRow.querySelector(':first-child');
+    const checkbox = firstCell === null || firstCell === void 0 ? void 0 : firstCell.querySelector('[data-taco="checkbox"]');
+    firstCell === null || firstCell === void 0 ? void 0 : firstCell.focus();
+    if (checkbox) {
+      setDataFocusAttribute(checkbox);
+    }
     templateRow.scrollIntoView();
     const keyframes = [{
       background: '#b2c7ef'
@@ -19300,7 +19353,7 @@ function Row$2(props) {
   const isActiveRow = tableMeta.rowActive.rowActiveIndex === index;
   React__default.useEffect(() => {
     if (tableMeta.editing.isEditing && isActiveRow && tableMeta.editing.lastFocusedCellIndex === undefined) {
-      focusManager.focusFirst();
+      setDataFocusAttribute(focusManager.focusFirst());
     }
   }, [tableMeta.editing.isEditing, tableMeta.rowActive.rowActiveIndex, tableMeta.editing.lastFocusedCellIndex]);
   const handleFocus = React__default.useCallback(event => {
@@ -19682,11 +19735,18 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
   }), children);
 });
 const TabList = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
-  const className = cn('border-grey-300 flex flex-row m-0 mb-4', 'aria-orientation-horizontal:border-b', 'aria-orientation-vertical:border-r aria-orientation-vertical:m-0 aria-orientation-vertical:mr-4 aria-orientation-vertical:flex-col ', props.className);
+  const {
+    children
+  } = props;
+  const className = cn('border-grey-300 flex flex-row m-0 mb-4 print:hidden', 'aria-orientation-horizontal:border-b', 'aria-orientation-vertical:border-r aria-orientation-vertical:m-0 aria-orientation-vertical:mr-4 aria-orientation-vertical:flex-col', props.className);
   return /*#__PURE__*/React.createElement(TabsPrimitive.List, Object.assign({}, props, {
     className: className,
     ref: ref
-  }));
+  }), /*#__PURE__*/React.createElement(OverflowGroup, {
+    wrapChild: true,
+    className: "w-full",
+    moreButton: text => /*#__PURE__*/React.createElement(Button$1, null, text)
+  }, children));
 });
 const TabTrigger = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
   const {
@@ -19696,7 +19756,7 @@ const TabTrigger = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
     tooltip,
     ...otherProps
   } = props;
-  const triggerClassName = cn('group relative p-0.5 outline-none disabled:cursor-not-allowed disabled:text-black/50',
+  const triggerClassName = cn(props.className, 'group relative p-0.5 outline-none disabled:cursor-not-allowed disabled:text-black/50',
   // horizontal
   '[[aria-orientation="horizontal"]_&]:pb-1',
   // horizontal