@nebula.js/stardust 3.1.2 → 3.1.3

package/core/esm/dev.js

@@ -1,11 +1,11 @@
 /*
-* @nebula.js/stardust v3.1.2
+* @nebula.js/stardust v3.1.3
 * Copyright (c) 2023 QlikTech International AB
 * Released under the MIT license.
 */
 
 import * as React from 'react';
-import React__default, { useState as useState$1, useEffect as useEffect$1, useReducer, forwardRef, useMemo as useMemo$1, useImperativeHandle as useImperativeHandle$1, useCallback, useLayoutEffect as useLayoutEffect$1, PureComponent, createElement, useContext, useRef } from 'react';
+import React__default, { useState as useState$1, useEffect as useEffect$1, useReducer, forwardRef, useMemo as useMemo$1, useImperativeHandle as useImperativeHandle$1, useCallback, useLayoutEffect as useLayoutEffect$1, PureComponent, useRef, createElement, useContext } from 'react';
 import ReactDOM from 'react-dom';
 import { CacheProvider, ThemeContext as ThemeContext$2 } from '@emotion/react';
 import { Checkbox, Radio, Grid, Typography, FormControlLabel, Tooltip, Paper, IconButton, Popover, MenuList, MenuItem, ListItemIcon, Divider, InputAdornment, OutlinedInput, Badge, List, ListItem, Button, Box, Icon, CircularProgress } from '@mui/material';
@@ -7940,7 +7940,7 @@ function create$3(definition) {
   return cache[key];
 }
 
-const NEBULA_VERSION_HASH = "1f4e" ;
+const NEBULA_VERSION_HASH = "b117" ;
 ClassNameGenerator$1.configure(componentName => {
   return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 });
