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

package/dist/stardust.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.
 */
@@ -1560,6 +1560,26 @@
 			"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: {
@@ -1731,6 +1751,7 @@
 		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,
@@ -15399,7 +15420,7 @@
 	  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', ''));
 	});
@@ -15607,7 +15628,7 @@
 	  const appRef = React.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);
@@ -21956,6 +21977,8 @@
 	function getFieldKeyboardNavigation(_ref) {
 	  let {
 	    select,
+	    selectAll,
+	    onCtrlF,
 	    confirm,
 	    cancel,
 	    setScrollPosition,
@@ -21975,7 +21998,8 @@
 	    const {
 	      keyCode,
 	      shiftKey = false,
-	      ctrlKey = false
+	      ctrlKey = false,
+	      metaKey = false
 	    } = event.nativeEvent;
 	    switch (keyCode) {
 	      case KEYS.SHIFT:
@@ -22030,6 +22054,18 @@
 	        }
 	        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.
@@ -22413,7 +22449,7 @@
 	    ["& .".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'
 	    }),
@@ -24716,6 +24752,8 @@
 	    histogram,
 	    isSingleSelect,
 	    select,
+	    selectAll,
+	    onCtrlF,
 	    textAlign,
 	    selections,
 	    keyboard,
@@ -24773,7 +24811,9 @@
 	      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,
@@ -25425,7 +25465,10 @@
 	  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 => {
@@ -25441,8 +25484,9 @@
 	};
 
 	const useFrequencyMax = (app, layout) => {
-	  const [frequencyMax, setFrequencyMax] = reactExports.useState();
 	  const needFetch = needToFetchFrequencyMax(layout);
+	  const [frequencyMax, setFrequencyMax] = reactExports.useState();
+	  const [awaitingFrequencyMax, setAwaitingFrequencyMax] = reactExports.useState(needFetch);
 	  reactExports.useEffect(() => {
 	    if (!needFetch) {
 	      return;
@@ -25450,10 +25494,14 @@
 	    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"];
@@ -25486,7 +25534,9 @@
 	    },
 	    currentScrollIndex = {
 	      set: () => {}
-	    }
+	    },
+	    renderedCallback,
+	    onCtrlF
 	  } = _ref;
 	  const [initScrollPosIsSet, setInitScrollPosIsSet] = reactExports.useState(false);
 	  const isSingleSelect = !!(layout && layout.qListObject.qDimensionInfo.qIsOneAndOnlyOne);
@@ -25506,6 +25556,10 @@
 
 	  // 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,
@@ -25531,11 +25585,15 @@
 	  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 = reactExports.useCallback(index => {
 	    if (!(pages !== null && pages !== void 0 && pages.length) || !local.current.validPages) {
@@ -25694,7 +25752,10 @@
 	      last
 	    }))
 	  });
-	  const frequencyMax = useFrequencyMax(app, layout);
+	  const selectAll = () => {
+	    selectionState.clearItemStates(false);
+	    model.selectListObjectAll('/qListObjectDef');
+	  };
 	  const {
 	    List,
 	    Grid
@@ -25710,6 +25771,8 @@
 	    showGray,
 	    interactionEvents,
 	    select,
+	    selectAll,
+	    onCtrlF,
 	    textAlign,
 	    isVertical,
 	    pages,
@@ -26175,15 +26238,12 @@
 	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 = [],
@@ -26222,6 +26282,10 @@
 	  const dividerStyle = reactExports.useMemo(() => ({
 	    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;
@@ -26383,7 +26447,8 @@
 	    autoFocus = true,
 	    wildCardSearch = false,
 	    searchEnabled,
-	    direction
+	    direction,
+	    hide
 	  } = _ref3;
 	  const {
 	    translator
@@ -26469,6 +26534,16 @@
 	        e.preventDefault();
 	        e.stopPropagation();
 	        break;
+	      case 'f':
+	      case 'F':
+	        if (e.ctrlKey || e.metaKey) {
+	          if (hide) {
+	            hide();
+	          }
+	          e.preventDefault();
+	          e.stopPropagation();
+	        }
+	        break;
 	    }
 	    return response;
 	  };
@@ -26926,6 +27001,7 @@
 	  const open = show && Boolean(alignTo.current);
 	  const [listCount, setListCount] = reactExports.useState(0);
 	  const theme = useTheme$1();
+	  const searchContainerRef = reactExports.useRef();
 	  const [model] = useSessionModel({
 	    qInfo: {
 	      qType: 'njsListbox'
@@ -26987,6 +27063,10 @@
 	    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.createElement(Popover$1, {
 	    open: open,
@@ -27053,7 +27133,10 @@
 	    xs: true
 	  }, /*#__PURE__*/React.createElement("div", {
 	    ref: moreAlignTo
-	  }), /*#__PURE__*/React.createElement(ListBoxSearch, {
+	  }), /*#__PURE__*/React.createElement(Grid$1, {
+	    item: true,
+	    ref: searchContainerRef
+	  }, /*#__PURE__*/React.createElement(ListBoxSearch, {
 	    visible: true,
 	    model: model,
 	    listCount: listCount,
@@ -27063,14 +27146,15 @@
 	      enabled: false
 	    },
 	    autoFocus: autoFocus !== null && autoFocus !== void 0 ? autoFocus : true
-	  }), /*#__PURE__*/React.createElement(ListBox, {
+	  })), /*#__PURE__*/React.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
 	  }))));
 	}
 
