@economic/taco 2.38.0 → 2.39.1

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;
@@ -8933,6 +8941,7 @@ const OverflowGroup = /*#__PURE__*/React__default.forwardRef(function OverflowGr
   var _moreButton;
   const {
     moreButton,
+    wrapChild,
     ...attributes
   } = props;
   const internalRef = useMergedRef(ref);
@@ -8966,7 +8975,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) => wrapChild ? ( /*#__PURE__*/React__default.createElement(Menu$1.Item, {
+      key: index
+    }, child)) : sanitizeButtonPropsForMenuItem(child, index))))),
     ref: buttonRefCallback
   }) : null);
 });
@@ -10220,6 +10231,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 +10252,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 +10453,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 +10751,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 +11372,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 +11586,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 +11993,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 +12015,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 +12042,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 +12274,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 +12423,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 +12453,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 +12472,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 +12500,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 +12510,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 +12523,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 +12795,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
@@ -15073,7 +15090,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: _,
@@ -15090,6 +15107,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
@@ -15097,7 +15119,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, {
@@ -15120,7 +15143,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
     });
@@ -15129,7 +15152,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,
@@ -15137,30 +15160,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
@@ -15174,7 +15190,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) {
@@ -15749,7 +15764,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,
@@ -16667,7 +16682,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
@@ -18310,8 +18325,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'
@@ -19335,7 +19354,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 => {
@@ -19717,11 +19736,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 {
@@ -19731,7 +19757,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