@@ -8459,7 +8459,7 @@ function boot(_ref2) {
   const appRef = React__default.createRef();
   const element = document.createElement('div');
   element.style.display = 'none';
-  element.setAttribute('data-nebulajs-version', "3.1.2" );
+  element.setAttribute('data-nebulajs-version', "3.1.3" );
   element.setAttribute('data-app-id', app.id);
   document.body.appendChild(element);
   ReactDOM.render( /*#__PURE__*/React__default.createElement(NebulaApp, {
@@ -9417,7 +9417,9 @@ function getFieldKeyboardNavigation(_ref) {
   let {
     select,
     confirm,
-    cancel
+    cancel,
+    setScrollPosition,
+    focusListItems
   } = _ref;
   const getElement = function (elm) {
     let next = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
@@ -9432,7 +9434,8 @@ function getFieldKeyboardNavigation(_ref) {
     let elementToFocus;
     const {
       keyCode,
-      shiftKey = false
+      shiftKey = false,
+      ctrlKey = false
     } = event.nativeEvent;
     switch (keyCode) {
       case KEYS.SHIFT:
@@ -9471,6 +9474,22 @@ function getFieldKeyboardNavigation(_ref) {
         cancel();
         return;
       // let it propagate to top-level
+      case KEYS.HOME:
+        focusListItems.setFirst(true);
+        if (ctrlKey) {
+          setScrollPosition === null || setScrollPosition === void 0 ? void 0 : setScrollPosition('overflowStart');
+          break;
+        }
+        setScrollPosition === null || setScrollPosition === void 0 ? void 0 : setScrollPosition('start');
+        break;
+      case KEYS.END:
+        focusListItems.setLast(true);
+        if (ctrlKey) {
+          setScrollPosition === null || setScrollPosition === void 0 ? void 0 : setScrollPosition('overflowEnd');
+          break;
+        }
+        setScrollPosition === null || setScrollPosition === void 0 ? void 0 : setScrollPosition('end');
+        break;
       default:
         return;
       // don't stop propagation since we want to outsource keydown to other handlers.
@@ -9748,15 +9767,26 @@ function RowColumn(_ref3) {
     showGray = true,
     columnCount = 1,
     rowCount = 1,
-    layoutOrder
+    layoutOrder,
+    dataOffset,
+    focusListItems,
+    listCount
   } = data;
   let cellIndex;
   let styles;
+  const count = {
+    max: null,
+    currentIndex: null
+  };
   if (typeof rowIndex === 'number' && typeof columnIndex === 'number') {
     if (layoutOrder === 'row') {
       cellIndex = rowIndex * columnCount + columnIndex;
+      count.max = rowCount;
+      count.currentIndex = rowIndex;
     } else {
       cellIndex = columnIndex * rowCount + rowIndex;
+      count.max = columnCount;
+      count.currentIndex = columnIndex;
     }
     const padding = 0;
     styles = _objectSpread2(_objectSpread2({}, style), {}, {
@@ -9766,9 +9796,27 @@ function RowColumn(_ref3) {
     });
   } else {
     cellIndex = index;
+    count.max = listCount;
+    count.currentIndex = index;
     styles = _objectSpread2({}, style);
   }
-  const handleKeyDownCallback = useCallback(getFieldKeyboardNavigation(actions), [actions]);
+  cellIndex += dataOffset;
+  const rowRef = useRef(null);
+  useEffect$1(() => {
+    if (rowRef.current !== null) {
+      if (count.currentIndex === 0 && focusListItems.first) {
+        rowRef.current.focus();
+        focusListItems.setFirst(false);
+      }
+      if (count.currentIndex === count.max - 1 && focusListItems.last) {
+        rowRef.current.focus();
+        focusListItems.setLast(false);
+      }
+    }
+  }, [rowRef.current]);
+  const handleKeyDownCallback = useCallback(getFieldKeyboardNavigation(_objectSpread2(_objectSpread2({}, actions), {}, {
+    focusListItems
+  })), [actions]);
   const [isSelected, setSelected] = useState$1(false);
   const [cell, setCell] = useState$1();
   const [classArr, setClassArr] = useState$1([]);
@@ -9943,6 +9991,7 @@ function RowColumn(_ref3) {
     flexBasisProp: flexBasisVal,
     dense: dense
   }, /*#__PURE__*/React__default.createElement(Grid, {
+    ref: rowRef,
     container: true,
     gap: 0,
     className: joinClassNames(['value', ...classArr]),
@@ -11522,11 +11571,18 @@ function getStyledComponents() {
 }
 
 const getIndex = (renderProps, isColumnLayout) => {
-  if (renderProps !== null && renderProps !== void 0 && renderProps.visibleRowStopIndex || renderProps.visibleColumnStopIndex) {
+  if ((renderProps === null || renderProps === void 0 ? void 0 : renderProps.visibleRowStopIndex) !== undefined || renderProps.visibleColumnStopIndex !== undefined) {
     return isColumnLayout ? renderProps.visibleColumnStopIndex : renderProps.visibleRowStopIndex;
   }
   return renderProps.visibleStopIndex;
 };
+const getIsScrollTop = (renderProps, isColumnLayout) => {
+  if ((renderProps === null || renderProps === void 0 ? void 0 : renderProps.visibleRowStartIndex) !== undefined || renderProps.visibleColumnStartIndex !== undefined) {
+    return isColumnLayout ? renderProps.visibleColumnStartIndex === 0 : renderProps.visibleRowStartIndex === 0;
+  }
+  return renderProps.visibleStartIndex === 0;
+};
+const getIsEndOfData = (qCardinal, index, count, dataOffset) => qCardinal === index * count + dataOffset + count;
 function handleSetOverflowDisclaimer(_ref) {
   let {
     renderProps,
@@ -11534,14 +11590,18 @@ function handleSetOverflowDisclaimer(_ref) {
     maxCount,
     columnCount,
     rowCount,
-    overflowDisclaimer
+    overflowDisclaimer,
+    qCardinal,
+    dataOffset
   } = _ref;
   const isColumnLayout = (layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.layoutOrder) === 'column' && layoutOptions.dataLayout !== 'singleColumn';
   const index = getIndex(renderProps, isColumnLayout);
   const stopIndex = isColumnLayout ? maxCount.column : maxCount.row;
   const count = isColumnLayout ? columnCount : rowCount;
   const overflowPossible = count >= stopIndex;
-  const show = overflowPossible && index >= stopIndex - 1 || overflowDisclaimer.state.show;
+  const isEndOfData = getIsEndOfData(qCardinal, index, isColumnLayout ? rowCount : columnCount, dataOffset);
+  const isTopOfOverflowData = !!dataOffset && getIsScrollTop(renderProps, isColumnLayout);
+  const show = overflowPossible && !isEndOfData && index >= stopIndex - 1 || isTopOfOverflowData || overflowDisclaimer.state.show; // If its shown once, the user have to dismiss to hide it.
   overflowDisclaimer.set(show);
 }
 
@@ -11572,7 +11632,9 @@ function getListBoxComponents(_ref) {
     listLayout,
     sizes,
     listCount,
-    overflowDisclaimer
+    overflowDisclaimer,
+    setScrollPosition,
+    focusListItems
   } = _ref;
   const {
     layoutOptions = {},
@@ -11615,12 +11677,15 @@ function getListBoxComponents(_ref) {
     actions: {
       select,
       confirm: () => selections === null || selections === void 0 ? void 0 : selections.confirm.call(selections),
-      cancel: () => selections === null || selections === void 0 ? void 0 : selections.cancel.call(selections)
+      cancel: () => selections === null || selections === void 0 ? void 0 : selections.cancel.call(selections),
+      setScrollPosition
     },
     frequencyMax,
     histogram,
     keyboard,
-    showGray
+    showGray,
+    dataOffset: local.current.dataOffset,
+    focusListItems
   });
   const List = _ref2 => {
     let {
@@ -11637,9 +11702,12 @@ function getListBoxComponents(_ref) {
       width: width,
       itemCount: listCount,
       layout: listLayout,
-      itemData: _objectSpread2({}, commonItemData),
+      itemData: _objectSpread2(_objectSpread2({}, commonItemData), {}, {
+        listCount
+      }),
       itemSize: itemSize,
       onItemsRendered: renderProps => {
+        var _layout$qListObject, _layout$qListObject$q;
         if (scrollState) {
           scrollState.setScrollPos(renderProps.visibleStopIndex);
         }
@@ -11649,7 +11717,9 @@ function getListBoxComponents(_ref) {
           maxCount: sizes.maxCount,
           columnCount,
           rowCount,
-          overflowDisclaimer
+          overflowDisclaimer,
+          qCardinal: layout === null || layout === void 0 ? void 0 : (_layout$qListObject = layout.qListObject) === null || _layout$qListObject === void 0 ? void 0 : (_layout$qListObject$q = _layout$qListObject.qDimensionInfo) === null || _layout$qListObject$q === void 0 ? void 0 : _layout$qListObject$q.qCardinal,
+          dataOffset: local.current.dataOffset
         });
         onItemsRendered(_objectSpread2({}, renderProps));
       },
@@ -11673,6 +11743,7 @@ function getListBoxComponents(_ref) {
     // eslint-disable-next-line no-param-reassign
     local.current.listRef = ref;
     const handleGridItemsRendered = renderProps => {
+      var _layout$qListObject2, _layout$qListObject2$;
       const renderOptions = deriveRenderOptions({
         renderProps,
         scrollState,
@@ -11686,7 +11757,9 @@ function getListBoxComponents(_ref) {
         maxCount: sizes.maxCount,
         columnCount,
         rowCount,
-        overflowDisclaimer
+        overflowDisclaimer,
+        qCardinal: layout === null || layout === void 0 ? void 0 : (_layout$qListObject2 = layout.qListObject) === null || _layout$qListObject2 === void 0 ? void 0 : (_layout$qListObject2$ = _layout$qListObject2.qDimensionInfo) === null || _layout$qListObject2$ === void 0 ? void 0 : _layout$qListObject2$.qCardinal,
+        dataOffset: local.current.dataOffset
       });
       onItemsRendered(renderOptions);
     };
@@ -11857,9 +11930,10 @@ function useItemsLoader(_ref) {
   const [pages, setPages] = useState$1([]);
   let [minimumBatchSize] = useState$1(0);
   const loadMoreItems = (startIndex, stopIndex) => {
+    const offset = local.current.dataOffset;
     local.current.queue.push({
-      start: startIndex,
-      stop: stopIndex
+      start: startIndex + offset,
+      stop: stopIndex + offset
     });
     const isScrolling = loaderRef.current ?
     // eslint-disable-next-line no-underscore-dangle
@@ -12248,6 +12322,47 @@ function ListBoxFooter(_ref3) {
   }, /*#__PURE__*/React__default.createElement(SmallCloseIcon, null))));
 }
 
+const getOffset = (layout, listCount) => {
+  const totalLength = layout.qListObject.qDimensionInfo.qCardinal;
+  const offset = totalLength - listCount;
+  return offset;
+};
+function getScrollIndex(_ref) {
+  let {
+    position,
+    isRow,
+    sizes,
+    layout,
+    offset
+  } = _ref;
+  let scrollIndex;
+  let triggerRerender = false;
+  let newOffset = offset !== null && offset !== void 0 ? offset : 0;
+  switch (position) {
+    case 'start':
+      scrollIndex = 0;
+      break;
+    case 'end':
+      scrollIndex = isRow ? sizes.rowCount : sizes.columnCount;
+      break;
+    case 'overflowStart':
+      newOffset = 0;
+      scrollIndex = 0;
+      triggerRerender = true;
+      break;
+    case 'overflowEnd':
+      newOffset = getOffset(layout, sizes.listCount);
+      scrollIndex = layout.qListObject.qDimensionInfo.qCardinal;
+      triggerRerender = true;
+      break;
+  }
+  return {
+    scrollIndex,
+    offset: newOffset,
+    triggerRerender
+  };
+}
+
 const _excluded$4 = ["isLoadingData"];
 const DEFAULT_MIN_BATCH_SIZE = 100;
 function ListBox(_ref) {
@@ -12280,7 +12395,8 @@ function ListBox(_ref) {
   const loaderRef = useRef(null);
   const local = useRef({
     queue: [],
-    validPages: false
+    validPages: false,
+    dataOffset: 0
   });
   const listData = useRef({
     pages: []
@@ -12338,6 +12454,23 @@ function ListBox(_ref) {
     doc: document,
     isSingleSelect
   });
+  const {
+    layoutOptions = {}
+  } = layout || {};
+  let isRow = true;
+  if (layoutOptions.dataLayout) {
+    isRow = layoutOptions.dataLayout === 'singleColumn' ? true : (layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.layoutOrder) === 'row';
+  }
+  const isGrid = (layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.dataLayout) === 'grid';
+  const scrollToIndex = index => {
+    const gridIndex = _objectSpread2({}, isRow ? {
+      rowIndex: index
+    } : {
+      columnIndex: index
+    });
+    const scrollIndex = isGrid ? gridIndex : index;
+    loaderRef.current._listRef.scrollToItem(scrollIndex);
+  };
   const fetchData = () => {
     local.current.queue = [];
     local.current.validPages = false;
@@ -12347,7 +12480,8 @@ function ListBox(_ref) {
       if (layout && layout.qSelectionInfo.qInSelections) {
         return;
       }
-      loaderRef.current._listRef.scrollToItem(0);
+      local.current.dataOffset = 0;
+      scrollToIndex(0);
     }
   };
   if (update) {
@@ -12368,14 +12502,11 @@ function ListBox(_ref) {
   }, [loaderRef.current]);
   useEffect$1(() => {
     fetchData();
-  }, [layout]);
+  }, [layout, local.current.dataOffset]);
   const textWidth = useTextWidth({
     text: getMeasureText(layout),
     font: '14px Source sans pro'
   });
-  const {
-    layoutOptions = {}
-  } = layout || {};
   let minimumBatchSize = DEFAULT_MIN_BATCH_SIZE;
   const isVertical = layoutOptions.dataLayout ? layoutOptions.dataLayout === 'singleColumn' : listLayout !== 'horizontal';
   const count = layout === null || layout === void 0 ? void 0 : (_layout$qListObject$q = layout.qListObject.qSize) === null || _layout$qListObject$q === void 0 ? void 0 : _layout$qListObject$q.qcy;
@@ -12399,9 +12530,41 @@ function ListBox(_ref) {
     listCount
   } = sizes;
   setStoreValue('listCount', listCount);
+  const setScrollPosition = position => {
+    const {
+      scrollIndex,
+      offset,
+      triggerRerender
+    } = getScrollIndex({
+      position,
+      isRow,
+      sizes,
+      layout,
+      offset: local.current.dataOffset
+    });
+    local.current.dataOffset = offset;
+    if (triggerRerender) {
+      setPages(currentPages => [...currentPages]);
+    }
+    scrollToIndex(scrollIndex);
+  };
   const {
     textAlign
   } = (layout === null || layout === void 0 ? void 0 : layout.qListObject.qDimensionInfo) || {};
+  const [focusListItem, setFocusListItem] = useState$1({
+    first: false,
+    last: false
+  });
+  const getFocusState = () => ({
+    first: focusListItem.first,
+    setFirst: first => setFocusListItem(prevState => _objectSpread2(_objectSpread2({}, prevState), {}, {
+      first
+    })),
+    last: focusListItem.last,
+    setLast: last => setFocusListItem(prevState => _objectSpread2(_objectSpread2({}, prevState), {}, {
+      last
+    }))
+  });
   const {
     List,
     Grid
@@ -12430,7 +12593,9 @@ function ListBox(_ref) {
     overflowDisclaimer: {
       state: overflowDisclaimer,
       set: showOverflowDisclaimer
-    }
+    },
+    setScrollPosition,
+    focusListItems: getFocusState()
   });
   const {
     columnWidth,
@@ -13028,6 +13193,7 @@ const search = props => _objectSpread2(_objectSpread2({}, props), {}, {
 var SearchIcon = (props => SvgIcon$2(search(props)));
 
 const TREE_PATH = '/qListObjectDef';
+const WILDCARD = '**';
 const StyledInputAdornment = styled$1(InputAdornment)(_ref => {
   var _theme$listBox, _theme$listBox$conten;
   let {
@@ -13052,12 +13218,15 @@ function ListBoxSearch(_ref3) {
     model,
     keyboard,
     dense = false,
-    visible = true
+    visible = true,
+    wildCardSearch = true
   } = _ref3;
   const {
     translator
   } = useContext(InstanceContext);
   const [value, setValue] = useState$1('');
+  const [wildcardOn, setWildcardOn] = useState$1(false);
+  const inputRef = useRef();
   const theme = useTheme$1();
   const {
     getStoreValue
@@ -13084,6 +13253,13 @@ function ListBoxSearch(_ref3) {
       selections.removeListener && selections.removeListener('deactivated', abortSearch);
     };
   }, []);
+  useEffect$1(() => {
+    if (wildcardOn && inputRef.current) {
+      const cursorPos = value.length - 1;
+      inputRef.current.setSelectionRange(cursorPos, cursorPos); // place the cursor in the wildcard
+      setWildcardOn(false);
+    }
+  }, [wildcardOn, inputRef.current]);
   const onChange = async e => {
     setValue(e.target.value);
     if (!e.target.value.length) {
@@ -13092,6 +13268,10 @@ function ListBoxSearch(_ref3) {
     return model.searchListObjectFor(TREE_PATH, e.target.value);
   };
   const handleFocus = () => {
+    if (wildCardSearch) {
+      setValue(WILDCARD);
+      setWildcardOn(true);
+    }
     if (!selections.isModal()) {
       selections.begin(['/qListObjectDef']);
     }
@@ -13155,6 +13335,7 @@ function ListBoxSearch(_ref3) {
         paddingBottom: '5px'
       }
     }],
+    inputRef: inputRef,
     size: "small",
     fullWidth: true,
     placeholder: translator.get('Listbox.Search'),
@@ -14956,6 +15137,7 @@ function ListBoxInline(_ref3) {
   const searchHeight = dense ? 27 : 40;
   const extraheight = dense ? 39 : 49;
   const minHeight = 49 + (searchVisible ? searchHeight : 0) + extraheight;
+  const wildCardSearch = layout === null || layout === void 0 ? void 0 : layout.wildCardSearch;
   const onShowSearch = () => {
     const newValue = !showSearch;
     setShowSearch(newValue);
@@ -15052,7 +15234,8 @@ function ListBoxInline(_ref3) {
     dense: dense,
     keyboard: keyboard,
     visible: searchVisible,
-    searchContainerRef: searchContainerRef
+    searchContainerRef: searchContainerRef,
+    wildCardSearch: wildCardSearch
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: true
@@ -15397,6 +15580,9 @@ function ListBoxPopoverWrapper(_ref) {
   const [showState, setShowstate] = useState$1(!!options.show);
   const handleCloseShowState = () => {
     setShowstate(false);
+    if (options.onPopoverClose) {
+      options.onPopoverClose();
+    }
   };
   return /*#__PURE__*/React__default.createElement(ListBoxPopover, {
     show: showState,
@@ -22397,6 +22583,23 @@ function nuked() {
     let selectionsApi = null;
     let selectionsComponentReference = null;
 
+    /**
+     * @ignore
+     * @typedef { 'fieldPopoverClose' } EmbedEventTypes
+     */
+
+    /**
+     * Event listener function on instance
+     *
+     * @ignore
+     * @method
+     * @name Embed#on
+     * @param {EmbedEventTypes} eventType event type that function needs to listen
+     * @param {Function} callback a callback function to run when event emits
+     * @example
+     * api.on('someEvent', () => {...});
+     */
+
     /**
      * @class
      * @alias Embed
@@ -22631,7 +22834,10 @@ function nuked() {
             root.remove(api._popoverInstance);
             api._popoverInstance = null;
           }
-          const opts = getOptions(options);
+          const onPopoverClose = () => api.emit('fieldPopoverClose');
+          const opts = getOptions(_objectSpread2({
+            onPopoverClose
+          }, options));
           api._popoverInstance = React__default.createElement(ListBoxPopoverWrapper, {
             element: anchorElement,
             key: uid(),
@@ -22646,6 +22852,7 @@ function nuked() {
     };
     halo.public.nebbie = api;
     halo.types = types;
+    eventmixin(api);
     return api;
   }