@economic/taco 1.36.0 → 1.38.0

package/dist/taco.cjs.development.js

@@ -1460,6 +1460,36 @@ function IconExport(props, svgRef) {
 }
 var Export = /*#__PURE__*/React.forwardRef(IconExport);
 
+function IconEyeOff(props, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M3.53 2.47a.75.75 0 00-1.06 1.06l3.605 3.605a10.258 10.258 0 00-4.097 6.208.75.75 0 101.466.314 8.757 8.757 0 013.71-5.443l1.987 1.988a4 4 0 005.656 5.656l5.673 5.672a.75.75 0 101.06-1.06l-18-18zm10.207 12.328l-3.535-3.535a2.5 2.5 0 003.535 3.535zM12.061 9L16 12.94A4 4 0 0012.06 9zM8.815 5.754l1.218 1.218a8.753 8.753 0 0110.523 6.685.75.75 0 101.467-.314C21.032 8.718 16.922 5.25 12 5.25c-1.112 0-2.182.177-3.185.504z",
+    fill: "currentColor"
+  }));
+}
+var EyeOff = /*#__PURE__*/React.forwardRef(IconEyeOff);
+
+function IconEyeOn(props, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M3.444 13.657a8.753 8.753 0 0117.112 0 .75.75 0 101.466-.314C21.033 8.718 16.922 5.25 12 5.25c-4.922 0-9.031 3.468-10.022 8.093a.75.75 0 101.466.314zM14.5 13a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.5 0a4 4 0 11-8 0 4 4 0 018 0z",
+    fill: "currentColor"
+  }));
+}
+var EyeOn = /*#__PURE__*/React.forwardRef(IconEyeOn);
+
 function IconFilterSolid(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
@@ -3139,6 +3169,8 @@ const icons = {
   'export-to-excel': ExportToExcel,
   'export-to-pdf': ExportToPdf,
   export: Export,
+  'eye-off': EyeOff,
+  'eye-on': EyeOn,
   'filter-solid': FilterSolid,
   filter: Filter,
   'graph-solid': GraphSolid,
@@ -3754,25 +3786,25 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {
 });
 
 const getButtonClasses = () => {
-  return 'flex-shrink-0 min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center';
+  return 'flex-shrink-0 min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center focus-visible:yt-focus disabled:cursor-not-allowed';
 };
 const getAppearanceClasses = (value, icon = false) => {
   switch (value) {
     case 'primary':
-      return `wcag-blue-500 focus:bg-blue-500 focus:text-white focus:yt-focus active:bg-blue-700 active:text-white hover:bg-blue-300 hover:text-white hover:focus:bg-blue-300 hover:focus:border-blue-300 hover:focus:text-white disabled:hover:wcag-blue-500 disabled:hover:hover:border-blue-500`;
+      return `wcag-blue-500 enabled:hover:wcag-blue-700 enabled:hover:active:wcag-blue-500 disabled:bg-blue-500/50`;
     case 'danger':
-      return `wcag-red-500 focus:bg-red-500 focus:text-white focus:yt-focus-red active:bg-red-700 active:text-white hover:bg-red-300 hover:text-white hover:focus:bg-red-300 hover:focus:text-white disabled:hover:wcag-red-500`;
+      return `wcag-red-500 enabled:hover:wcag-red-700 enabled:hover:active:wcag-red-500 disabled:bg-red-500/50`;
     case 'ghost':
-      return `bg-white shadow-[inset_0_0_0_1px_theme(colors.blue.500)] text-blue-500 focus:bg-transparent focus:text-blue-500 active:bg-blue-100 focus:!shadow-[inset_0_0_0_1px_theme(colors.blue.500),0_0_0_2px_rgba(0,99,255,0.25)] active:text-blue-700 hover:bg-blue-100 hover:shadow-[inset_0_0_0_1px_theme(colors.blue.300)] hover:text-blue-300 hover:focus:bg-blue-100 hover:focus:!shadow-[inset_0_0_0_1px_theme(colors.blue.300),0_0_0_2px_rgba(0,99,255,0.25)] hover:focus:text-blue-300`;
+      return `bg-white border border-blue-500 text-blue-500 enabled:hover:bg-blue-100 enabled:hover:text-blue-700 disabled:border-blue-500/50 disabled:text-blue-500/50`;
     case 'discrete':
       {
         if (icon) {
-          return `bg-transparent text-black border-transparent focus:text-black focus:yt-focus active:text-black hover:text-grey-700 hover:focus:text-grey-700 disabled:hover:text-black `;
+          return `bg-transparent text-black enabled:hover:bg-grey-200/80 disabled:text-black/30`;
         }
-        return `yt-transparent focus:text-blue-500 focus:yt-focus active:text-blue-700 hover:text-blue-300 hover:focus:text-blue-300 disabled:hover:yt-transparent`;
+        return `bg-transparent text-blue-500 enabled:hover:text-blue-700 disabled:text-blue-500/50`;
       }
     default:
-      return `wcag-grey-200 focus:bg-grey-200 focus:yt-focus active:bg-grey-300 active:text-black hover:bg-grey-100 hover:text-grey-700 hover:focus:bg-grey-100 hover:focus:text-grey-700 disabled:hover:wcag-grey-200`;
+      return `wcag-grey-200 enabled:hover:wcag-grey-300 disabled:bg-grey-200/50 disabled:text-black/30`;
   }
 };
 const createButtonWithTooltip = (props, className, ref) => {
@@ -3833,9 +3865,7 @@ const Base = /*#__PURE__*/React.forwardRef(function IconButtonBase(props, ref) {
   } = props;
   const className = cn('w-8', getButtonClasses(), getAppearanceClasses(otherProps.appearance, true), {
     'rounded-full': rounded,
-    rounded: !rounded,
-    'cursor-not-allowed opacity-50': props.disabled,
-    'focus:yt-focus active:focus:yt-focus': !props.disabled
+    rounded: !rounded
   }, props.className);
   if (!icon) {
     return null;
@@ -3960,6 +3990,7 @@ const defaultLocalisationTexts = {
         selectAll: 'Select all rows'
       },
       menu: {
+        hideColumn: 'Hide column',
         freezeColumns: (count = 1) => count === 1 ? 'Freeze the first column' : `Freeze first ${count} columns`,
         unfreezeColumns: 'Unfreeze all columns'
       }
@@ -4113,8 +4144,6 @@ const Base$1 = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     ...otherProps
   } = props;
   const className = cn(getButtonClasses(), getAppearanceClasses(appearance), 'rounded px-3', {
-    'cursor-not-allowed opacity-50': props.disabled,
-    'focus:yt-focus active:focus:yt-focus': !props.disabled,
     'w-full': fluid
   }, props.className);
   return createButtonWithTooltip({
@@ -4322,7 +4351,6 @@ const useId = nativeId => {
 const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
   const {
     checked,
-    highlighted,
     indeterminate,
     invalid,
     label,
@@ -4330,14 +4358,14 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
     ...otherProps
   } = props;
   const id = useId(props.id);
-  const className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 mt-[0.1rem] focus:yt-focus',
-  //hover:shadow-[0_0_0_1px_rgba(235,235,235,1)]
-  {
-    'border-grey-300 text-blue-500 hover:text-blue-300 focus:border-blue-500 focus:hover:border-blue-300': !props.disabled && !invalid,
-    'border-grey-200 text-blue-300 cursor-not-allowed': props.disabled,
-    'bg-[rgba(255,255,0,0.2)] disabled:bg-[rgba(255,255,0,0.075)]': highlighted,
-    'border-red-500 text-red-500 hover:text-red-300 hover:border-red-300 focus:border-red-500 focus:hover:border-red-300': invalid && !props.disabled,
+  const className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 mt-[0.1rem] focus-visible:yt-focus disabled:cursor-not-allowed text-white', {
     'self-start': !!label
+  }, invalid ? {
+    'border-red-500 hover:border-red-700 aria-checked:border-red-500 aria-checked-mixed:border-red-500 aria-checked:bg-red-500 aria-checked-mixed:bg-red-500 aria-checked:hover:border-red-700 aria-checked-mixed:hover:border-red-700 aria-checked:hover:bg-red-700 aria-checked-mixed:hover:bg-red-700': !props.disabled,
+    'border-red-500/50 aria-checked:wcag-red-500/50 aria-checked-mixed:wcag-red-500/50': props.disabled
+  } : {
+    'border-grey-500 hover:border-grey-700 aria-checked:border-blue-500 aria-checked-mixed:border-blue-500 aria-checked:bg-blue-500 aria-checked-mixed:bg-blue-500 aria-checked:hover:border-blue-700 aria-checked-mixed:hover:border-blue-700 aria-checked:hover:bg-blue-700 aria-checked-mixed:hover:bg-blue-700': !props.disabled,
+    'border-grey-500/50 aria-checked:bg-blue-500/50 aria-checked-mixed:bg-blue-500/50': props.disabled
   }, props.className);
   let handleChange;
   if (onChange) {
@@ -4388,28 +4416,28 @@ const getInputClasses = props => {
   const disabled = props.disabled || !!props['aria-disabled'];
   const readOnly = props.readOnly || !!props['aria-readonly'];
   const invalid = props.invalid || !!props['aria-invalid'];
-  return cn('peer text-black text-sm border font-normal not-italic no-underline rounded flex items-center leading-6 px-2 relative w-full text-ellipsis transition-colors transition-opacity ease-in min-h-[theme(spacing.8)]', {
+  return cn('peer text-black text-sm border font-normal not-italic no-underline rounded flex items-center leading-6 px-2 relative w-full text-ellipsis transition-colors transition-opacity ease-in min-h-[theme(spacing.8)] focus-visible:yt-focus', {
     'bg-white': !props.highlighted && !readOnly,
     // default
-    'border-grey-300 focus:border-blue-300 focus:yt-focus': !invalid,
-    'hover:shadow-[0_0_0.1rem_theme(colors.grey.500)] active:border-blue-700': !invalid && !disabled,
+    'border-grey-300 enabled:hover:border-grey-500 disabled:border-grey-200': !invalid,
     // disabled
-    'border-grey-200 text-opacity-25 cursor-not-allowed placeholder:text-grey-700': disabled,
+    'text-opacity-25 cursor-not-allowed placeholder:text-grey-700': disabled,
     // highlighted
-    'bg-[rgba(255,255,0,0.075)]': props.highlighted && disabled,
-    'bg-[rgba(255,255,0,0.2)]': props.highlighted && !disabled,
+    'bg-yellow-100/50': props.highlighted && disabled,
+    'bg-yellow-100': props.highlighted && !disabled,
     // invalid
-    'border-red focus:border-red-300 focus:yt-focus-red active:border-red-700': invalid,
-    'hover:shadow-[0_0_0.15rem_theme(colors.red.500)]': invalid && !disabled,
+    'border-red-500 enabled:hover:border-red-700 disabled:border-red-500/50': invalid,
     // readOnly
     'cursor-not-allowed text-black bg-grey-200': readOnly
   });
 };
-const getButtonStateClasses = invalid => {
+const getButtonStateClasses = (invalid, disabled = false) => {
   if (invalid) {
-    return 'border !border-red-500 group-peer-focus:!border-red-300 focus:yt-focus-red group-focus:group-active:!border-red-300 transition-colors ease-in';
+    return cn('border border-red-500 group-peer-hover:enabled:border-red-700 transition-colors ease-in', {
+      'border-red-500/30': disabled
+    });
   }
-  return 'border border-grey-300 focus:!border-blue-300 group-peer-focus:!border-blue-300 group-peer-focus:group-peer-active:!border-blue-700 transition-colors transition-opacity ease-in';
+  return 'border border-grey-300 group-peer-hover:enabled:border-grey-500 transition-colors transition-opacity ease-in';
 };
 
 const debounce = (fn, delay) => {
@@ -4554,7 +4582,7 @@ const Input = /*#__PURE__*/React.forwardRef(function LegacyInput(props, ref) {
   let postfix;
   if (button) {
     const disabled = button.props.disabled || attributes.disabled;
-    const buttonClassName = cn('items-center focus:z-10 flex justify-center rounded-l-none rounded-r h-full focus:rounded focus:outline-none', getButtonStateClasses(attributes.invalid), button.props.className);
+    const buttonClassName = cn('items-center focus:z-10 flex justify-center rounded-l-none rounded-r h-full focus:rounded focus:outline-none', getButtonStateClasses(attributes.invalid, disabled), button.props.className);
     postfix = /*#__PURE__*/React.cloneElement(button, {
       className: buttonClassName,
       disabled
@@ -5578,14 +5606,11 @@ const Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref)
     "data-taco": "datepicker",
     style: style
   }, /*#__PURE__*/React.createElement(Input, Object.assign({}, input, {
-    button: /*#__PURE__*/React.createElement(Tooltip, {
-      title: texts.datepicker.calendar
-    }, /*#__PURE__*/React.createElement(IconButton, {
+    button: /*#__PURE__*/React.createElement(IconButton, {
       "aria-label": texts.datepicker.expand,
       disabled: input.disabled || input.readOnly,
       icon: "calendar",
       tabIndex: -1,
-      className: " border-grey-300 group-peer-focus:!border-blue-300 group-peer-focus:group-peer-active:!border-blue-700 flex h-full items-center justify-center rounded-l-none rounded-r border transition-colors transition-opacity ease-in focus:z-10 focus:rounded focus:!border-blue-300 focus:outline-none",
       popover: props => /*#__PURE__*/React.createElement(Popover, Object.assign({}, props), /*#__PURE__*/React.createElement(Popover.Content, null, ({
         close
       }) => /*#__PURE__*/React.createElement("div", {
@@ -5611,14 +5636,15 @@ const Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref)
         }
       }, shortcut.text)))), handleReset && /*#__PURE__*/React.createElement("button", {
         type: "button",
-        className: "my-4 mx-auto mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300",
+        className: "mx-auto my-4 mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300",
         onClick: event => {
           event.persist();
           handleReset(event);
           close();
         }
-      }, texts.datepicker.clear)))))
-    }))
+      }, texts.datepicker.clear))))),
+      tooltip: texts.datepicker.calendar
+    })
   })));
 });
 Datepicker.displayName = 'Datepicker';
