@economic/taco 2.7.2 → 2.7.4

package/dist/taco.cjs.development.js

@@ -4829,23 +4829,26 @@ const InputWithoutDeprecatedFeatures = /*#__PURE__*/React.forwardRef(function In
     ...attributes
   } = props;
   const internalRef = useMergedRef(ref);
-  let handleKeyDown = onKeyDown;
-  // home and end keys only navigate to the start/end of input value if the input container does not scroll
-  // if it has scroll height then the browser reverts to native scrolling behaviour only
-  // so we manually override it to ensure _our_ desired behaviour remains intact
-  // only the 'text', 'search', 'url', 'tel', 'password' input types support setSelectionRange
-  if (validSetSelectionRangeTypes.includes(type)) {
-    handleKeyDown = event => {
+  const handleKeyDown = event => {
+    // prevent any external keyboard shortcuts from executing while typing single characters in input
+    if (event.key.length === 1) {
+      event.stopPropagation();
+    }
+    // home and end keys only navigate to the start/end of input value if the input container does not scroll
+    // if it has scroll height then the browser reverts to native scrolling behaviour only
+    // so we manually override it to ensure _our_ desired behaviour remains intact
+    // only the 'text', 'search', 'url', 'tel', 'password' input types support setSelectionRange
+    if (validSetSelectionRangeTypes.includes(type)) {
       if (!event.shiftKey && (event.key === 'Home' || event.key === 'End')) {
         event.preventDefault();
         const position = event.key === 'End' ? event.currentTarget.value.length : 0;
         event.currentTarget.setSelectionRange(position, position);
       }
-      if (typeof onKeyDown === 'function') {
-        onKeyDown(event);
-      }
-    };
-  }
+    }
+    if (typeof onKeyDown === 'function') {
+      onKeyDown(event);
+    }
+  };
   const prefixRef = React.useRef(null);
   const prefixRect = useBoundingClientRectListener(prefixRef);
   const postfixRef = React.useRef(null);
