@economic/taco 2.2.3 → 2.2.5

package/dist/taco.cjs.development.js

@@ -15979,6 +15979,10 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
   const [internalRef, setInternalRef] = React__default.useState(null);
   React__default.useLayoutEffect(() => {
     if (internalRef && length) {
+      // the actions column size gets set by the column itself
+      if (id === COLUMN_ID) {
+        return;
+      }
       table.setColumnSizing(sizes => ({
         ...sizes,
         [id]: internalRef.getBoundingClientRect().width
@@ -16211,6 +16215,21 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
   const {
     texts
   } = useLocalization();
+  const ref = React__default.useRef(null);
+  /*
+  const size = table.getState().columnSizing[COLUMN_ID];
+   // the actions column needs to set its size based on its content, not the actual column
+  // so we do this here instead of in the header
+  React.useLayoutEffect(() => {
+      if (ref.current && !size) {
+          const width = ref.current.getBoundingClientRect().width;
+           table.setColumnSizing(sizes => ({
+              ...sizes,
+              [COLUMN_ID]: width,
+          }));
+      }
+  }, [ref.current]);
+  */
   let content;
   // We don't want to show actions in edit mode, since we have editing actions,
   // which is shown in edit mode instead.
@@ -16219,7 +16238,8 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
     const actionsOnRow = visibleActions.length === actionsLength ? visibleActions : visibleActions.slice(0, actionsLength - 1);
     const actionsInMenu = visibleActions.slice(visibleActions.length === actionsLength ? actionsLength : actionsLength - 1);
     content = /*#__PURE__*/React__default.createElement("span", {
-      className: "-mb-2 -mt-2 flex justify-end text-right"
+      className: "-mb-2 -mt-2 flex justify-end pl-2 text-right",
+      ref: ref
     }, actionsOnRow.map((button, index) => {
       var _ref, _button$props$tooltip;
       const tooltip = String((_ref = (_button$props$tooltip = button.props.tooltip) !== null && _button$props$tooltip !== void 0 ? _button$props$tooltip : button.props['aria-label']) !== null && _ref !== void 0 ? _ref : '');
@@ -16268,7 +16288,7 @@ function createRowActionsColumn$1() {
     footer: Footer$4,
     meta: {
       align: 'right',
-      className: cn('items-center print:opacity-0 [[role="table"][data-editing="false"]_&]:group-[[data-current="true"]]/row:sticky [[role="table"][data-pause-hover="false"][data-editing="false"]_&]:group-hover/row:sticky right-0 !pl-0 !pr-1', '[[role="table"][data-editing="false"]_&]:group-[[data-current="true"]]/row:shadow-[-6px_0px_6px] [[role="table"][data-pause-hover="false"][data-editing="false"]_&]:group-hover/row:shadow-[-6px_0px_6px]', 'group-[[data-current="true"][data-selected="false"]]/row:text-grey-200', 'group-[[data-selected="true"]]/row:text-blue-100', 'group-[[data-selected="false"]:hover]/row:text-grey-100'),
+      className: cn('!pt-[var(--table3-row-padding)] print:opacity-0 [[role="table"][data-editing="false"]_&]:group-[[data-current="true"]]/row:sticky [[role="table"][data-pause-hover="false"][data-editing="false"]_&]:group-hover/row:sticky right-0 !pl-1 !pr-1', '[[role="table"][data-editing="false"]_&]:group-[[data-current="true"]]/row:shadow-[-6px_0px_6px] [[role="table"][data-pause-hover="false"][data-editing="false"]_&]:group-hover/row:shadow-[-6px_0px_6px]', 'group-[[data-current="true"][data-selected="false"]]/row:text-grey-200', 'group-[[data-selected="true"]]/row:text-blue-100', 'group-[[data-selected="false"]:hover]/row:text-grey-100'),
       enableOrdering: false,
       enableSearch: false,
       enableTruncate: false,
@@ -16280,7 +16300,6 @@ function createRowActionsColumn$1() {
   };
 }
 
-const REACT_TABLE_DEFAULT_COLUMN_SIZE_DO_NOT_CHANGE = 150;
 const useCssGrid = table => {
   const allVisibleColumns = table.getVisibleLeafColumns();
   const columnSizing = table.getState().columnSizing;
@@ -16294,7 +16313,7 @@ const useCssGrid = table => {
       const width = columnSizing[column.id];
       if (isInternalColumn$1(column.id)) {
         if (column.id === COLUMN_ID) {
-          size = column.getSize() !== REACT_TABLE_DEFAULT_COLUMN_SIZE_DO_NOT_CHANGE ? `minmax(${column.getSize()}px, auto)` : '1fr';
+          size = 'minmax(max-content, auto)';
         } else {
           size = `${column.getSize()}px`;
         }
@@ -16572,7 +16591,7 @@ function useSettingsStateListener$1(table, onChangeSettings) {
       }), 250);
     }
     return () => clearTimeout(handler);
-  }, [onChangeSettings, meta.columnFreezing.frozenColumnIndex, state.columnOrder, state.columnPinning, state.columnSizing, state.columnVisibility, meta.search.excludeUnmatchedResults, meta.fontSize.size, meta.rowHeight.height, meta.printing.printWarningDialogVisibility, state.sorting]);
+  }, [meta.columnFreezing.frozenColumnIndex, state.columnOrder, state.columnPinning, state.columnSizing, state.columnVisibility, meta.search.excludeUnmatchedResults, meta.fontSize.size, meta.rowHeight.height, meta.printing.printWarningDialogVisibility, state.sorting]);
 }
 
 var Table3FilterComparator;
@@ -17686,7 +17705,7 @@ function createRowSelectionColumn$1(onRowDrag) {
     footer: Footer$4,
     meta: {
       align: 'center',
-      className: 'items-center !justify-end !p-0 !pr-0.5',
+      className: '!pt-[var(--table3-row-padding)] !justify-end !p-0 !pr-0.5',
       enableOrdering: false,
       enableSearch: false,
       enableTruncate: false,
@@ -17745,6 +17764,7 @@ const MemoedCell$2 = /*#__PURE__*/React__default.memo(function MemoedCell(props)
       title: title
     }, /*#__PURE__*/React__default.createElement(IconButton, {
       appearance: "discrete",
+      className: "-mt-1.5",
       icon: isExpanded ? 'chevron-down' : 'chevron-right',
       onClick: handleClick,
       tabIndex: tabIndex,
@@ -17778,7 +17798,7 @@ function createRowExpansionColumn$1(expandedRowRenderer) {
     footer: Footer$4,
     meta: {
       align: 'center',
-      className: 'items-center !p-0',
+      className: '!p-0 !pt-[var(--table3-row-padding)]',
       enableOrdering: false,
       enableSearch: false,
       enableTruncate: false,
@@ -17840,7 +17860,7 @@ const Cell$6 = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
   }, /*#__PURE__*/React__default.createElement(Icon, {
     "aria-label": texts.table3.columns.drag.tooltip,
     name: "drag",
-    className: "text-grey-darkest invisible w-[20px] cursor-grab active:cursor-grabbing group-hover/row:visible group-[[aria-grabbed='true']]/row:text-white"
+    className: "text-grey-darkest invisible -mt-1 w-[20px] cursor-grab active:cursor-grabbing group-hover/row:visible group-[[aria-grabbed='true']]/row:text-white"
   })));
 });
 function createRowDragColumn(onRowDrag) {
@@ -17854,7 +17874,7 @@ function createRowDragColumn(onRowDrag) {
     footer: Footer$4,
     meta: {
       align: 'center',
-      className: 'items-center !p-0',
+      className: '!p-0 !pt-[var(--table3-row-padding)]',
       enableOrdering: false,
       enableSearch: false,
       enableTruncate: false,
@@ -20616,7 +20636,7 @@ const SecondaryNavigation = /*#__PURE__*/React__default.forwardRef(function Seco
 });
 
 const MenuButton = /*#__PURE__*/React__default.forwardRef(function MenuButton(props, ref) {
-  const className = cn(getButtonClasses$1(false), 'mr-1 !bg-transparent hover:!bg-white/[.08] focus:!bg-white/[.08]] lg:hidden z-[2]');
+  const className = cn(getButtonClasses$1(false), 'mr-1 !bg-transparent hover:!bg-white/[.08] focus:!bg-white/[.08]] lg:hidden z-[2] !text-white');
   return /*#__PURE__*/React__default.createElement(IconButton, Object.assign({}, props, {
     className: className,
     "data-taco": "header-toggle-sidebar",