@nebula.js/sn-table 1.6.0 → 1.8.0

package/README.md

@@ -4,7 +4,9 @@
 
 # sn-table
 
-table supernova for [nebula.js]
+Table supernova for [nebula.js]
+
+More specifics and information about the sn-table can be found in [the Qlik developer portal](https://qlik.dev/libraries-and-tools/visualizations/table).
 
 ## Mashup Usage
 
@@ -32,15 +34,13 @@ nuked.render({
 });
 ```
 
-Look into [Build a simple mashup using nebula.js](https://qlik.dev/tutorials/build-a-simple-mashup-using-nebulajs) to learn more.
+Look into [Build a simple mashup using nebula.js](https://qlik.dev/tutorials/build-a-simple-mashup-using-nebulajs) and [Embed a visualization](https://qlik.dev/libraries-and-tools/nebulajs/rendering) to learn more.
 
-[See full example](./mashup-example) of the mashup usage.
-
-More specifics and information about the sn-table can be found in [the Qlik developer portal](https://qlik.dev/libraries-and-tools/visualizations/table).
+[Check full examples](./mashup-example) of the mashup usage.
 
 ## Visualization Extension Usage
 
-### Steps to create a sn-table extension as as a Qlik Sense extension
+### Building and adding the sn-table extension to Qlik Sense
 
 Install all dependencies:
 
@@ -48,17 +48,13 @@ Install all dependencies:
 yarn
 ```
 
-Build nebula.js visualization:
+Build a nebula.js visualization as a Qlik Sense extension:
 
 ```sh
 yarn build
 ```
 
-Build a nebula visualization as a Qlik Sense extension:
-
-```sh
-yarn sense
-```
+Compress the generated 'dist' folder into the 'application/zip' file format and rename it to 'sn-table-ext'.
 
 |                          [Saas Edition of Qlik Sense]                           |                     [Qlik Sense Enterprise]                      |                            [Qlik Sense Desktop]                            |
 | :-----------------------------------------------------------------------------: | :--------------------------------------------------------------: | :------------------------------------------------------------------------: |
@@ -70,7 +66,7 @@ The API can also be found in [the Qlik developer portal](https://qlik.dev/apis/j
 
 ## Contribution
 
-Follow the instructions in our [contributing guide](./.github/CONTRIBUTION.md).
+To learn how to run a sn-table extension using nebula development server and develop, see our [contributing guide](./.github/CONTRIBUTION.md).
 
 ## Package
 

package/api-specifications/properties.json

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

package/core/esm/index.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/sn-table v1.6.0
+* @nebula.js/sn-table v1.8.0
 * Copyright (c) 2022 QlikTech International AB
 * Released under the MIT license.
 */
@@ -502,7 +502,7 @@ const properties$1 = {
    * @type {string}
    * @default
    */
-  version: "1.6.0",
+  version: "1.8.0",
 
   /**
    * Extends HyperCubeDef, see Engine API: HyperCubeDef
@@ -1045,12 +1045,12 @@ async function manageData(model, layout, pageInfo, setPageInfo) {
   } = layout;
   const size = qHyperCube.qSize;
   const top = page * rowsPerPage;
-  const width = size.qcx;
-  const totalHeight = size.qcy;
-  const height = Math.min(rowsPerPage, totalHeight - top); // When the number of rows is reduced (e.g. confirming selections),
+  const totalHorizontalCount = size.qcx;
+  const totalVerticalCount = size.qcy;
+  const height = Math.min(rowsPerPage, totalVerticalCount - top); // When the number of rows is reduced (e.g. confirming selections),
   // you can end up still being on a page that doesn't exist anymore, then go back to the first page and return null
 
-  if (page > 0 && top >= totalHeight) {
+  if (page > 0 && top >= totalVerticalCount) {
     setPageInfo({ ...pageInfo,
       page: 0
     });
@@ -1058,9 +1058,9 @@ async function manageData(model, layout, pageInfo, setPageInfo) {
   } // If the number of cells exceeds 10k then we need to lower the rows per page to the maximum possible value
 
 
-  if (height * width > MAX_CELLS) {
+  if (height * totalHorizontalCount > MAX_CELLS) {
     setPageInfo({ ...pageInfo,
-      rowsPerPage: getHighestPossibleRpp(width, rowsPerPageOptions),
+      rowsPerPage: getHighestPossibleRpp(totalHorizontalCount, rowsPerPageOptions),
       page: 0
     });
     return null;
@@ -1073,7 +1073,7 @@ async function manageData(model, layout, pageInfo, setPageInfo) {
     qTop: top,
     qLeft: 0,
     qHeight: height,
-    qWidth: width
+    qWidth: totalHorizontalCount
   }]);
   const rows = dataPages[0].qMatrix.map((r, rowIdx) => {
     const row = {
@@ -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"];
@@ -21831,7 +21844,7 @@ const preventDefaultBehavior = evt => {
 };
 const handleTableWrapperKeyDown = ({
   evt,
-  totalRowSize,
+  totalVerticalCount,
   page,
   rowsPerPage,
   handleChangePage,
@@ -21841,7 +21854,7 @@ const handleTableWrapperKeyDown = ({
 }) => {
   if (isCtrlShift(evt)) {
     preventDefaultBehavior(evt);
-    const lastPage = Math.ceil(totalRowSize / rowsPerPage) - 1;
+    const lastPage = Math.ceil(totalVerticalCount / rowsPerPage) - 1;
 
     if (evt.key === 'ArrowRight' && page < lastPage) {
       setShouldRefocus();
@@ -23220,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,
@@ -23238,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);
@@ -23422,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 = ({
@@ -23542,6 +23559,11 @@ function announcementFactory(rootElement, translator, prevAnnounceEl) {
   };
 }
 
+const Portal = ({
+  children,
+  target
+}) => ReactDOM__default.createPortal(children, target);
+
 function TableWrapper(props) {
   const {
     rootElement,
@@ -23554,6 +23576,7 @@ function TableWrapper(props) {
     keyboard,
     rect,
     direction,
+    footerContainer,
     announcer // this is only for testing purposes
 
   } = props;
@@ -23562,6 +23585,8 @@ function TableWrapper(props) {
     rows,
     columns
   } = tableData;
+  const totalVerticalCount = size.qcy;
+  const paginationNeeded = totalVerticalCount > 10;
   const {
     page,
     rowsPerPage,
@@ -23571,11 +23596,10 @@ 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]);
-  const totalPages = Math.ceil(size.qcy / rowsPerPage);
+  const totalPages = Math.ceil(totalVerticalCount / rowsPerPage);
   const tableAriaLabel = `${translator.get('SNTable.Accessibility.RowsAndColumns', [rows.length + 1, columns.length])} ${translator.get('SNTable.Accessibility.NavigationInstructions')}`;
 
   const setShouldRefocus = () => {
@@ -23650,18 +23674,15 @@ function TableWrapper(props) {
       shouldAddTabstop: !keyboard.enabled || keyboard.active,
       announce
     });
-  }, [rows.length, size.qcy, size.qcx, page]);
+  }, [rows.length, totalVerticalCount, size.qcx, page]);
   const paperStyle = {
     height: '100%',
     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 || paginationNeeded ? 'calc(100% - 52px)' : '100%',
+    overflow: constraints.active ? 'hidden' : 'auto'
   };
   const paperTablePaginationStyle = {
     display: 'flex',
@@ -23673,13 +23694,69 @@ 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: totalVerticalCount,
+      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(totalVerticalCount / rowsPerPage) - 1,
+      keyboard: keyboard,
+      isInSelectionMode: selectionsAPI.isModal(),
+      tableWidth: width,
+      translator: translator
+    }));
+  };
+
+  let paginationBar;
+
+  if (footerContainer) {
+    paginationBar = /*#__PURE__*/React__default.createElement(Portal, {
+      target: footerContainer
+    }, paginationNeeded && paginationContent(footerContainer.getBoundingClientRect().width));
+  } else {
+    paginationBar = paginationNeeded && /*#__PURE__*/React__default.createElement(Paper$1, {
+      sx: paperTablePaginationStyle
+    }, paginationContent(rect.width));
+  }
+
   return /*#__PURE__*/React__default.createElement(Paper$1, {
     dir: direction,
     sx: paperStyle,
     ref: tableWrapperRef,
     onKeyDown: evt => handleTableWrapperKeyDown({
       evt,
-      totalRowSize: size.qcy,
+      totalVerticalCount,
       page,
       rowsPerPage,
       handleChangePage,
@@ -23705,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,
@@ -23761,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
 };
@@ -24478,7 +24517,8 @@ function supernova(env) {
       const rootElement = useElement();
       const layout = useStaleLayout();
       const {
-        direction
+        direction,
+        footerContainer
       } = useOptions();
       const model = useModel();
       const constraints = useConstraints();
@@ -24512,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]);