@economic/taco 2.17.2 → 2.19.0

package/dist/taco.cjs.development.js

@@ -9594,6 +9594,10 @@ const Option = /*#__PURE__*/React__default.forwardRef(function Listbox2Option(pr
     if (disabled || listboxDisabled || listboxReadOnly) {
       event.stopPropagation();
       return;
+    }
+    // UX requirement: if tab key is pressed and the current option is selected then keydown event is ignored
+    else if (event.key === 'Tab' && selected) {
+      return;
     } else if (isAriaSelectionKey(event)) {
       setValue(value);
     }
@@ -9904,6 +9908,13 @@ const Colours = props => {
 const mobiles = /iPhone|iPad|iPod|Android/i;
 const isMobileDevice = navigator => !!(navigator !== null && navigator !== void 0 && navigator.userAgent) && mobiles.test(navigator.userAgent);
 
+(function (FontSizes) {
+  FontSizes["small"] = "small";
+  FontSizes["medium"] = "medium";
+  FontSizes["large"] = "large";
+})(exports.FontSizes || (exports.FontSizes = {}));
+const fixedForwardRef = React__default.forwardRef;
+
 const Option$1 = /*#__PURE__*/React__default.forwardRef(function Select2Option(props, ref) {
   var _window;
   const {
@@ -9924,9 +9935,14 @@ const Option$1 = /*#__PURE__*/React__default.forwardRef(function Select2Option(p
     setOpen,
     shouldPauseHoverState,
     tags,
-    value
+    value,
+    fontSize = exports.FontSizes.medium
   } = useSelect2Context();
-  const className = cn(createOptionClassName(shouldPauseHoverState), cName);
+  const className = cn(createOptionClassName(shouldPauseHoverState), {
+    'text-xs': fontSize === exports.FontSizes.small,
+    'text-sm': fontSize === exports.FontSizes.medium,
+    'text-base': fontSize === exports.FontSizes.large
+  }, cName);
   const hasValue = Array.isArray(value) ? !!value.length : value !== undefined;
   const isTag = tags && !!color;
   const handleClick = () => {
@@ -9998,9 +10014,12 @@ const Group$2 = /*#__PURE__*/React__default.forwardRef(function Select2Group(pro
   const {
     children,
     heading,
+    hasSeparator,
     ...attributes
   } = props;
-  const className = cn(createCollectionClassName(), props.className);
+  const className = cn(createCollectionClassName(), {
+    "last:after:content-none after:content-[''] after:bg-grey-300 after:mx-2 after:my-1 after:h-px": hasSeparator && children.length
+  }, props.className);
   return /*#__PURE__*/React__default.createElement(Group$1, Object.assign({}, attributes, {
     className: className,
     ref: ref
@@ -10032,6 +10051,18 @@ const getIndexOfFirstChildOverflowingParent = (element, overscan = 0) => {
   }
   return boundaryChildIndex;
 };
+const getNextFocussableElement = currentElement => {
+  if (!currentElement) {
+    return null;
+  }
+  const focussableElements = [...document.querySelectorAll('button:not([disabled]), [href]:not(link):not(script), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled]), details:not([disabled]), summary:not(:disabled)')];
+  const currentElementIndex = focussableElements.indexOf(currentElement);
+  // If the currentElement is not in the focussable elements list or it is the last element
+  if (currentElementIndex !== -1 && currentElementIndex === focussableElements.length - 1) {
+    return null;
+  }
+  return focussableElements[currentElementIndex + 1];
+};
 
 const Trigger$7 = /*#__PURE__*/React__default.forwardRef(function Select2Trigger(props, ref) {
   const {
@@ -10360,6 +10391,7 @@ const BubbleSelect = props => {
 
 const Search$1 = /*#__PURE__*/React__default.forwardRef(function ListboxSearch(props, ref) {
   const {
+    onTabKeyPress,
     ...otherProps
   } = props;
   const {
@@ -10384,7 +10416,7 @@ const Search$1 = /*#__PURE__*/React__default.forwardRef(function ListboxSearch(p
     // Select2 should close dropdown and receive focus, when user press Tab while searching (UX requirement to support better keyboard navigation)
     if (event.key === 'Tab') {
       setOpen(false);
-      return;
+      onTabKeyPress();
     }
     if (isAriaSelectionKey(event) || event.key === 'ArrowDown' || event.key === 'ArrowUp') {
       var _listboxRef$current;
@@ -10411,7 +10443,7 @@ const Search$1 = /*#__PURE__*/React__default.forwardRef(function ListboxSearch(p
   })));
 });
 
-const isGroup = child => !!child.props.heading;
+const isGroup = child => !!child.props.heading || !!child.props.hasSeparator;
 const useChildren = ({
   children: initialChildren,
   emptyValue,
@@ -10594,6 +10626,7 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     readOnly = false,
     tags = false,
     value: prop,
+    fontSize,
     ...otherProps
   } = props;
   const emptyOption = React__default.useMemo(() => {
@@ -10624,6 +10657,7 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
   // align the listbox min width with the width of the input - it should never be smaller
   const dimensions = useBoundingClientRectListener(internalRef);
   // state
+  const [tabTriggeredClose, setTabTriggeredClose] = React__default.useState(false);
   const [open, setOpen] = React__default.useState(false);
   const [value, _setValue] = reactUseControllableState.useControllableState({
     // uncontrolled
@@ -10670,6 +10704,7 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     shouldPauseHoverState,
     setShouldPauseHoverState,
     tags,
+    fontSize,
     validationError,
     value
   };
@@ -10706,6 +10741,22 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
       setShouldPauseHoverState(true);
     }
   };
+  const handleCloseAutoFocus = event => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (tabTriggeredClose) {
+      const nextFocussableElement = getNextFocussableElement(internalRef.current);
+      if (nextFocussableElement) {
+        // UX requirement: move focus to the next focussable element when tab key is pressed to select the value
+        nextFocussableElement.focus();
+        // Reset the tabTriggeredClose state
+        setTabTriggeredClose(false);
+      }
+    } else {
+      var _internalRef$current;
+      (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.focus();
+    }
+  };
   const className = cn('border-grey-300 rounded border bg-white py-1.5 shadow-md outline-none', createCollectionClassName());
   return /*#__PURE__*/React__default.createElement(Select2Context.Provider, {
     value: context
@@ -10734,15 +10785,10 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     asChild: true,
     align: "start",
     onOpenAutoFocus: () => {
-      var _internalRef$current;
-      (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.focus();
-    },
-    onCloseAutoFocus: event => {
       var _internalRef$current2;
-      event.preventDefault();
-      event.stopPropagation();
       (_internalRef$current2 = internalRef.current) === null || _internalRef$current2 === void 0 ? void 0 : _internalRef$current2.focus();
     },
+    onCloseAutoFocus: handleCloseAutoFocus,
     sideOffset: 4,
     tabIndex: -1
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -10752,7 +10798,8 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     }
   }, flattenedChildren.length > 0 || onCreate ? ( /*#__PURE__*/React__default.createElement(Search$1, {
     placeholder: onCreate ? texts.select2.searchOrCreate : texts.select2.search,
-    ref: searchRef
+    ref: searchRef,
+    onTabKeyPress: () => setTabTriggeredClose(true)
   })) : null, flattenedChildren.length <= 0 ? ( /*#__PURE__*/React__default.createElement("div", {
     className: "text-grey-700 -mt-0.5 flex h-8 items-center px-2",
     role: "presentation"
@@ -12986,30 +13033,6 @@ const MemoedFooter = /*#__PURE__*/React__default.memo(function MemoedFooter(prop
   }, meta.footer(table.getRowModel().rows.map(row => row.original[id])))) : null);
 });
 
-const FONT_SIZE = {
-  small: 'small',
-  medium: 'medium',
-  large: 'large'
-};
-function FontSize$1(props) {
-  const {
-    texts
-  } = useLocalization();
-  const meta = props.table.options.meta;
-  const handleChange = value => meta.fontSize.setSize(value);
-  return /*#__PURE__*/React__default.createElement(Menu$1.SubMenu, null, /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup, {
-    onChange: handleChange,
-    value: meta.fontSize.size
-  }, /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup.Item, {
-    value: FONT_SIZE.small
-  }, texts.table3.fontSize.sizes.small), /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup.Item, {
-    value: FONT_SIZE.medium
-  }, texts.table3.fontSize.sizes.medium), /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup.Item, {
-    disabled: meta.rowHeight.height === 'short',
-    value: FONT_SIZE.large
-  }, texts.table3.fontSize.sizes.large)));
-}
-
 var IndicatorReason;
 (function (IndicatorReason) {
   IndicatorReason["SEARCH"] = "SEARCH";
@@ -13131,8 +13154,8 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
     const actionsInMenu = visibleActions.slice(visibleActions.length === actionsLength ? actionsLength : actionsLength - 1);
     const className = cn('-mb-2 flex justify-end pl-2 text-right', {
       // Adjust negative margin on row actions cell to ensure that the cell aligns vertically.
-      '-mt-2': fontSize === FONT_SIZE.small,
-      '-mt-1.5': fontSize !== FONT_SIZE.small
+      '-mt-2': fontSize === exports.FontSizes.small,
+      '-mt-1.5': fontSize !== exports.FontSizes.small
     }, props.className);
     content = /*#__PURE__*/React__default.createElement("span", {
       className: className,
@@ -13254,23 +13277,15 @@ function getCellValueAsString(value, dataType) {
   return String(value);
 }
 
-// settings
-var TableFontSizes;
-(function (TableFontSizes) {
-  TableFontSizes["small"] = "small";
-  TableFontSizes["medium"] = "medium";
-  TableFontSizes["large"] = "large";
-})(TableFontSizes || (TableFontSizes = {}));
-
 // column widths
 const getCellMinWidth = (fontSize = 'medium') => {
   switch (fontSize) {
-    case TableFontSizes.small:
+    case exports.FontSizes.small:
       return 57;
-    case TableFontSizes.large:
+    case exports.FontSizes.large:
       return 83;
     default:
-    case TableFontSizes.medium:
+    case exports.FontSizes.medium:
       return 72;
   }
 };
@@ -14943,7 +14958,7 @@ const TextareaControl = /*#__PURE__*/React__default.forwardRef(function Textarea
       handleTextareaKeyDown(e);
     },
     onBlur: handleBlur,
-    className: cn(getCellAlignmentClasses(align), `h-fit resize-none`, {
+    className: cn(getCellAlignmentClasses(align), `h-fit resize-none overflow-y-hidden focus:overflow-y-auto`, {
       [`!min-h-[${minMaxHeight.min}px]`]: columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate,
       '!yt-focus-dark': isCellInDetailMode,
       [`h-[${minMaxHeight.min}px]`]: !isCellInDetailMode && (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate),
@@ -15075,6 +15090,7 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
           handleChange(nextValue);
         }
       },
+      fontSize: tableMeta.fontSize.size,
       value
     }, data);
   } else if (controlRenderer === 'datepicker') {
@@ -16265,15 +16281,15 @@ function useTableFontSizeListener(table) {
 }
 function getCellWidthDifference(fontSizeKey) {
   switch (fontSizeKey) {
-    case `${TableFontSizes.small}-${TableFontSizes.medium}`:
-    case `${TableFontSizes.medium}-${TableFontSizes.large}`:
+    case `${exports.FontSizes.small}-${exports.FontSizes.medium}`:
+    case `${exports.FontSizes.medium}-${exports.FontSizes.large}`:
       return 8;
-    case `${TableFontSizes.medium}-${TableFontSizes.small}`:
-    case `${TableFontSizes.large}-${TableFontSizes.medium}`:
+    case `${exports.FontSizes.medium}-${exports.FontSizes.small}`:
+    case `${exports.FontSizes.large}-${exports.FontSizes.medium}`:
       return -8;
-    case `${TableFontSizes.small}-${TableFontSizes.large}`:
+    case `${exports.FontSizes.small}-${exports.FontSizes.large}`:
       return 16;
-    case `${TableFontSizes.large}-${TableFontSizes.small}`:
+    case `${exports.FontSizes.large}-${exports.FontSizes.small}`:
       return -16;
     default:
       return 0;
@@ -16731,11 +16747,14 @@ function Search$2(props) {
     setQuery(String(query !== null && query !== void 0 ? query : ''));
   };
   const handleClear = () => {
-    const [rowIndex = null, cellIndex = null] = tableMeta.search.highlightedColumnIndexes[tableMeta.search.currentHighlightColumnIndex || 0];
+    var _tableMeta$search$cur, _tableMeta$search$hig;
+    const highlightedColumnIndex = (_tableMeta$search$cur = tableMeta.search.currentHighlightColumnIndex) !== null && _tableMeta$search$cur !== void 0 ? _tableMeta$search$cur : 0;
+    const highlightedCell = (_tableMeta$search$hig = tableMeta.search.highlightedColumnIndexes[highlightedColumnIndex]) !== null && _tableMeta$search$hig !== void 0 ? _tableMeta$search$hig : [];
+    const [rowIndex = null, columnIndex = null] = highlightedCell;
     const rows = table.getRowModel().rows;
     tableMeta.search.setQuery('');
     // Need to save row id and cell index, to be able to find the row in the table with updated indexes, after global filter will be reset.
-    lastCellIndex.value = String(cellIndex);
+    lastCellIndex.value = String(columnIndex);
     if (rowIndex !== null) {
       var _rows$rowIndex;
       const rowId = ((_rows$rowIndex = rows[rowIndex]) === null || _rows$rowIndex === void 0 ? void 0 : _rows$rowIndex.id) || null;
@@ -17092,7 +17111,6 @@ function FilterValue(props) {
     }));
   }
   return /*#__PURE__*/React__default.createElement(Control, {
-    comparator: comparator,
     column: column,
     onChange: handleChange,
     value: value
@@ -17102,7 +17120,6 @@ function Control(props) {
   var _column$columnDef$met2, _column$columnDef$met3;
   const {
     column,
-    comparator,
     onChange,
     value,
     ...attributes
@@ -17169,9 +17186,19 @@ function Filter$1(props) {
     }
   } = filter;
   const handleChangeColumn = columnId => {
+    var _columnPrev$columnDef, _columnNext$columnDef;
+    const columnPrev = allColumns.find(column => column.id === id);
+    const columnNext = allColumns.find(column => column.id === columnId);
+    // UX requirement: if old column data type is the same as next column data type,
+    // then we applying the same filter value for the next column,
+    // but when data types are different, we're reseting comparator ans value for the next column
+    const value = (columnPrev === null || columnPrev === void 0 ? void 0 : (_columnPrev$columnDef = columnPrev.columnDef.meta) === null || _columnPrev$columnDef === void 0 ? void 0 : _columnPrev$columnDef.dataType) === (columnNext === null || columnNext === void 0 ? void 0 : (_columnNext$columnDef = columnNext.columnDef.meta) === null || _columnNext$columnDef === void 0 ? void 0 : _columnNext$columnDef.dataType) ? filter.value : {
+      comparator: null,
+      value: null
+    };
     handleChange(id, {
       id: columnId,
-      value: filter.value
+      value
     });
   };
   const handleChangeComparator = comparator => {
@@ -17909,8 +17936,8 @@ function RowHeight(props) {
   const handleChange = value => {
     const height = value;
     meta.rowHeight.setHeight(height);
-    if (height === 'short' && meta.fontSize.size === FONT_SIZE.large) {
-      meta.fontSize.setSize(FONT_SIZE.medium);
+    if (height === 'short' && meta.fontSize.size === exports.FontSizes.large) {
+      meta.fontSize.setSize(exports.FontSizes.medium);
     }
   };
   return /*#__PURE__*/React__default.createElement(Menu$1.SubMenu, null, /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup, {
@@ -18139,6 +18166,25 @@ function ColumnSettingsPopover(props) {
   })) : texts.table3.columnSettings.noResults)))));
 }
 
+function FontSize$1(props) {
+  const {
+    texts
+  } = useLocalization();
+  const meta = props.table.options.meta;
+  const handleChange = value => meta.fontSize.setSize(value);
+  return /*#__PURE__*/React__default.createElement(Menu$1.SubMenu, null, /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup, {
+    onChange: handleChange,
+    value: meta.fontSize.size
+  }, /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup.Item, {
+    value: exports.FontSizes.small
+  }, texts.table3.fontSize.sizes.small), /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup.Item, {
+    value: exports.FontSizes.medium
+  }, texts.table3.fontSize.sizes.medium), /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup.Item, {
+    disabled: meta.rowHeight.height === 'short',
+    value: exports.FontSizes.large
+  }, texts.table3.fontSize.sizes.large)));
+}
+
 function SettingsButton(props) {
   const {
     customSettings,
@@ -18209,7 +18255,7 @@ function Toolbar(props) {
   }
   const tableMeta = table.options.meta;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "mb-4 flex flex-shrink flex-grow-0 flex-wrap gap-2",
+    className: "mb-4 flex flex-shrink flex-grow-0 flex-wrap gap-2 empty:hidden",
     "data-taco": "table3-toolbar"
   }, left, /*#__PURE__*/React__default.createElement(Group, {
     className: "ml-auto flex-shrink-0 print:hidden"
@@ -18305,7 +18351,7 @@ const getCellHeightPadding = (height, fontSize) => {
     case 'short':
       {
         switch (fontSize) {
-          case FONT_SIZE.small:
+          case exports.FontSizes.small:
             return '8px';
           default:
             return '6px';
@@ -18315,9 +18361,9 @@ const getCellHeightPadding = (height, fontSize) => {
     case 'tall':
       {
         switch (fontSize) {
-          case FONT_SIZE.small:
+          case exports.FontSizes.small:
             return '16px';
-          case FONT_SIZE.large:
+          case exports.FontSizes.large:
             return '12px';
           default:
             return '14px';
@@ -18326,9 +18372,9 @@ const getCellHeightPadding = (height, fontSize) => {
     case 'extra-tall':
       {
         switch (fontSize) {
-          case FONT_SIZE.small:
+          case exports.FontSizes.small:
             return '22px';
-          case FONT_SIZE.large:
+          case exports.FontSizes.large:
             return '18px';
           default:
             return '20px';
@@ -18337,9 +18383,9 @@ const getCellHeightPadding = (height, fontSize) => {
     default:
       {
         switch (fontSize) {
-          case FONT_SIZE.small:
+          case exports.FontSizes.small:
             return '12px';
-          case FONT_SIZE.large:
+          case exports.FontSizes.large:
             return '8px';
           default:
             return '10px';
@@ -18349,9 +18395,9 @@ const getCellHeightPadding = (height, fontSize) => {
 };
 const getCellWidthPadding = fontSize => {
   switch (fontSize) {
-    case FONT_SIZE.small:
+    case exports.FontSizes.small:
       return '8px';
-    case FONT_SIZE.medium:
+    case exports.FontSizes.medium:
       return '12px';
     default:
       return '16px';
@@ -18473,7 +18519,7 @@ function ErrorAlert(props) {
   // Getting the row from core rows (ignoring search and filtering)
   const getCoreRow = React__default.useCallback(rowId => coreRows.find(coreRow => coreRow.id === rowId), [coreRows]);
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "mb-4"
+    className: "mb-4 empty:hidden"
   }, errorsRowIds.length ? ( /*#__PURE__*/React__default.createElement(Alert, {
     state: "error",
     className: "mb-1"
@@ -18531,8 +18577,6 @@ function FilterResetDialog(props) {
   }, texts.table3.validation.resetFiltersDialog.confirm)))));
 }
 
-const fixedForwardRef = React__default.forwardRef;
-
 function useTable3DataLoader(fetch, fetchAll, options = {
   pageSize: 100
 }) {
@@ -18755,9 +18799,9 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
     }
   };
   const className = cn('border-grey-300 relative grid h-full w-full flex-grow overflow-auto rounded border bg-white scroll-mt-[41px] focus-visible:outline-none', '[&[data-resizing="true"]]:select-none', {
-    'text-xs': tableMeta.fontSize.size === FONT_SIZE.small,
-    'text-sm': tableMeta.fontSize.size === FONT_SIZE.medium,
-    'text-base': tableMeta.fontSize.size === FONT_SIZE.large
+    'text-xs': tableMeta.fontSize.size === exports.FontSizes.small,
+    'text-sm': tableMeta.fontSize.size === exports.FontSizes.medium,
+    'text-base': tableMeta.fontSize.size === exports.FontSizes.large
   });
   // Print tables have "_print" as the postfix for the table id, so we can use the it to determine
   // if the table is a print table or not.