@@ -6113,15 +6139,16 @@ const InnerContent = /*#__PURE__*/React__default.forwardRef(function InnerConten
     children,
     ...otherProps
   } = props;
-  const cName = cn('grow-1 p-4', className);
+  const cName = cn('grow flex flex-col', {
+    'overflow-y-hidden': isScrollable,
+    'p-4': !isScrollable
+  }, className);
   return /*#__PURE__*/React__default.createElement("div", Object.assign({}, otherProps, {
     className: cName,
     ref: ref
   }), isScrollable ? /*#__PURE__*/React__default.createElement(ScrollArea, {
-    className: "w-full gap-y-0.5"
-  }, children) : {
-    children
-  });
+    className: "w-full gap-y-0.5 p-4"
+  }, children) : children);
 });
 const Portal = props => {
   const {
@@ -6414,7 +6441,7 @@ const Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
     'text-grey-700': !invalid,
     'text-red-500': invalid,
     'opacity-50': disabled
-  }, props.className);
+  });
   return /*#__PURE__*/React.createElement("label", Object.assign({}, otherProps, {
     className: className,
     "data-taco": "label",
@@ -7212,10 +7239,12 @@ const RadioGroupItem = /*#__PURE__*/React.forwardRef(function RadioGroupItem(pro
     ...otherProps
   } = props;
   const isDisabled = context.disabled || props.disabled;
-  const className = cn('flex flex-shrink-0 self-start items-center justify-center h-4 w-4 mt-[0.2rem] rounded-full bg-white border-2', {
-    'border-grey-300 hover:border-4 focus:yt-focus aria-checked:bg-blue-500 aria-checked:border-blue-500 hover:aria-checked:border-blue-300': !isDisabled && !context.invalid,
-    'border-grey-200 cursor-not-allowed aria-checked:bg-blue-300 aria-checked:border-blue-300 ': isDisabled,
-    'border-red-500 hover:border-4 text-red-500 focus:border-red-500 focus:yt-focus-red aria-checked:bg-red-500 aria-checked:border-red': context.invalid && !isDisabled
+  const className = cn('flex flex-shrink-0 self-start items-center justify-center h-4 w-4 mt-[0.2rem] rounded-full bg-white border-2 focus-visible:yt-focus disabled:cursor-not-allowed hover:border-4', context.invalid ? {
+    'border-red-500 hover:border-red-700 aria-checked:bg-red-500 aria-checked:border-red-500 hover:aria-checked:border-red-700': !isDisabled,
+    'border-red-500/50 aria-checked:bg-red-500/50 aria-checked:border-red-500/50': isDisabled
+  } : {
+    'border-grey-500 hover:border-grey-700 aria-checked:bg-blue-500 aria-checked:border-blue-500 hover:aria-checked:border-blue-700': !isDisabled,
+    'border-grey-500/50 aria-checked:bg-blue-500/50 aria-checked:border-blue-500/50': isDisabled
   });
   const labelClassName = cn('flex items-center gap-2', {
     'cursor-pointer': !isDisabled,
@@ -9137,10 +9166,9 @@ const Option$1 = /*#__PURE__*/React__default.forwardRef(function Select2Option(p
   }, /*#__PURE__*/React__default.createElement("span", null, children), description ? /*#__PURE__*/React__default.createElement("span", {
     className: "text-grey-700 -mt-1.5 mb-1.5 text-xs"
   }, description) : null)), popover ? /*#__PURE__*/React__default.createElement(IconButton, {
-    rounded: true,
     icon: "ellipsis-vertical",
     appearance: "discrete",
-    className: cn('group-aria-current:visible invisible ml-auto -mr-2 focus:!shadow-none group-hover:visible', {
+    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', {
       '!visible': isMobileDevice((_window = window) === null || _window === void 0 ? void 0 : _window.navigator)
     }),
     onClick: event => {
@@ -9261,6 +9289,7 @@ const Button$2 = /*#__PURE__*/React__default.forwardRef(function Select2TriggerB
 const Single = /*#__PURE__*/React__default.forwardRef(function Select2TriggerSingle(props, ref) {
   const {
     children,
+    emptyValue,
     value,
     ...buttonProps
   } = props;
@@ -9273,7 +9302,7 @@ const Single = /*#__PURE__*/React__default.forwardRef(function Select2TriggerSin
   const currentValue = children.find(matchesValue(value));
   let output;
   if (currentValue) {
-    if (tags) {
+    if (tags && emptyValue !== undefined && emptyValue !== value) {
       output = /*#__PURE__*/React__default.createElement(Tag$1, {
         className: "truncate",
         color: currentValue.props.color,
@@ -9297,6 +9326,7 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
   var _buttonRef$current;
   const {
     children,
+    emptyValue: _,
     values = [],
     ...buttonProps
   } = props;
@@ -9612,7 +9642,7 @@ const getNextColor = options => {
   }, {});
   const colors = Object.keys(occurences);
   if (colors.length) {
-    return colors.sort((a, b) => occurences[b] - occurences[a])[0];
+    return colors.sort((a, b) => occurences[a] - occurences[b])[0];
   }
   return undefined;
 };
@@ -9847,6 +9877,7 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     "data-taco": "Select2"
   }, /*#__PURE__*/React__default.createElement(Trigger$7, Object.assign({}, otherProps, {
     "aria-haspopup": "listbox",
+    emptyValue: emptyValue,
     onBlur: handleBlur,
     onKeyDown: handleKeyDown,
     ref: internalRef
@@ -9941,10 +9972,10 @@ const Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
     ...otherProps
   } = props;
   const id = useId(props.id);
-  const className = cn('group h-5 w-9 flex flex-shrink-0 rounded-full inline-flex', {
+  const className = cn('group h-5 w-9 flex flex-shrink-0 rounded-full inline-flex focus-visible:yt-focus', {
     'mr-2': !!label,
-    'bg-grey-500 hover:bg-grey-300 aria-checked:bg-blue-500 aria-checked:hover:bg-blue-300 focus:yt-focus': !props.disabled,
-    'bg-grey-100 cursor-not-allowed aria-checked:bg-blue-300': props.disabled
+    'bg-grey-500 hover:bg-grey-700 aria-checked:bg-blue-500 aria-checked:hover:bg-blue-700': !props.disabled,
+    'bg-grey-500/50 aria-checked:bg-blue-500/50 cursor-not-allowed': props.disabled
   }, props.className);
   let labelledByProps = null;
   if (label) {
@@ -12871,7 +12902,7 @@ const EditingCell = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__defaul
 }));
 
 const Header$1 = function Header(props) {
-  var _header$column$column, _header$column$column2, _asc$desc$header$colu, _header$column$column4, _header$column$column5, _header$column$column6, _header$column$column7, _asc$desc$header$colu2, _header$column$column8, _header$column$column9;
+  var _header$column$column, _header$column$column2, _asc$desc$header$colu, _header$column$column4, _header$column$column5, _header$column$column6, _header$column$column7, _asc$desc$header$colu2, _header$column$column8;
   const {
     header,
     index,
@@ -12923,7 +12954,9 @@ const Header$1 = function Header(props) {
       const nextSizes = {
         ...sizes
       };
-      if (size) {
+      if (size === 'grow') {
+        nextSizes[header.id] = '1fr';
+      } else if (typeof size === 'number') {
         nextSizes[header.id] = !isInternalFrozenColumn(header.id) && size < MIN_COLUMN_SIZE ? MIN_COLUMN_SIZE : size;
       } else {
         delete nextSizes[header.id];
@@ -12977,8 +13010,7 @@ const Header$1 = function Header(props) {
       className: "pointer-events-none -my-0.5"
     })
   }[header.column.getIsSorted()]) !== null && _asc$desc$header$colu2 !== void 0 ? _asc$desc$header$colu2 : null), !isInternalColumn(header.column.id) && ((_header$column$column8 = header.column.columnDef.meta) !== null && _header$column$column8 !== void 0 && _header$column$column8.menu || enableColumnFreezing) ? /*#__PURE__*/React__default.createElement(HeaderMenu, {
-    menu: (_header$column$column9 = header.column.columnDef.meta) === null || _header$column$column9 === void 0 ? void 0 : _header$column$column9.menu,
-    enableColumnFreezing: enableColumnFreezing,
+    header: header,
     table: table,
     columnIndex: index
   }) : null), header.column.getCanResize() ? /*#__PURE__*/React__default.createElement(Tooltip, {
@@ -13003,46 +13035,62 @@ const Header$1 = function Header(props) {
   }))) : null);
 };
 const HeaderMenu = ({
-  menu,
-  enableColumnFreezing,
+  header,
   table,
   columnIndex
 }) => {
+  var _header$column$column9;
   const [open, setOpen] = React__default.useState(false);
   const {
     texts
   } = useLocalization();
+  const menu = (_header$column$column9 = header.column.columnDef.meta) === null || _header$column$column9 === void 0 ? void 0 : _header$column$column9.menu;
+  const meta = table.options.meta;
   const {
     frozenColumnsCount,
     setFrozenColumnsCount
-  } = table.options.meta;
+  } = meta;
   const columns = table.getVisibleLeafColumns();
   const {
     columnVisibility,
     columnOrder
   } = table.getState();
   const visibleInternalColumnsCount = React__default.useMemo(() => columns.filter(column => isInternalFrozenColumn(column.id)).length, [columns]);
-  const columnPosition = columnIndex + 1;
-  const externalFrozenColumnsCount = columnPosition - visibleInternalColumnsCount;
-  const isSomeExternalColumnFrozen = frozenColumnsCount !== 0;
-  const freeAllColumns = () => {
-    setFrozenColumnsCount(0);
-  };
-  const freezeColumns = () => {
-    setFrozenColumnsCount(externalFrozenColumnsCount);
-  };
   const className = cn('-my-0.5 -mr-1 -ml-0.5 hidden !h-6 !min-h-[theme(spacing.6)] !w-6 !min-w-[theme(spacing.6)] flex-shrink-0 justify-end group-hover/header:flex', {
     '!flex': open
   });
-  const freezeMenuItems = [/*#__PURE__*/React__default.createElement(Menu$1.Item, {
-    icon: "column-freeze",
-    onClick: freezeColumns,
-    key: "_freeze-columns_"
-  }, texts.table2.columns.menu.freezeColumns(externalFrozenColumnsCount)), ...(isSomeExternalColumnFrozen ? [/*#__PURE__*/React__default.createElement(Menu$1.Item, {
-    icon: "column-unfreeze",
-    onClick: freeAllColumns,
-    key: "_unfreeze-columns_"
-  }, texts.table2.columns.menu.unfreezeColumns)] : [])];
+  const menuItems = [];
+  if (table.options.enableHiding && header.column.getCanHide()) {
+    // we do this in the next tick, otherwise the menu closes and react throws a "state update on unmounted component" error
+    const handleClick = () => setTimeout(() => header.column.toggleVisibility(), 1);
+    menuItems.push( /*#__PURE__*/React__default.createElement(Menu$1.Item, {
+      icon: "eye-off",
+      onClick: handleClick
+    }, texts.table2.columns.menu.hideColumn));
+  }
+  if (meta.enableColumnFreezing) {
+    const columnPosition = columnIndex + 1;
+    const externalFrozenColumnsCount = columnPosition - visibleInternalColumnsCount;
+    const isSomeExternalColumnFrozen = frozenColumnsCount !== 0;
+    const freeAllColumns = () => {
+      setFrozenColumnsCount(0);
+    };
+    const freezeColumns = () => {
+      setFrozenColumnsCount(externalFrozenColumnsCount);
+    };
+    menuItems.push( /*#__PURE__*/React__default.createElement(Menu$1.Item, {
+      icon: "column-freeze",
+      onClick: freezeColumns,
+      key: "_freeze-columns_"
+    }, texts.table2.columns.menu.freezeColumns(externalFrozenColumnsCount)));
+    if (isSomeExternalColumnFrozen) {
+      menuItems.push( /*#__PURE__*/React__default.createElement(Menu$1.Item, {
+        icon: "column-unfreeze",
+        onClick: freeAllColumns,
+        key: "_unfreeze-columns_"
+      }, texts.table2.columns.menu.unfreezeColumns));
+    }
+  }
   React__default.useEffect(() => {
     // Update column pinning/freezing whenever frozen columns count changes, or column order or visiblity changes
     const totalFrozenColumnsCount = visibleInternalColumnsCount + frozenColumnsCount;
@@ -13059,23 +13107,21 @@ const HeaderMenu = ({
     open: open,
     onChange: setOpen
   };
-  let menuComponent = null;
   if (menu) {
-    menuComponent = menu(menuProps);
-    if (enableColumnFreezing) {
-      const menuContent = React__default.Children.only(menuComponent.props.children);
-      const menuContentChildren = React__default.Children.toArray(menuContent.props.children);
-      const menuItemsWithFreezingItems = [...menuContentChildren, /*#__PURE__*/React__default.createElement(Menu$1.Separator, null), ...freezeMenuItems];
-      const menuContentWithFreezingItems = /*#__PURE__*/React__default.createElement(Menu$1.Content, null, menuItemsWithFreezingItems.map((item, key) => /*#__PURE__*/React__default.cloneElement(item, {
-        key
-      })));
-      menuComponent = /*#__PURE__*/React__default.cloneElement(menuComponent, {
-        children: menuContentWithFreezingItems
-      });
+    const customMenu = menu({
+      trigger: undefined
+    });
+    const customItems = React__default.Children.toArray(customMenu.props.children.props.children);
+    if (customItems.length) {
+      if (menuItems.length) {
+        menuItems.push( /*#__PURE__*/React__default.createElement(Menu$1.Separator, null));
+      }
+      menuItems.push(...customItems);
     }
-  } else if (enableColumnFreezing) {
-    menuComponent = /*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, null, freezeMenuItems));
   }
+  const menuComponent = /*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, null, menuItems.map((item, key) => /*#__PURE__*/React__default.cloneElement(item, {
+    key
+  }))));
   // This div catches the mousedown events from menu item and menu trigger and prevents
   // mousedown event from bubbling up to the Header component to prevent toggling sorting
   return menuComponent ? /*#__PURE__*/React__default.createElement("div", {
@@ -13125,8 +13171,9 @@ function useColumnDefinitions(children, options, tableRef) {
     React__default.Children.toArray(children).filter(child => !!child).forEach(child => {
       if ( /*#__PURE__*/React__default.isValidElement(child)) {
         var _child$props$minWidth;
-        if (child.props.defaultWidth) {
-          defaultColumnSizing[child.props.accessor] = child.props.defaultWidth;
+        const defaultWidth = child.props.defaultWidth === 'grow' ? '1fr' : child.props.defaultWidth;
+        if (defaultWidth) {
+          defaultColumnSizing[child.props.accessor] = defaultWidth;
         }
         if (child.props.defaultHidden && options.enableColumnHiding) {
           defaultColumnVisibility[child.props.accessor] = false;
@@ -13162,7 +13209,7 @@ function useColumnDefinitions(children, options, tableRef) {
             className: child.props.className,
             control: child.props.control,
             dataType: child.props.dataType,
-            defaultWidth: child.props.defaultWidth,
+            defaultWidth,
             disableReordering: child.props.disableReordering,
             menu: child.props.menu,
             tooltip: child.props.tooltip
@@ -13583,7 +13630,9 @@ const useGridTemplate = table => {
     } else if (isInternalColumn(column.id)) {
       size = `${column.getSize()}px`;
     } else if (width) {
-      if (isLastColumn) {
+      if (width === '1fr') {
+        size = 'minmax(max-content, 1fr)';
+      } else if (isLastColumn) {
         size = `minmax(${width}px, auto)`;
       } else if (column.columnDef.minSize && width < column.columnDef.minSize) {
         // react-table is supposed to handle minSize itself but it is really buggy
@@ -14916,7 +14965,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
     orientation = 'horizontal',
     ...otherProps
   } = props;
-  const className = cn('yt-tabs', `yt-tabs--${orientation}`, {
+  const className = cn({
     'flex w-full': orientation === 'vertical'
   }, props.className);
   return /*#__PURE__*/React.createElement(TabsPrimitive.Root, Object.assign({}, otherProps, {
@@ -14931,7 +14980,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
   }), children);
 });
 const TabList = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
-  const className = cn('yt-tab__list border-b border-grey-300 flex flex-row m-0 mb-4', props.className);
+  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);
   return /*#__PURE__*/React.createElement(TabsPrimitive.List, Object.assign({}, props, {
     className: className,
     ref: ref
@@ -14939,19 +14988,31 @@ const TabList = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
 });
 const TabTrigger = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
   const {
+    children,
     id,
     disabled,
     ...otherProps
   } = props;
-  const className = cn('yt-tab bg-transparent border-b-2 border-transparent text-grey-700 m-0 py-2 px-4', disabled ? 'cursor-not-allowed !text-grey-500' : 'cursor-pointer rounded-t hover:border-grey-300 aria-selected:border-blue-500 aria-selected:text-black aria-selected:hover:border-blue-300 hover:text-black active:yt-focus active:border-blue-500 focus:yt-focus focus:border-blue-500', props.className);
+  const triggerClassName = cn('group relative p-0.5 outline-none disabled:cursor-not-allowed disabled:text-black/50',
+  // horizontal
+  '[[aria-orientation="horizontal"]_&]:pb-1',
+  // horizontal
+  '[[aria-orientation="vertical"]_&]:pr-1');
+  const buttonClassName = cn(getButtonClasses(), 'group-focus-visible:yt-focus-inset group-enabled:group-hover:wcag-grey-200 pointer-events-none rounded px-3');
+  const activeClassName = cn('pointer-events-none absolute hidden bg-blue-500 group-aria-selected:flex',
+  // horizontal
+  '[[aria-orientation="horizontal"]_&]:rounded-t-sm [[aria-orientation="horizontal"]_&]:bottom-0 [[aria-orientation="horizontal"]_&]:left-0 [[aria-orientation="horizontal"]_&]:right-0 [[aria-orientation="horizontal"]_&]:-mb-px [[aria-orientation="horizontal"]_&]:h-0.5',
+  // vertical
+  '[[aria-orientation="vertical"]_&]:rounded-l-sm [[aria-orientation="vertical"]_&]:right-0 [[aria-orientation="vertical"]_&]:top-0 [[aria-orientation="vertical"]_&]:bottom-0 [[aria-orientation="vertical"]_&]:-mr-px [[aria-orientation="vertical"]_&]:w-0.5');
   return /*#__PURE__*/React.createElement(TabsPrimitive.Trigger, Object.assign({}, otherProps, {
-    className: className,
+    className: triggerClassName,
     disabled: disabled,
     ref: ref,
-    style: {
-      transition: 'border 0.2s ease-in'
-    },
     value: id
+  }), /*#__PURE__*/React.createElement("span", {
+    className: buttonClassName
+  }, children), /*#__PURE__*/React.createElement("span", {
+    className: activeClassName
   }));
 });
 const TabContent = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
@@ -14959,7 +15020,7 @@ const TabContent = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
     id,
     ...otherProps
   } = props;
-  const className = cn('yt-tab__panel outline-none', props.className);
+  const className = cn('[&[data-orientation="vertical"]]:grow outline-none', props.className);
   return /*#__PURE__*/React.createElement(TabsPrimitive.Content, Object.assign({}, otherProps, {
     className: className,
     ref: ref,
@@ -15140,7 +15201,7 @@ const Button$3 = /*#__PURE__*/React__default.forwardRef(function Button(props, r
     ref: ref
   }));
 });
-const getButtonClasses$1 = (rounded = true) => cn('!h-9 !w-9 flex-shrink-0 flex-grow-0 cursor-pointer relative', 'focus:!outline-none focus:!shadow-none focus-visible:!yt-focus-dark ', 'bg-transparent hover:bg-white/[.08] focus:bg-white/[.08] aria-current-page:bg-white/[.08]', '!text-white hover:text-white focus:text-white', {
+const getButtonClasses$1 = (rounded = true) => cn('!h-9 !w-9 flex-shrink-0 flex-grow-0 cursor-pointer relative', 'focus:!outline-none focus:!shadow-none focus-visible:!yt-focus-dark ', 'bg-transparent enabled:hover:bg-white/[.08] focus:bg-white/[.08] aria-current-page:bg-white/[.08]', 'text-white', {
   '!rounded-full': rounded
 });
 
@@ -15166,7 +15227,7 @@ const Link$1 = /*#__PURE__*/React__default.forwardRef(function Link(props, ref)
   }) : null, children, isNew ? /*#__PURE__*/React__default.createElement(Badge, {
     color: "blue",
     small: true,
-    className: "absolute top-0 right-0 -mt-1.5 -mr-2.5 !h-3 !px-0.5 text-[0.55rem] font-normal"
+    className: "absolute right-0 top-0 -mr-2.5 -mt-1.5 !h-3 !px-0.5 text-[0.55rem] font-normal"
   }, texts.header.new) : null);
   if (tooltip) {
     return /*#__PURE__*/React__default.createElement(Tooltip, {
@@ -15175,7 +15236,7 @@ const Link$1 = /*#__PURE__*/React__default.forwardRef(function Link(props, ref)
   }
   return link;
 });
-const getLinkClasses = (icon = undefined) => cn('flex h-8 flex-shrink-0 flex-grow-0 cursor-pointer items-center justify-center ', 'focus:!shadow-none focus:!outline-none focus-visible:!yt-focus-dark', 'bg-transparent hover:bg-white/[.08] focus:bg-white/[.08] aria-current-page:bg-white/[.08]', '!text-white hover:text-white focus:text-white', {
+const getLinkClasses = (icon = undefined) => cn('flex h-8 flex-shrink-0 flex-grow-0 cursor-pointer items-center justify-center ', 'focus:!shadow-none focus:!outline-none focus-visible:!yt-focus-dark', 'bg-transparent hover:bg-white/[.08] focus:bg-white/[.08] aria-current-page:bg-white/[.08]', 'text-white hover:text-white focus:text-white', {
   '!rounded-full !h-9 !w-9': icon,
   'whitespace-nowrap px-3 rounded text-sm hidden lg:flex': !icon
 });