@nebula.js/sn-table 1.5.0 → 1.7.1

package/api-specifications/properties.json

@@ -3,7 +3,7 @@
   "info": {
     "name": "@nebula.js/sn-table:properties",
     "description": "Table generic object definition",
-    "version": "1.5.0",
+    "version": "1.7.1",
     "license": "MIT",
     "stability": "experimental",
     "x-qlik-visibility": "public"

package/core/esm/index.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/sn-table v1.5.0
+* @nebula.js/sn-table v1.7.1
 * Copyright (c) 2022 QlikTech International AB
 * Released under the MIT license.
 */
@@ -502,7 +502,7 @@ const properties$1 = {
    * @type {string}
    * @default
    */
-  version: "1.5.0",
+  version: "1.7.1",
 
   /**
    * Extends HyperCubeDef, see Engine API: HyperCubeDef
@@ -7751,7 +7751,11 @@ function createStyled(input = {}) {
 
         transformedStyleArg = [...styleArg, ...placeholders];
         transformedStyleArg.raw = [...styleArg.raw, ...placeholders];
-      } else if (typeof styleArg === 'function') {
+      } else if (typeof styleArg === 'function' && // On the server emotion doesn't use React.forwardRef for creating components, so the created
+      // component stays as a function. This condition makes sure that we do not interpolate functions
+      // which are basically components used as a selectors.
+      // eslint-disable-next-line no-underscore-dangle
+      styleArg.__emotion_real !== styleArg) {
         // If the type is function, we need to define the default theme.
         transformedStyleArg = _ref2 => {
           let {
@@ -8356,7 +8360,7 @@ function getContainer$1(container) {
  */
 
 
-const Portal = /*#__PURE__*/React.forwardRef(function Portal(props, ref) {
+const Portal$1 = /*#__PURE__*/React.forwardRef(function Portal(props, ref) {
   const {
     children,
     container,
@@ -8392,7 +8396,7 @@ const Portal = /*#__PURE__*/React.forwardRef(function Portal(props, ref) {
 
   return mountNode ? /*#__PURE__*/ReactDOM.createPortal(children, mountNode) : mountNode;
 });
-Portal.propTypes
+Portal$1.propTypes
 /* remove-proptypes */
 = {
   // ----------------------------- Warning --------------------------------
@@ -8425,10 +8429,10 @@ Portal.propTypes
 
 {
   // eslint-disable-next-line
-  Portal['propTypes' + ''] = exactProp(Portal.propTypes);
+  Portal$1['propTypes' + ''] = exactProp(Portal$1.propTypes);
 }
 
-var Portal$1 = Portal;
+var Portal$2 = Portal$1;
 
 function isOverflowing(container) {
   const doc = ownerDocument(container);
@@ -9245,7 +9249,7 @@ const ModalUnstyled = /*#__PURE__*/React.forwardRef(function ModalUnstyled(props
 
   const Root = components.Root || component;
   const rootProps = componentsProps.root || {};
-  return /*#__PURE__*/jsxRuntime.exports.jsx(Portal$1, {
+  return /*#__PURE__*/jsxRuntime.exports.jsx(Portal$2, {
     ref: handlePortalRef,
     container: container,
     disablePortal: disablePortal,
@@ -17494,6 +17498,7 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
     color,
     component,
     fontSize,
+    instanceFontSize: inProps.fontSize,
     inheritViewBox,
     viewBox
   });
@@ -17636,7 +17641,9 @@ var ArrowDropDownIcon = createSvgIcon$1( /*#__PURE__*/jsxRuntime.exports.jsx("pa
 function getInputUtilityClass(slot) {
   return generateUtilityClass('MuiInput', slot);
 }
-const inputClasses = generateUtilityClasses('MuiInput', ['root', 'formControl', 'focused', 'disabled', 'colorSecondary', 'underline', 'error', 'sizeSmall', 'multiline', 'fullWidth', 'input', 'inputSizeSmall', 'inputMultiline', 'inputTypeSearch']);
+
+const inputClasses = _extends$6({}, inputBaseClasses$1, generateUtilityClasses('MuiInput', ['root', 'underline', 'input']));
+
 var inputClasses$1 = inputClasses;
 
 const _excluded$g = ["disableUnderline", "components", "componentsProps", "fullWidth", "inputComponent", "multiline", "type"];
@@ -17967,7 +17974,9 @@ var Input$1 = Input;
 function getFilledInputUtilityClass(slot) {
   return generateUtilityClass('MuiFilledInput', slot);
 }
-const filledInputClasses = generateUtilityClasses('MuiFilledInput', ['root', 'colorSecondary', 'underline', 'focused', 'disabled', 'adornedStart', 'adornedEnd', 'error', 'sizeSmall', 'multiline', 'hiddenLabel', 'input', 'inputSizeSmall', 'inputHiddenLabel', 'inputMultiline', 'inputAdornedStart', 'inputAdornedEnd']);
+
+const filledInputClasses = _extends$6({}, inputBaseClasses$1, generateUtilityClasses('MuiFilledInput', ['root', 'underline', 'input']));
+
 var filledInputClasses$1 = filledInputClasses;
 
 const _excluded$f = ["disableUnderline", "components", "componentsProps", "fullWidth", "hiddenLabel", "inputComponent", "multiline", "type"];
@@ -18391,7 +18400,9 @@ const NotchedOutlineLegend = styled$1('legend')(({
   ownerState,
   theme
 }) => _extends$6({
-  float: 'unset'
+  float: 'unset',
+  // Fix conflict with bootstrap
+  overflow: 'hidden'
 }, !ownerState.withLabel && {
   padding: 0,
   lineHeight: '11px',
@@ -18501,7 +18512,9 @@ NotchedOutline.propTypes = {
 function getOutlinedInputUtilityClass(slot) {
   return generateUtilityClass('MuiOutlinedInput', slot);
 }
-const outlinedInputClasses = generateUtilityClasses('MuiOutlinedInput', ['root', 'colorSecondary', 'focused', 'disabled', 'adornedStart', 'adornedEnd', 'error', 'sizeSmall', 'multiline', 'notchedOutline', 'input', 'inputSizeSmall', 'inputMultiline', 'inputAdornedStart', 'inputAdornedEnd']);
+
+const outlinedInputClasses = _extends$6({}, inputBaseClasses$1, generateUtilityClasses('MuiOutlinedInput', ['root', 'notchedOutline', 'input']));
+
 var outlinedInputClasses$1 = outlinedInputClasses;
 
 const _excluded$d = ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "type"];
@@ -21515,6 +21528,19 @@ const SELECTION_STYLING = {
     background: STYLING_DEFAULTS.WHITE
   }
 };
+function getPadding(styleObj, defaultPadding) {
+  let padding = defaultPadding;
+
+  if (styleObj.padding) {
+    ({
+      padding
+    } = styleObj);
+  } else if (styleObj.fontSize) {
+    padding = `${styleObj.fontSize / 2}px ${styleObj.fontSize}px`;
+  }
+
+  return padding;
+}
 function getColor(color = {}, defaultColor, theme) {
   const resolvedColor = theme.getColorPickerColor(color);
   return !resolvedColor || resolvedColor === 'none' ? defaultColor : resolvedColor;
@@ -21523,7 +21549,7 @@ const getAutoFontColor = backgroundColor => isDarkColor(backgroundColor) ? STYLI
 const getBaseStyling = (styleObj, theme) => ({
   color: getColor(styleObj.fontColor, STYLING_DEFAULTS.FONT_COLOR, theme),
   fontSize: styleObj.fontSize || STYLING_DEFAULTS.FONT_SIZE,
-  padding: styleObj.fontSize ? `${styleObj.fontSize / 2}px ${styleObj.fontSize}px` : STYLING_DEFAULTS.PADDING
+  padding: getPadding(styleObj, STYLING_DEFAULTS.PADDING)
 }); // Both index === -1 and color === null must be true for the property to be unset
 
 const isUnset = prop => !prop || JSON.stringify(prop) === JSON.stringify({
@@ -23207,8 +23233,18 @@ var interopRequireDefault = {exports: {}};
 
 var createSvgIcon = {};
 
+// eslint-disable-next-line @typescript-eslint/naming-convention
+
+const unstable_ClassNameGenerator = {
+  configure: generator => {
+    console.warn(['MUI: `ClassNameGenerator` import from `@mui/material/utils` is outdated and might cause unexpected issues.', '', "You should use `import { unstable_ClassNameGenerator } from '@mui/material/className'` instead", '', 'The detail of the issue: https://github.com/mui/material-ui/issues/30011#issuecomment-1024993401', '', 'The updated documentation: https://mui.com/guides/classname-generator/'].join('\n'));
+    ClassNameGenerator$1.configure(generator);
+  }
+};
+
 var utils = /*#__PURE__*/Object.freeze({
   __proto__: null,
+  unstable_ClassNameGenerator: unstable_ClassNameGenerator,
   capitalize: capitalize,
   createChainedFunction: createChainedFunction,
   createSvgIcon: createSvgIcon$1,
@@ -23225,8 +23261,7 @@ var utils = /*#__PURE__*/Object.freeze({
   useControlled: useControlled,
   useEventCallback: useEventCallback,
   useForkRef: useForkRef,
-  useIsFocusVisible: useIsFocusVisible,
-  unstable_ClassNameGenerator: ClassNameGenerator$1
+  useIsFocusVisible: useIsFocusVisible
 });
 
 var require$$0 = /*@__PURE__*/getAugmentedNamespace(utils);
@@ -23409,29 +23444,24 @@ function useDidUpdateEffect(fn, inputs) {
 const handleHorizontalScroll = (evt, isRTL, memoedContainer) => {
   evt.stopPropagation(); // scrollWidth is the width of an element's content, including content not visible on the screen due to overflow.
   // offsetWidth is the element's CSS width, including any borders, padding, and vertical scrollbars
-  // scrollLeft is the number of pixels scrolled from its left edge
+
+  const maxScrollableWidth = memoedContainer.scrollWidth - memoedContainer.offsetWidth; // scrollLeft is the number of pixels scrolled from its left edge
+  // scrollLeft is 0 when the scrollbar is at its leftmost position
+  // (at the start of the scrolled content),
+  // and then increasingly negative as it is scrolled towards left.
 
   let {
     scrollLeft
-  } = memoedContainer;
-  const ScrollLeftWidth = scrollLeft + evt.deltaX;
-  const maxScrollableWidth = memoedContainer.scrollWidth - memoedContainer.offsetWidth;
-
-  if (isRTL) {
-    // scrollLeft is 0 when the scrollbar is at its rightmost position
-    // (at the start of the scrolled content),
-    // and then increasingly negative as you scroll towards (left) the end of the content .
-    // evt.deltaX increasingly negative as you scroll towards left,
-    // increasingly positive as you scroll towards right
-    const scrollRight = maxScrollableWidth + ScrollLeftWidth;
-
-    if (maxScrollableWidth > 0 && (scrollRight <= 0 || scrollRight > maxScrollableWidth)) {
-      evt.preventDefault();
-      scrollLeft = Math.min(0, Math.min(maxScrollableWidth, scrollRight));
-    }
-  } else if (maxScrollableWidth > 0 && (ScrollLeftWidth < 0 || ScrollLeftWidth > maxScrollableWidth)) {
+  } = memoedContainer; // evt.deltaX is the horizontal scroll amount
+  // evt.deltaX increasingly negative as you scroll towards left,
+  // increasingly positive as you scroll towards right
+
+  let scrolledDistance = scrollLeft + evt.deltaX;
+  if (isRTL) scrolledDistance = maxScrollableWidth + scrolledDistance;
+
+  if (maxScrollableWidth > 0 && (scrolledDistance < 0 || scrolledDistance > maxScrollableWidth + 1)) {
     evt.preventDefault();
-    scrollLeft = Math.max(0, Math.min(maxScrollableWidth, ScrollLeftWidth));
+    scrollLeft = isRTL ? Math.min(0, Math.min(maxScrollableWidth, scrolledDistance)) : Math.max(0, Math.min(maxScrollableWidth, scrolledDistance));
   }
 };
 const handleNavigateTop = ({
@@ -23529,6 +23559,13 @@ function announcementFactory(rootElement, translator, prevAnnounceEl) {
   };
 }
 
+function Portal({
+  children,
+  target
+}) {
+  return ReactDOM__default.createPortal(children, target);
+}
+
 function TableWrapper(props) {
   const {
     rootElement,
@@ -23541,6 +23578,7 @@ function TableWrapper(props) {
     keyboard,
     rect,
     direction,
+    footerContainer,
     announcer // this is only for testing purposes
 
   } = props;
@@ -23558,7 +23596,6 @@ function TableWrapper(props) {
   const shouldRefocus = useRef(false);
   const tableContainerRef = useRef();
   const tableWrapperRef = useRef();
-  const fixedRowsPerPage = selectionsAPI.isModal() || rect.width < 550 || size.qcx > 100;
   /* eslint-disable react-hooks/rules-of-hooks */
 
   const announce = announcer || useMemo(() => announcementFactory(rootElement, translator), [translator.language]);
@@ -23643,12 +23680,9 @@ function TableWrapper(props) {
     backgroundColor: 'rgb(255, 255, 255)',
     boxShadow: 'none'
   };
-  const tableContainerStyle = constraints.active ? {
-    height: '100%',
-    overflow: 'hidden'
-  } : {
-    height: 'calc(100% - 52px)',
-    overflow: 'auto'
+  const tableContainerStyle = {
+    height: constraints.active || footerContainer ? '100%' : 'calc(100% - 52px)',
+    overflow: constraints.active ? 'hidden' : 'auto'
   };
   const paperTablePaginationStyle = {
     display: 'flex',
@@ -23660,6 +23694,62 @@ function TableWrapper(props) {
     boxShadow: 'none',
     alignItems: 'center'
   };
+
+  const paginationContent = width => {
+    const fixedRowsPerPage = selectionsAPI.isModal() || width < 550 || size.qcx > 100;
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TablePagination$1, {
+      sx: constraints.active && {
+        display: 'none'
+      },
+      rowsPerPageOptions: fixedRowsPerPage ? [rowsPerPage] : rowsPerPageOptions,
+      component: "div",
+      count: size.qcy,
+      rowsPerPage: rowsPerPage,
+      labelRowsPerPage: `${translator.get('SNTable.Pagination.RowsPerPage')}:`,
+      page: page,
+      SelectProps: {
+        inputProps: {
+          'aria-label': translator.get('SNTable.Pagination.RowsPerPage'),
+          'data-testid': 'select',
+          style: {
+            color: '#404040'
+          },
+          tabIndex: !keyboard.enabled || keyboard.active ? 0 : -1
+        },
+        native: true
+      },
+      labelDisplayedRows: ({
+        from,
+        to,
+        count
+      }) => width > 250 && translator.get('SNTable.Pagination.DisplayedRowsLabel', [`${from} - ${to}`, count]),
+      onRowsPerPageChange: handleChangeRowsPerPage,
+      ActionsComponent: () => /*#__PURE__*/React__default.createElement("div", null, null),
+      onPageChange: () => {}
+    }), /*#__PURE__*/React__default.createElement(TablePaginationActions, {
+      direction: direction,
+      page: page,
+      onPageChange: handleChangePage,
+      lastPageIdx: Math.ceil(size.qcy / rowsPerPage) - 1,
+      keyboard: keyboard,
+      isInSelectionMode: selectionsAPI.isModal(),
+      tableWidth: width,
+      translator: translator
+    }));
+  };
+
+  let paginationBar;
+
+  if (footerContainer) {
+    paginationBar = /*#__PURE__*/React__default.createElement(Portal, {
+      target: footerContainer
+    }, paginationContent(footerContainer.getBoundingClientRect().width));
+  } else {
+    paginationBar = /*#__PURE__*/React__default.createElement(Paper$1, {
+      sx: paperTablePaginationStyle
+    }, paginationContent(rect.width));
+  }
+
   return /*#__PURE__*/React__default.createElement(Paper$1, {
     dir: direction,
     sx: paperStyle,
@@ -23692,51 +23782,12 @@ function TableWrapper(props) {
     setFocusedCellCoord: setFocusedCellCoord,
     setShouldRefocus: setShouldRefocus,
     tableWrapperRef: tableWrapperRef
-  })))), /*#__PURE__*/React__default.createElement(Paper$1, {
-    sx: paperTablePaginationStyle
-  }, /*#__PURE__*/React__default.createElement(TablePagination$1, {
-    sx: constraints.active && {
-      display: 'none'
-    },
-    rowsPerPageOptions: fixedRowsPerPage ? [rowsPerPage] : rowsPerPageOptions,
-    component: "div",
-    count: size.qcy,
-    rowsPerPage: rowsPerPage,
-    labelRowsPerPage: `${translator.get('SNTable.Pagination.RowsPerPage')}:`,
-    page: page,
-    SelectProps: {
-      inputProps: {
-        'aria-label': translator.get('SNTable.Pagination.RowsPerPage'),
-        'data-testid': 'select',
-        style: {
-          color: '#404040'
-        },
-        tabIndex: !keyboard.enabled || keyboard.active ? 0 : -1
-      },
-      native: true
-    },
-    labelDisplayedRows: ({
-      from,
-      to,
-      count
-    }) => rect.width > 250 && translator.get('SNTable.Pagination.DisplayedRowsLabel', [`${from} - ${to}`, count]),
-    onRowsPerPageChange: handleChangeRowsPerPage,
-    ActionsComponent: () => /*#__PURE__*/React__default.createElement("div", null, null),
-    onPageChange: () => {}
-  }), /*#__PURE__*/React__default.createElement(TablePaginationActions, {
-    direction: direction,
-    page: page,
-    onPageChange: handleChangePage,
-    lastPageIdx: Math.ceil(size.qcy / rowsPerPage) - 1,
-    keyboard: keyboard,
-    isInSelectionMode: selectionsAPI.isModal(),
-    tableWidth: rect.width,
-    translator: translator
-  })));
+  })))), paginationBar);
 }
 TableWrapper.defaultProps = {
   announcer: null,
-  direction: null
+  direction: null,
+  footerContainer: null
 };
 TableWrapper.propTypes = {
   rootElement: PropTypes.object.isRequired,
@@ -23748,6 +23799,7 @@ TableWrapper.propTypes = {
   selectionsAPI: PropTypes.object.isRequired,
   keyboard: PropTypes.object.isRequired,
   rect: PropTypes.object.isRequired,
+  footerContainer: PropTypes.object,
   direction: PropTypes.string,
   announcer: PropTypes.func
 };
@@ -24465,7 +24517,8 @@ function supernova(env) {
       const rootElement = useElement();
       const layout = useStaleLayout();
       const {
-        direction
+        direction,
+        footerContainer
       } = useOptions();
       const model = useModel();
       const constraints = useConstraints();
@@ -24499,7 +24552,8 @@ function supernova(env) {
             theme,
             changeSortOrder,
             keyboard,
-            rect
+            rect,
+            footerContainer
           });
         }
       }, [tableData, constraints, direction, selectionsAPI.isModal(), theme.name(), keyboard.active, translator.language(), rect.width]);