@economic/taco 2.36.0 → 2.36.2

package/dist/taco.cjs.development.js

@@ -4156,7 +4156,7 @@ const getIndexOfFirstChildOverflowingParent = (element, overscan = 0) => {
   }
   return boundaryChildIndex;
 };
-const getNextFocussableElement = (currentElement, direction = 1) => {
+const getNextFocussableElement = currentElement => {
   if (!currentElement) {
     return null;
   }
@@ -4166,7 +4166,7 @@ const getNextFocussableElement = (currentElement, direction = 1) => {
   if (currentElementIndex !== -1 && currentElementIndex === focussableElements.length - 1) {
     return null;
   }
-  return focussableElements[currentElementIndex + direction];
+  return focussableElements[currentElementIndex + 1];
 };
 const getOverlaySelector = element => {
   switch (element === null || element === void 0 ? void 0 : element.getAttribute('role')) {
@@ -10218,13 +10218,6 @@ 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;
-  const getRowIdentityColumnAccessor = () => {
-    if (!props.rowIdentityColumnAccessor) {
-      return undefined;
-    }
-    const rowIdentityColumnAccessors = [props.rowIdentityColumnAccessor].flat();
-    return originalRow => rowIdentityColumnAccessors.map(identityColumnAccessor => String(originalRow[identityColumnAccessor])).join('_');
-  };
   const tableOptions = {
     defaultColumn: {
       enableColumnFilter: options.enableFiltering || true,
@@ -10249,8 +10242,6 @@ function configureReactTableOptions(options, props) {
     // models for default features
     getExpandedRowModel: reactTable.getExpandedRowModel(),
     getGroupedRowModel: reactTable.getGroupedRowModel(),
-    // Use row indentity column values as id for each row
-    getRowId: getRowIdentityColumnAccessor(),
     groupedColumnMode: false
   };
   if (tableOptions.enableColumnResizing) {
@@ -11592,7 +11583,6 @@ function useTableManager(props, meta, internalColumns) {
   // ensure data is always valid
   const data = (_props$data = props.data) !== null && _props$data !== void 0 ? _props$data : [];
   const length = (_props$length = props.length) !== null && _props$length !== void 0 ? _props$length : data.length;
-  const rowIdentityColumnAccessor = props.rowIdentityColumnAccessor !== undefined ? [props.rowIdentityColumnAccessor].flat() : [];
   // create a react-table instance
   const instance = reactTable.useReactTable({
     data,
@@ -11620,7 +11610,7 @@ function useTableManager(props, meta, internalColumns) {
       rowDrag,
       rowDrop: rowDrop,
       rowExpansion: rowExpansion,
-      rowIdentityColumnAccessor,
+      rowIdentityColumnId: props.rowIdentityColumnId,
       rowGoto,
       rowGroups: rowGroups,
       rowHeight,
@@ -15279,12 +15269,17 @@ const BubbleSelect = props => {
 };
 
 const Search$2 = /*#__PURE__*/React__default.forwardRef(function ListboxSearch(props, ref) {
+  const {
+    onTabKeyPress,
+    ...otherProps
+  } = props;
   const {
     listboxRef,
     searchQuery,
     setSearchQuery,
     setValidationError,
-    validationError
+    validationError,
+    setOpen
   } = useSelect2Context();
   const handleChange = event => {
     if (validationError) {
@@ -15297,6 +15292,11 @@ const Search$2 = /*#__PURE__*/React__default.forwardRef(function ListboxSearch(p
     if (event.key === ' ') {
       return;
     }
+    // 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);
+      onTabKeyPress();
+    }
     if (isAriaSelectionKey(event) || event.key === 'ArrowDown' || event.key === 'ArrowUp') {
       var _listboxRef$current;
       event.preventDefault();
@@ -15311,7 +15311,7 @@ const Search$2 = /*#__PURE__*/React__default.forwardRef(function ListboxSearch(p
     }),
     invalid: !!validationError,
     message: validationError === null || validationError === void 0 ? void 0 : validationError.message
-  }, /*#__PURE__*/React__default.createElement(Input, Object.assign({}, props, {
+  }, /*#__PURE__*/React__default.createElement(Input, Object.assign({}, otherProps, {
     "aria-hidden": true,
     autoFocus: true,
     invalid: !!validationError,
@@ -15522,6 +15522,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
@@ -15607,13 +15608,20 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
       setShouldPauseHoverState(true);
     }
   };
-  const handleTab = event => {
-    if (event.key === 'Tab') {
-      const nextFocussableElement = getNextFocussableElement(internalRef.current, event.shiftKey ? -1 : +1);
+  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 selectOptions = searchQuery === '' ? flattenedChildren.map(child => child.props.value) : filteredChildren.map(child => isGroup(child) ? Array.isArray(child.props.children) && child.props.children.map(subChild => subChild.props.value) : child.props.value).flatMap(c => c) || [];
@@ -15668,10 +15676,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();
+      var _internalRef$current2;
+      (_internalRef$current2 = internalRef.current) === null || _internalRef$current2 === void 0 ? void 0 : _internalRef$current2.focus();
     },
-    onKeyDown: handleTab,
+    onCloseAutoFocus: handleCloseAutoFocus,
     sideOffset: 4,
     tabIndex: -1
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -15681,7 +15689,8 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     }
   }, 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,
-    ref: searchRef
+    ref: searchRef,
+    onTabKeyPress: () => setTabTriggeredClose(true)
   }), multiple && selectOptions.length > 1 && ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button$1, {
     className: "!justify-start",
     appearance: "discrete",
@@ -19273,22 +19282,6 @@ function Alert$1(props) {
   const tableMeta = table.options.meta;
   const [showFilterResetDialog, setShowFilterResetDialog] = React__default.useState(false);
   const pendingChangesWithErrors = tableMeta.editing.getErrors();
-  const resetPendingChanges = tableMeta.editing.resetChanges;
-  const allRows = table.getPreFilteredRowModel().rows;
-  // This effect deletes error in the alert if the row that has the error is deleted.
-  React__default.useEffect(() => {
-    pendingChangesWithErrors.forEach(errorRow => {
-      const errorRowId = errorRow.rowId;
-      try {
-        // getRow throws error if it fails to find the row
-        if (!table.getRow(errorRowId)) {
-          resetPendingChanges(errorRowId);
-        }
-      } catch {
-        resetPendingChanges(errorRowId);
-      }
-    });
-  }, [allRows.length]);
   const activeRow = React__default.useMemo(() => tableMeta.rowActive.rowActiveIndex ? table.getRowModel().rows[tableMeta.rowActive.rowActiveIndex] : undefined, [tableMeta.rowActive.rowActiveIndex]);
   // mark errors being rendered as seen
   React__default.useEffect(() => {
@@ -19317,23 +19310,18 @@ function Alert$1(props) {
   const title = (pendingChangesWithErrors.length === 1 ? validationTexts.alert.titleOne : validationTexts.alert.titlePlural).replace('[COUNT]', String(pendingChangesWithErrors.length));
   // generate links to each invalid row, to go into the error message
   const links = [];
-  const rowIdentityColumn = tableMeta.rowIdentityColumnAccessor ?
-  // Since rowIdentityColumnAccessor can have multiple ids, we use the first id to refer to the row in Alert
-  table.getColumn(String(tableMeta.rowIdentityColumnAccessor[0])) : undefined;
+  const rowIdentityColumn = tableMeta.rowIdentityColumnId ? table.getColumn(tableMeta.rowIdentityColumnId) : undefined;
   pendingChangesWithErrors.forEach((error, index) => {
     // if appropriate, concatenate the item with the text "and"
     if (pendingChangesWithErrors.length > 1 && index === pendingChangesWithErrors.length - 1) {
       // Add space before and after `messageAnd` text
       links.push(` ${validationTexts.alert.messageAnd} `);
     }
-    const rowIndex = table.getFilteredRowModel().rows.findIndex(row => row.id === error.rowId);
+    const rowIndex = table.getRowModel().rows.findIndex(row => row.id === error.rowId);
     const handleClick = () => {
-      // if row is visible
       if (rowIndex > -1) {
         scrollToRow(rowIndex);
-      }
-      // if row is filtered out
-      else {
+      } else {
         setShowFilterResetDialog(error.rowId);
       }
     };