@@ -28416,19 +28500,20 @@
 	  listboxWrapper: "".concat(PREFIX$4, "-listboxWrapper")
 	};
 	const StyledGrid$3 = styled$1(Grid$1, {
-	  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',
@@ -28439,7 +28524,7 @@
 	    ["& .".concat(classes$4.listboxWrapper)]: {
 	      padding: containerPadding
 	    },
-	    '&:focus': {
+	    '&:focus:not(:hover)': {
 	      boxShadow: "inset 0 0 0 2px ".concat(theme.palette.custom.focusBorder, " !important")
 	    },
 	    '&:focus-visible': {
@@ -28481,7 +28566,8 @@
 	    postProcessPages = undefined,
 	    calculatePagesHeight,
 	    showGray = true,
-	    scrollState = undefined
+	    scrollState = undefined,
+	    renderedCallback
 	  } = options;
 	  let {
 	    toolbar = true
@@ -28558,9 +28644,6 @@
 	  reactExports.useEffect(() => {
 	    const show = () => {
 	      setShowToolbar(true);
-	      if (search === 'toggle' && toolbar === false) {
-	        setShowSearch(true);
-	      }
 	    };
 	    const hide = () => {
 	      setShowToolbar(false);
@@ -28621,6 +28704,14 @@
 	    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,
@@ -28660,7 +28751,8 @@
 	    onKeyDown: handleKeyDown,
 	    onMouseEnter: handleOnMouseEnter,
 	    onMouseLeave: handleOnMouseLeave,
-	    ref: containerRef
+	    ref: containerRef,
+	    hasIcon: showIcons
 	  }, toolbar && /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    container: true,
@@ -28763,10 +28855,10 @@
 	    visible: searchVisible,
 	    search: search,
 	    autoFocus: shouldAutoFocus,
-	    searchContainerRef: searchContainerRef,
 	    wildCardSearch: wildCardSearch,
 	    searchEnabled: searchEnabled,
-	    direction: direction
+	    direction: direction,
+	    hide: showSearchIcon && onShowSearch
 	  })), /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    xs: true,
@@ -28810,7 +28902,9 @@
 	      currentScrollIndex: {
 	        state: currentScrollIndex,
 	        set: setCurrentScrollIndex
-	      }
+	      },
+	      renderedCallback: renderedCallback,
+	      onCtrlF: onCtrlF
 	    });
 	  })))));
 	}
@@ -29090,7 +29184,8 @@
 	    qId,
 	    stateName,
 	    element,
-	    options
+	    options,
+	    renderedCallback
 	  } = _ref;
 	  const {
 	    isExistingObject,
@@ -29121,7 +29216,8 @@
 	  const opts = reactExports.useMemo(() => _objectSpread2(_objectSpread2({}, options), {}, {
 	    selections,
 	    model,
-	    app
+	    app,
+	    renderedCallback
 	  }), [options, selections, model, app]);
 	  if (!selections || !model) {
 	    return null;
@@ -29137,7 +29233,8 @@
 	    fieldIdentifier,
 	    qId,
 	    stateName = '$',
-	    options = {}
+	    options = {},
+	    renderedCallback
 	  } = _ref2;
 	  return ReactDOM.createPortal( /*#__PURE__*/React.createElement(ListBoxWrapper, {
 	    app: app,
@@ -29145,7 +29242,8 @@
 	    fieldIdentifier: fieldIdentifier,
 	    qId: qId,
 	    stateName: stateName,
-	    options: options
+	    options: options,
+	    renderedCallback: renderedCallback
 	  }), element, uid());
 	}
 
@@ -36670,13 +36768,14 @@
 	           * @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"));
@@ -36686,18 +36785,21 @@
 	            }
 	            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.