@@ -5093,6 +5096,9 @@ const ScrollableList = /*#__PURE__*/React.forwardRef(function ScrollableList(pro
       const index = nextIndex !== undefined ? nextIndex : currentIndex;
       onKeyDown(event, index);
     }
+    // Stops the keyboard event from propagating so that keyboard event on other components outside the scrollable
+    // list are not executed.
+    event.stopPropagation();
   };
   const handleClick = index => event => {
     setCurrentIndex(index);
@@ -6145,6 +6151,8 @@ const Content$4 = /*#__PURE__*/React.forwardRef(function DialogContent(props, re
     } else if (dialog.onClose) {
       dialog.onClose();
     }
+    // Stops event from propogating outside the dialog.
+    event.stopPropagation();
   };
   // the chosen behaviour in taco is that outside clicks do not close the dialog
   const handleInteractOutside = event => event.preventDefault();
@@ -6158,12 +6166,19 @@ const Content$4 = /*#__PURE__*/React.forwardRef(function DialogContent(props, re
   } else {
     output = props.children;
   }
+  const onKeyDown = event => {
+    if (event.key !== 'Escape') {
+      // Stops event from propogating outside the dialog.
+      event.stopPropagation();
+    }
+  };
   return /*#__PURE__*/React.createElement(DialogPrimitive.Portal, null, /*#__PURE__*/React.createElement(DialogPrimitive.Overlay, {
     asChild: true
   }, /*#__PURE__*/React.createElement(Backdrop, null, /*#__PURE__*/React.createElement(DialogPrimitive.Content, Object.assign({}, props, {
     className: className,
     onEscapeKeyDown: handleEscapeKeyDown,
     onInteractOutside: handleInteractOutside,
+    onKeyDown: onKeyDown,
     ref: internalRef,
     style: {
       ...props.style,
@@ -9122,8 +9137,15 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
   if (settingsContent) {
     const settingsClassname = cn('border-grey-300 absolute left-0 right-0 -mt-0.5 hidden top-full group-focus-within:flex focus-within:flex flex-col gap-y-4 rounded-b border border-t-0 bg-white p-3 shadow !pt-[calc(theme(spacing.3)_+_theme(spacing[0.5]))]');
     return /*#__PURE__*/React__default.createElement("div", {
-      className: "group relative z-10 [&_[data-taco='input-container']]:z-10",
-      ref: containerRef
+      className: cn('group relative', {
+        'z-10 [&_[data-taco=input-container]]:z-10': focused
+      }),
+      ref: containerRef,
+      // create a new stacking context so our internal z-indexes don't effect external components
+      // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+      style: {
+        opacity: 0.999
+      }
     }, input, /*#__PURE__*/React__default.createElement("div", {
       className: settingsClassname,
       onClickCapture: () => {
@@ -16177,7 +16199,7 @@ function DisplayCell(props) {
       index,
       tableRef
     };
-  }, [row.original, props.children, value]);
+  }, [row.original, props.children, value, tableMeta.columnFreezing.frozenColumnIndex]);
   const memoedHighlight = React__default.useMemo(() => {
     var _tableMeta$search$que;
     if (!tableMeta.search.isHighlightingEnabled || !columnMeta.enableSearch) {
@@ -16314,6 +16336,7 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
   const {
     actions,
     actionsLength,
+    fontSize,
     isCurrentRow,
     isEditing,
     isResizingColumn,
@@ -16348,8 +16371,13 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
     const visibleActions = actions.map(action => action(row.original)).filter(action => !!action);
     const actionsOnRow = visibleActions.length === actionsLength ? visibleActions : visibleActions.slice(0, actionsLength - 1);
     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 === 'small',
+      '-mt-1.5': fontSize !== 'small'
+    });
     content = /*#__PURE__*/React__default.createElement("span", {
-      className: "-mb-2 -mt-1.5 flex justify-end pl-2 text-right",
+      className: className,
       ref: ref
     }, actionsOnRow.map((button, index) => {
       var _ref, _button$props$tooltip;
@@ -16385,6 +16413,7 @@ function Cell$1(context) {
   return /*#__PURE__*/React__default.createElement(MemoedCell, Object.assign({}, context, {
     actions: tableMeta.rowActions.actionsForRow,
     actionsLength: tableMeta.rowActions.actionsForRowLength,
+    fontSize: tableMeta.fontSize.size,
     isCurrentRow: tableMeta.currentRow.currentRowIndex === rowIndex,
     isEditing: tableMeta.editing.isEditing,
     isResizingColumn: !!context.table.getState().columnSizingInfo.isResizingColumn,
@@ -16766,18 +16795,20 @@ function useSettingsStateListener$1(table, onChangeSettings) {
   React__default.useEffect(() => {
     let handler;
     if (typeof onChangeSettings === 'function') {
-      handler = setTimeout(() => onChangeSettings({
-        // adding a new setting? you need to add it to the print settings in PrintButton.tsx!
-        columnFreezingIndex: meta.columnFreezing.frozenColumnIndex,
-        columnOrder: state.columnOrder,
-        columnSizing: state.columnSizing,
-        columnVisibility: state.columnVisibility,
-        excludeUnmatchedRecordsInSearch: meta.search.excludeUnmatchedResults,
-        fontSize: meta.fontSize.size,
-        rowHeight: meta.rowHeight.height,
-        showWarningWhenPrintingLargeDataset: meta.printing.printWarningDialogVisibility,
-        sorting: state.sorting
-      }), 250);
+      handler = setTimeout(() => {
+        onChangeSettings({
+          // adding a new setting? you need to add it to the print settings in PrintButton.tsx!
+          columnFreezingIndex: meta.columnFreezing.frozenColumnIndex,
+          columnOrder: meta.columnOrdering.isEnabled ? state.columnOrder : undefined,
+          columnSizing: table.options.enableColumnResizing ? state.columnSizing : undefined,
+          columnVisibility: table.options.enableHiding ? state.columnVisibility : undefined,
+          excludeUnmatchedRecordsInSearch: meta.search.excludeUnmatchedResults,
+          fontSize: meta.fontSize.isEnabled ? meta.fontSize.size : undefined,
+          rowHeight: meta.rowHeight.isEnabled ? meta.rowHeight.height : undefined,
+          showWarningWhenPrintingLargeDataset: meta.printing.printWarningDialogVisibility,
+          sorting: state.sorting
+        });
+      }, 250);
     }
     return () => clearTimeout(handler);
   }, [meta.columnFreezing.frozenColumnIndex, state.columnOrder, state.columnSizing, state.columnVisibility, meta.search.excludeUnmatchedResults, meta.fontSize.size, meta.rowHeight.height, meta.printing.printWarningDialogVisibility, state.sorting]);
@@ -17551,6 +17582,10 @@ const Textarea = /*#__PURE__*/React.forwardRef(function Textarea(props, ref) {
   // if it has scroll height then the browser reverts to native scrolling behaviour only
   // so we manually override it to ensure _our_ desired behaviour remains intact
   const handleKeyDown = event => {
+    // prevent any external keyboard shortcuts from executing while typing single characters in textarea
+    if (event.key.length === 1) {
+      event.stopPropagation();
+    }
     if (event.key === 'Home' || event.key === 'End') {
       event.preventDefault();
       const position = event.key === 'End' ? event.currentTarget.value.length : 0;
@@ -17569,7 +17604,7 @@ const Textarea = /*#__PURE__*/React.forwardRef(function Textarea(props, ref) {
   }));
 });
 
-const TextAreaControl = /*#__PURE__*/React__default.forwardRef(function TextAreaControl(props, externalRef) {
+const TextareaControl = /*#__PURE__*/React__default.forwardRef(function TextareaControl(props, externalRef) {
   const {
     onKeyDown: handleKeyDown,
     onChange: handleChange,
@@ -17787,7 +17822,7 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
       ref: refCallback
     }));
   } else if (controlRenderer === 'textarea') {
-    return /*#__PURE__*/React__default.createElement(TextAreaControl, Object.assign({}, props, {
+    return /*#__PURE__*/React__default.createElement(TextareaControl, Object.assign({}, props, {
       isCellInDetailMode: isCellInDetailMode,
       onKeyDown: handleInputKeyDown,
       ref: refCallback
@@ -17899,7 +17934,7 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
     return removeMoveReason;
   }, [value]);
   const controlRenderer = (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.control;
-  const className = cn('!px-2 py-[var(--table3-row-padding)]', {
+  const className = cn('!px-[0.4375rem] py-[calc(var(--table3-row-padding)_-_0.06rem)]', {
     relative: (isCurrentRow || isHovered) && controlRenderer === 'textarea',
     // Need to set higher z-index, so that the current row textarea (in expanded state) overlaps rows below
     'z-10': isCurrentRow,
@@ -17919,6 +17954,7 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
     validationErrors: []
   }), /*#__PURE__*/React__default.createElement("div", {
     className: className,
+    "data-align": columnMeta.align,
     "data-column-index": index,
     role: "cell",
     ref: cellRef
@@ -19312,10 +19348,13 @@ function resetHighlightedColumnIndexes(enabled, value, table) {
     table.getRowModel().rows.forEach((row, rowIndex) => {
       columns.forEach((column, columnIndex) => {
         try {
-          var _row$original, _column$columnDef$met;
-          const cellValue = getCellValueAsString((_row$original = row.original) === null || _row$original === void 0 ? void 0 : _row$original[column.id], (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.dataType);
-          if (cellValue && globalFilterFn$1(cellValue, value)) {
-            indexes.push([rowIndex, columnIndex]);
+          var _column$columnDef$met;
+          if ((_column$columnDef$met = column.columnDef.meta) !== null && _column$columnDef$met !== void 0 && _column$columnDef$met.enableSearch) {
+            var _row$original, _column$columnDef$met2;
+            const cellValue = getCellValueAsString((_row$original = row.original) === null || _row$original === void 0 ? void 0 : _row$original[column.id], (_column$columnDef$met2 = column.columnDef.meta) === null || _column$columnDef$met2 === void 0 ? void 0 : _column$columnDef$met2.dataType);
+            if (cellValue && globalFilterFn$1(cellValue, value)) {
+              indexes.push([rowIndex, columnIndex]);
+            }
           }
         } catch (e) {
           //
@@ -19944,7 +19983,9 @@ const PRINT_STYLES = `
 
 @media print {
     html, body, #root {
-        overflow: auto !important;
+        // hides horizontal scrollbar
+        overflow-x: none !important;
+        overflow-y: auto !important;
         height: auto !important;
         width: auto !important;
     }
@@ -20087,14 +20128,14 @@ function PrintIFrame({
     };
   }, [mountNode, stylesReady]);
   React__default.useEffect(() => {
-    var _iframeWindow$parent$, _iframeWindow$parent$2;
-    if (!iframeWindow || !stylesReady) {
+    var _contentRef$closest, _parentElement$innerH;
+    if (!contentRef || !iframeWindow || !stylesReady) {
       return;
     }
+    // get the closest parent/container of the table, and the table itself
+    const parentElement = (_contentRef$closest = contentRef === null || contentRef === void 0 ? void 0 : contentRef.closest('[role=dialog], [data-taco=drawer], main')) !== null && _contentRef$closest !== void 0 ? _contentRef$closest : iframeWindow.parent.document.body;
     const iframeDocument = iframeWindow.document;
-    // Only the content inside the main element will get printed along with the table.
-    const parentDocumentContent = ((_iframeWindow$parent$ = iframeWindow.parent.document.querySelector('main')) === null || _iframeWindow$parent$ === void 0 ? void 0 : _iframeWindow$parent$.innerHTML) || ((_iframeWindow$parent$2 = iframeWindow.parent.document.body) === null || _iframeWindow$parent$2 === void 0 ? void 0 : _iframeWindow$parent$2.innerHTML) || '';
-    iframeDocument.body.innerHTML = parentDocumentContent;
+    iframeDocument.body.innerHTML = (_parentElement$innerH = parentElement === null || parentElement === void 0 ? void 0 : parentElement.innerHTML) !== null && _parentElement$innerH !== void 0 ? _parentElement$innerH : '';
     const tableElement = iframeDocument.querySelector('[role="table"]');
     const tableColumnFreezingStyles = iframeDocument.querySelector('[data-taco="table3-column-freezing-styles"]');
     const tableWrapper = iframeDocument.createElement('div');
@@ -20690,11 +20731,6 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   const bodyRef = React__default.useRef(null);
   React__default.useEffect(() => {
     const handleKeyDown = event => {
-      var _bodyRef$current;
-      // prevent global shortcuts activating while active in other elements, like inputs or buttons
-      if (isEventTriggeredOnInteractiveElement(event.target) && !(bodyRef !== null && bodyRef !== void 0 && (_bodyRef$current = bodyRef.current) !== null && _bodyRef$current !== void 0 && _bodyRef$current.contains(event.target))) {
-        return;
-      }
       tableMeta.hoverState.handleKeyDown(event);
       tableMeta.currentRow.handleKeyDown(event, table.getRowModel().rows.length, scrollToIndex);
       tableMeta.rowClick.handleKeyDown(event, table);