@economic/taco 2.7.1 → 2.7.3

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,
@@ -8983,7 +8998,7 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
     ...attributes
   } = props;
   const internalRef = useMergedRef(ref);
-  const settingsRef = React__default.useRef(null);
+  const containerRef = React__default.useRef(null);
   const [focused, setFocused] = React__default.useState(false);
   const {
     texts
@@ -8998,8 +9013,8 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
     }
   });
   const handleBlur = event => {
-    var _settingsRef$current, _attributes$onBlur;
-    if (settingsRef.current && (settingsRef.current === event.relatedTarget || (_settingsRef$current = settingsRef.current) !== null && _settingsRef$current !== void 0 && _settingsRef$current.contains(event.relatedTarget))) {
+    var _containerRef$current, _attributes$onBlur;
+    if (containerRef.current && (containerRef.current === event.relatedTarget || (_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.relatedTarget))) {
       return;
     }
     setFocused(false);
@@ -9090,9 +9105,9 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
       }
     });
   }
-  const className = cn('peer !pl-7', hasFind ? {
-    '!w-48': !value && !focused,
-    '!w-72': value || focused
+  const className = cn('!pl-7 group-focus-within:!w-72 group-focus-within:yt-focus', hasFind ? {
+    '!w-48': !value,
+    '!w-72': value
   } : '!w-48', {
     '!wcag-blue-100': isActive
   }, props.className);
@@ -9120,26 +9135,26 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
     value: value !== null && value !== void 0 ? value : ''
   }));
   if (settingsContent) {
-    const handleSettingsBlur = event => {
-      if (event.currentTarget.contains(event.relatedTarget) || event.currentTarget.contains(event.target)) {
-        return;
-      }
-      setFocused(false);
-    };
+    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: cn('relative', {
-        "[&_[data-taco='input-container']]:z-20": focused
+      className: cn('group relative', {
+        'z-10 [&_[data-taco=input-container]]:z-10': focused
       }),
-      onBlur: handleSettingsBlur,
-      ref: settingsRef
-    }, input, focused ? /*#__PURE__*/React__default.createElement("div", {
-      className: "border-grey-300 absolute left-0 right-0 top-full z-10 flex flex-col gap-y-4 rounded-b border border-t-0 bg-white p-3 shadow",
+      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: () => {
         var _internalRef$current5;
         return (_internalRef$current5 = internalRef.current) === null || _internalRef$current5 === void 0 ? void 0 : _internalRef$current5.focus();
       },
+      // tab index is important, it lets the element show as a relatedTarget on event handlers
       tabIndex: -1
-    }, settingsContent) : null);
+    }, settingsContent));
   }
   return input;
 });
@@ -16184,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) {
@@ -16321,6 +16336,7 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
   const {
     actions,
     actionsLength,
+    fontSize,
     isCurrentRow,
     isEditing,
     isResizingColumn,
@@ -16355,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;
@@ -16392,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,
@@ -16773,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]);
@@ -17558,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;
@@ -17576,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,
@@ -17794,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
@@ -17906,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,
@@ -17926,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
@@ -19158,7 +19187,13 @@ function RowHeight(props) {
     texts
   } = useLocalization();
   const meta = props.table.options.meta;
-  const handleChange = value => meta.rowHeight.setHeight(value);
+  const handleChange = value => {
+    const height = value;
+    meta.rowHeight.setHeight(height);
+    if (height === 'short' && meta.fontSize.size === 'large') {
+      meta.fontSize.setSize('medium');
+    }
+  };
   return /*#__PURE__*/React__default.createElement(Menu$1.SubMenu, null, /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup, {
     onChange: handleChange,
     value: meta.rowHeight.height
@@ -19945,7 +19980,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;
     }
@@ -20379,7 +20416,7 @@ function Toolbar(props) {
   }
   const tableMeta = table.options.meta;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "mb-4 flex flex-shrink flex-grow-0 gap-2",
+    className: "mb-4 flex flex-shrink flex-grow-0 flex-wrap gap-2",
     "data-taco": "table3-toolbar"
   }, left, /*#__PURE__*/React__default.createElement(Group, {
     className: "ml-auto flex-shrink-0 print:hidden"
@@ -20691,11 +20728,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);