@nebula.js/stardust 4.0.0-alpha.2 → 4.0.0-alpha.4

package/core/esm/dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v4.0.0-alpha.2
+* @nebula.js/stardust v4.0.0-alpha.4
 * Copyright (c) 2023 QlikTech International AB
 * Released under the MIT license.
 */
@@ -1493,6 +1493,26 @@ var Selection_SelectPossible = {
 		"zh-TW": "選取可能值"
 	}
 };
+var SelectionToolbar_ClickToUnlock = {
+	id: "SelectionToolbar.ClickToUnlock",
+	locale: {
+		"de-DE": "Klicken zum Freigeben",
+		"en-US": "Click to unlock",
+		"es-ES": "Haga clic para desbloquearla",
+		"fr-FR": "Cliquez pour déverrouiller",
+		"it-IT": "Fare clic per sbloccare",
+		"ja-JP": "クリックしてロック解除",
+		"ko-KR": "잠금을 해제하려면 클릭하십시오.",
+		"nl-NL": "Klik om te ontgrendelen",
+		"pl-PL": "Aby odblokować, kliknij",
+		"pt-BR": "Clique para destravar",
+		"ru-RU": "Щелкните, чтобы разблокировать",
+		"sv-SE": "Klicka för att låsa upp",
+		"tr-TR": "Kilidi kaldırmak için tıklayın",
+		"zh-CN": "单击以解锁",
+		"zh-TW": "按一下以解除鎖定"
+	}
+};
 var Visualization_Incomplete = {
 	id: "Visualization.Incomplete",
 	locale: {
@@ -1664,6 +1684,7 @@ var all = {
 	Selection_SelectAlternative: Selection_SelectAlternative,
 	Selection_SelectExcluded: Selection_SelectExcluded,
 	Selection_SelectPossible: Selection_SelectPossible,
+	SelectionToolbar_ClickToUnlock: SelectionToolbar_ClickToUnlock,
 	Visualization_Incomplete: Visualization_Incomplete,
 	Visualization_Incomplete_Dimensions: Visualization_Incomplete_Dimensions,
 	Visualization_Incomplete_Measures: Visualization_Incomplete_Measures,
@@ -8043,7 +8064,7 @@ function create$3(definition) {
   return cache[key];
 }
 
-const NEBULA_VERSION_HASH = "9a45" ;
+const NEBULA_VERSION_HASH = "0bc0" ;
 ClassNameGenerator$1.configure(componentName => {
   return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 });
@@ -8251,7 +8272,7 @@ function boot(_ref2) {
   const appRef = React__default.createRef();
   const element = document.createElement('div');
   element.style.display = 'none';
-  element.setAttribute('data-nebulajs-version', "4.0.0-alpha.2" );
+  element.setAttribute('data-nebulajs-version', "4.0.0-alpha.4" );
   element.setAttribute('data-app-id', app.id);
   document.body.appendChild(element);
   const root = client.createRoot(element);
@@ -9325,6 +9346,8 @@ const KEYS = Object.freeze({
 function getFieldKeyboardNavigation(_ref) {
   let {
     select,
+    selectAll,
+    onCtrlF,
     confirm,
     cancel,
     setScrollPosition,
@@ -9344,7 +9367,8 @@ function getFieldKeyboardNavigation(_ref) {
     const {
       keyCode,
       shiftKey = false,
-      ctrlKey = false
+      ctrlKey = false,
+      metaKey = false
     } = event.nativeEvent;
     switch (keyCode) {
       case KEYS.SHIFT:
@@ -9399,6 +9423,18 @@ function getFieldKeyboardNavigation(_ref) {
         }
         setScrollPosition === null || setScrollPosition === void 0 ? void 0 : setScrollPosition('end');
         break;
+      case KEYS.A:
+        if (ctrlKey || metaKey) {
+          selectAll();
+          break;
+        }
+        return;
+      case KEYS.F:
+        if (ctrlKey || metaKey) {
+          onCtrlF();
+          break;
+        }
+        return;
       default:
         return;
       // don't stop propagation since we want to outsource keydown to other handlers.
@@ -9782,7 +9818,7 @@ const RowColRoot = styled$1('div', {
     ["& .".concat(rowColClasses.frequencyCount)]: _objectSpread2(_objectSpread2({
       justifyContent: 'flex-end'
     }, ellipsis), {}, {
-      flex: "0 1 ".concat(frequencyWidth, "px"),
+      flex: "0 1 ".concat(frequencyWidth + (showIcon || checkboxes ? 0 : iconWidth), "px"),
       textAlign: 'right',
       paddingLeft: '2px'
     }),
@@ -12085,6 +12121,8 @@ function getListBoxComponents(_ref) {
     histogram,
     isSingleSelect,
     select,
+    selectAll,
+    onCtrlF,
     textAlign,
     selections,
     keyboard,
@@ -12142,7 +12180,9 @@ function getListBoxComponents(_ref) {
       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),
-      setScrollPosition
+      setScrollPosition,
+      selectAll,
+      onCtrlF
     },
     frequencyMax,
     histogram,
@@ -12940,7 +12980,10 @@ const escapeField = field => {
   if (!field) {
     return field;
   }
-  return "".concat(field.replace(/\]/g, ']]'));
+  if (/^[A-Za-z][A-Za-z0-9_]*$/.test(field)) {
+    return field;
+  }
+  return "[".concat(field.replace(/\]/g, ']]'), "]");
 };
 const needToFetchFrequencyMax = layout => (layout === null || layout === void 0 ? void 0 : layout.frequencyMax) === 'fetch';
 const getFrequencyMaxExpression = field => {
@@ -12956,8 +12999,9 @@ const getFrequencyMax = async (layout, app) => {
 };
 
 const useFrequencyMax = (app, layout) => {
-  const [frequencyMax, setFrequencyMax] = useState$1();
   const needFetch = needToFetchFrequencyMax(layout);
+  const [frequencyMax, setFrequencyMax] = useState$1();
+  const [awaitingFrequencyMax, setAwaitingFrequencyMax] = useState$1(needFetch);
   useEffect$1(() => {
     if (!needFetch) {
       return;
@@ -12965,10 +13009,14 @@ const useFrequencyMax = (app, layout) => {
     const fetch = async () => {
       const newValue = await getFrequencyMax(layout, app);
       setFrequencyMax(newValue);
+      setAwaitingFrequencyMax(false);
     };
     fetch();
   }, [needFetch && layout]);
-  return needFetch ? frequencyMax : layout === null || layout === void 0 ? void 0 : layout.frequencyMax;
+  return {
+    frequencyMax: needFetch ? frequencyMax : layout === null || layout === void 0 ? void 0 : layout.frequencyMax,
+    awaitingFrequencyMax
+  };
 };
 
 const _excluded$4 = ["isLoadingData"];
@@ -13001,7 +13049,9 @@ function ListBox(_ref) {
     },
     currentScrollIndex = {
       set: () => {}
-    }
+    },
+    renderedCallback,
+    onCtrlF
   } = _ref;
   const [initScrollPosIsSet, setInitScrollPosIsSet] = useState$1(false);
   const isSingleSelect = !!(layout && layout.qListObject.qDimensionInfo.qIsOneAndOnlyOne);
@@ -13021,6 +13071,10 @@ function ListBox(_ref) {
 
   // The time from scroll end until new data is being fetched, may be exposed in API later on.
   const scrollTimeout = 0;
+  const {
+    frequencyMax,
+    awaitingFrequencyMax
+  } = useFrequencyMax(app, layout);
   const _useItemsLoader = useItemsLoader({
       local,
       loaderRef,
@@ -13046,11 +13100,15 @@ function ListBox(_ref) {
   if (itemsLoader !== null && itemsLoader !== void 0 && itemsLoader.pages) {
     selectionState.update({
       setPages,
-      pages: itemsLoader === null || itemsLoader === void 0 ? void 0 : itemsLoader.pages,
+      pages: itemsLoader.pages,
       isSingleSelect,
       selectDisabled,
       layout
     });
+    if (itemsLoader.pages.length && !awaitingFrequencyMax) {
+      // All necessary data fetching done - signal rendering done!
+      renderedCallback();
+    }
   }
   const isItemLoaded = useCallback(index => {
     if (!(pages !== null && pages !== void 0 && pages.length) || !local.current.validPages) {
@@ -13209,7 +13267,10 @@ function ListBox(_ref) {
       last
     }))
   });
-  const frequencyMax = useFrequencyMax(app, layout);
+  const selectAll = () => {
+    selectionState.clearItemStates(false);
+    model.selectListObjectAll('/qListObjectDef');
+  };
   const {
     List,
     Grid
@@ -13225,6 +13286,8 @@ function ListBox(_ref) {
     showGray,
     interactionEvents,
     select,
+    selectAll,
+    onCtrlF,
     textAlign,
     isVertical,
     pages,
@@ -13690,15 +13753,12 @@ const ActionsGroup = React__default.forwardRef((_ref2, ref) => {
 const popoverStyle = {
   pointerEvents: 'none'
 };
-const popoverAnchorOrigin = {
-  vertical: 'top',
-  horizontal: 'right'
-};
 const popoverTransformOrigin = {
   vertical: 'bottom',
   horizontal: 'right'
 };
 function ActionsToolbar(_ref3) {
+  var _popover$anchorEl$cli, _popover$anchorEl;
   let {
     show = true,
     actions = [],
@@ -13737,6 +13797,10 @@ function ActionsToolbar(_ref3) {
   const dividerStyle = useMemo$1(() => ({
     margin: theme.spacing(0.5, 0)
   }));
+  const popoverAnchorOrigin = {
+    vertical: 15,
+    horizontal: ((_popover$anchorEl$cli = (_popover$anchorEl = popover.anchorEl) === null || _popover$anchorEl === void 0 ? void 0 : _popover$anchorEl.clientWidth) !== null && _popover$anchorEl$cli !== void 0 ? _popover$anchorEl$cli : 0) - 7
+  };
   const getEnabledButton = last => {
     const actionsElement = actionsRef.current || actionsRefMock;
     if (!actionsElement) return null;
@@ -13898,7 +13962,8 @@ function ListBoxSearch(_ref3) {
     autoFocus = true,
     wildCardSearch = false,
     searchEnabled,
-    direction
+    direction,
+    hide
   } = _ref3;
   const {
     translator
@@ -13984,6 +14049,16 @@ function ListBoxSearch(_ref3) {
         e.preventDefault();
         e.stopPropagation();
         break;
+      case 'f':
+      case 'F':
+        if (e.ctrlKey || e.metaKey) {
+          if (hide) {
+            hide();
+          }
+          e.preventDefault();
+          e.stopPropagation();
+        }
+        break;
     }
     return response;
   };
@@ -14441,6 +14516,7 @@ function ListBoxPopover(_ref) {
   const open = show && Boolean(alignTo.current);
   const [listCount, setListCount] = useState$1(0);
   const theme = useTheme$1();
+  const searchContainerRef = useRef();
   const [model] = useSessionModel({
     qInfo: {
       qType: 'njsListbox'
@@ -14502,6 +14578,10 @@ function ListBoxPopover(_ref) {
     translator,
     selectionState: selectionState$1
   });
+  const onCtrlF = () => {
+    const input = searchContainerRef.current.querySelector('input');
+    input === null || input === void 0 ? void 0 : input.focus();
+  };
   const hasSelections$1 = hasSelections(layout);
   return /*#__PURE__*/React__default.createElement(Popover, {
     open: open,
@@ -14568,7 +14648,10 @@ function ListBoxPopover(_ref) {
     xs: true
   }, /*#__PURE__*/React__default.createElement("div", {
     ref: moreAlignTo
-  }), /*#__PURE__*/React__default.createElement(ListBoxSearch, {
+  }), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    ref: searchContainerRef
+  }, /*#__PURE__*/React__default.createElement(ListBoxSearch, {
     visible: true,
     model: model,
     listCount: listCount,
@@ -14578,14 +14661,15 @@ function ListBoxPopover(_ref) {
       enabled: false
     },
     autoFocus: autoFocus !== null && autoFocus !== void 0 ? autoFocus : true
-  }), /*#__PURE__*/React__default.createElement(ListBox, {
+  })), /*#__PURE__*/React__default.createElement(ListBox, {
     model: model,
     app: app,
     layout: layout,
     selections: selections,
     selectionState: selectionState$1,
     direction: "ltr",
-    onSetListCount: c => setListCount(c)
+    onSetListCount: c => setListCount(c),
+    onCtrlF: onCtrlF
   }))));
 }
 
@@ -15931,19 +16015,20 @@ const classes$4 = {
   listboxWrapper: "".concat(PREFIX$4, "-listboxWrapper")
 };
 const StyledGrid$3 = styled$1(Grid, {
-  shouldForwardProp: p => !['containerPadding'].includes(p)
+  shouldForwardProp: p => !['containerPadding', 'hasIcon'].includes(p)
 })(_ref => {
   var _theme$listBox$backgr, _theme$listBox;
   let {
     theme,
-    containerPadding
+    containerPadding,
+    hasIcon
   } = _ref;
   return {
     backgroundColor: (_theme$listBox$backgr = (_theme$listBox = theme.listBox) === null || _theme$listBox === void 0 ? void 0 : _theme$listBox.backgroundColor) !== null && _theme$listBox$backgr !== void 0 ? _theme$listBox$backgr : theme.palette.background.default,
     ["& .".concat(classes$4.listBoxHeader)]: {
       alignSelf: 'center',
       display: 'flex',
-      width: "calc(100% - ".concat(BUTTON_ICON_WIDTH, "px)")
+      width: "calc(100% - ".concat(hasIcon ? BUTTON_ICON_WIDTH : 0, "px)")
     },
     ["& .".concat(classes$4.screenReaderOnly)]: {
       position: 'absolute',
@@ -15954,7 +16039,7 @@ const StyledGrid$3 = styled$1(Grid, {
     ["& .".concat(classes$4.listboxWrapper)]: {
       padding: containerPadding
     },
-    '&:focus': {
+    '&:focus:not(:hover)': {
       boxShadow: "inset 0 0 0 2px ".concat(theme.palette.custom.focusBorder, " !important")
     },
     '&:focus-visible': {
@@ -15996,7 +16081,8 @@ function ListBoxInline(_ref3) {
     postProcessPages = undefined,
     calculatePagesHeight,
     showGray = true,
-    scrollState = undefined
+    scrollState = undefined,
+    renderedCallback
   } = options;
   let {
     toolbar = true
@@ -16073,9 +16159,6 @@ function ListBoxInline(_ref3) {
   useEffect$1(() => {
     const show = () => {
       setShowToolbar(true);
-      if (search === 'toggle' && toolbar === false) {
-        setShowSearch(true);
-      }
     };
     const hide = () => {
       setShowToolbar(false);
@@ -16136,6 +16219,14 @@ function ListBoxInline(_ref3) {
     const newValue = !showSearch;
     setShowSearch(newValue);
   };
+  const onCtrlF = () => {
+    if (search === 'toggle') {
+      onShowSearch();
+    } else {
+      const input = searchContainer.current.querySelector('input');
+      input === null || input === void 0 ? void 0 : input.focus();
+    }
+  };
   const getActionToolbarProps = isPopover => getListboxActionProps({
     isPopover,
     showToolbar,
@@ -16175,7 +16266,8 @@ function ListBoxInline(_ref3) {
     onKeyDown: handleKeyDown,
     onMouseEnter: handleOnMouseEnter,
     onMouseLeave: handleOnMouseLeave,
-    ref: containerRef
+    ref: containerRef,
+    hasIcon: showIcons
   }, toolbar && /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     container: true,
@@ -16278,10 +16370,10 @@ function ListBoxInline(_ref3) {
     visible: searchVisible,
     search: search,
     autoFocus: shouldAutoFocus,
-    searchContainerRef: searchContainerRef,
     wildCardSearch: wildCardSearch,
     searchEnabled: searchEnabled,
-    direction: direction
+    direction: direction,
+    hide: showSearchIcon && onShowSearch
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: true,
@@ -16325,7 +16417,9 @@ function ListBoxInline(_ref3) {
       currentScrollIndex: {
         state: currentScrollIndex,
         set: setCurrentScrollIndex
-      }
+      },
+      renderedCallback: renderedCallback,
+      onCtrlF: onCtrlF
     });
   })))));
 }
@@ -16605,7 +16699,8 @@ function ListBoxWrapper(_ref) {
     qId,
     stateName,
     element,
-    options
+    options,
+    renderedCallback
   } = _ref;
   const {
     isExistingObject,
@@ -16636,7 +16731,8 @@ function ListBoxWrapper(_ref) {
   const opts = useMemo$1(() => _objectSpread2(_objectSpread2({}, options), {}, {
     selections,
     model,
-    app
+    app,
+    renderedCallback
   }), [options, selections, model, app]);
   if (!selections || !model) {
     return null;
@@ -16652,7 +16748,8 @@ function ListBoxPortal(_ref2) {
     fieldIdentifier,
     qId,
     stateName = '$',
-    options = {}
+    options = {},
+    renderedCallback
   } = _ref2;
   return ReactDOM.createPortal( /*#__PURE__*/React__default.createElement(ListBoxWrapper, {
     app: app,
@@ -16660,7 +16757,8 @@ function ListBoxPortal(_ref2) {
     fieldIdentifier: fieldIdentifier,
     qId: qId,
     stateName: stateName,
-    options: options
+    options: options,
+    renderedCallback: renderedCallback
   }), element, uid());
 }
 
@@ -24185,13 +24283,14 @@ function nuked() {
            * @param {boolean=} [options.dense=false] Reduces padding and text size (not applicable for existing objects)
            * @param {string=} [options.stateName="$"] Sets the state to make selections in (not applicable for existing objects)
            * @param {object=} [options.properties={}] Properties object to extend default properties with
+           * @returns {Promise<void>} A promise that resolves when the data is fetched.
            *
            * @since 1.1.0
            * @instance
            * @example
            * fieldInstance.mount(element);
            */
-          mount(element) {
+          async mount(element) {
             let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
             if (!element) {
               throw new Error("Element for ".concat(fieldName || qId, " not provided"));
@@ -24201,18 +24300,21 @@ function nuked() {
             }
             const onSelectionActivated = () => fieldSels.emit('selectionActivated');
             const onSelectionDeactivated = () => fieldSels.emit('selectionDeactivated');
-            this._instance = ListBoxPortal({
-              element,
-              app,
-              fieldIdentifier,
-              qId,
-              options: getOptions$1(_objectSpread2({
-                onSelectionActivated,
-                onSelectionDeactivated
-              }, options)),
-              stateName: options.stateName || '$'
+            return new Promise(resolve => {
+              this._instance = ListBoxPortal({
+                element,
+                app,
+                fieldIdentifier,
+                qId,
+                options: getOptions$1(_objectSpread2({
+                  onSelectionActivated,
+                  onSelectionDeactivated
+                }, options)),
+                stateName: options.stateName || '$',
+                renderedCallback: resolve
+              });
+              root.add(this._instance);
             });
-            root.add(this._instance);
           },
           /**
            * Unmounts the field listbox from the DOM.