@nebula.js/stardust 4.5.0-alpha.0 → 4.5.0

package/core/esm/dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v4.5.0-alpha.0
+* @nebula.js/stardust v4.5.0
 * Copyright (c) 2023 QlikTech International AB
 * Released under the MIT license.
 */
@@ -708,26 +708,26 @@ var runtime = {exports: {}};
   }
 })(runtime);
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
+function ownKeys(e, r) {
+  var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
-  }
-  return keys;
-}
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-      _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
     });
   }
-  return target;
+  return e;
 }
 function _defineProperty(obj, key, value) {
   key = _toPropertyKey(key);
@@ -3950,7 +3950,11 @@ function deprecatedPropType(validator, reason) {
 }
 
 function isMuiElement(element, muiNames) {
-  return /*#__PURE__*/React.isValidElement(element) && muiNames.indexOf(element.type.muiName) !== -1;
+  var _muiName, _element$type;
+  return /*#__PURE__*/React.isValidElement(element) && muiNames.indexOf( // For server components `muiName` is avaialble in element.type._payload.value.muiName
+  // relevant info - https://github.com/facebook/react/blob/2807d781a08db8e9873687fccc25c0f12b4fb3d4/packages/react/src/ReactLazy.js#L45
+  // eslint-disable-next-line no-underscore-dangle
+  (_muiName = element.type.muiName) != null ? _muiName : (_element$type = element.type) == null || (_element$type = _element$type._payload) == null || (_element$type = _element$type.value) == null ? void 0 : _element$type.muiName) !== -1;
 }
 
 function ownerDocument(node) {
@@ -3989,6 +3993,13 @@ function setRef(ref, value) {
   }
 }
 
+/**
+ * A version of `React.useLayoutEffect` that does not show a warning when server-side rendering.
+ * This is useful for effects that are only needed for client-side rendering but not for SSR.
+ *
+ * Before you use this hook, make sure to read https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
+ * and confirm it doesn't apply to your use-case.
+ */
 const useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 var useEnhancedEffect$1 = useEnhancedEffect;
 
@@ -4053,7 +4064,8 @@ function useControlled({
 }
 
 /**
- * https://github.com/facebook/react/issues/14099#issuecomment-440013892
+ * Inspired by https://github.com/facebook/react/issues/14099#issuecomment-440013892
+ * See RFC in https://github.com/reactjs/rfcs/pull/220
  */
 
 function useEventCallback(fn) {
@@ -5658,7 +5670,7 @@ function StyledEngineProvider(props) {
 }
 
 /**
- * @mui/styled-engine v5.14.6
+ * @mui/styled-engine v5.14.11
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -6283,10 +6295,20 @@ const width = style$1({
 const maxWidth = props => {
   if (props.maxWidth !== undefined && props.maxWidth !== null) {
     const styleFromPropValue = propValue => {
-      var _props$theme;
+      var _props$theme, _props$theme2;
       const breakpoint = ((_props$theme = props.theme) == null || (_props$theme = _props$theme.breakpoints) == null || (_props$theme = _props$theme.values) == null ? void 0 : _props$theme[propValue]) || values[propValue];
+      if (!breakpoint) {
+        return {
+          maxWidth: sizingTransform(propValue)
+        };
+      }
+      if (((_props$theme2 = props.theme) == null || (_props$theme2 = _props$theme2.breakpoints) == null ? void 0 : _props$theme2.unit) !== 'px') {
+        return {
+          maxWidth: `${breakpoint}${props.theme.breakpoints.unit}`
+        };
+      }
       return {
-        maxWidth: breakpoint || sizingTransform(propValue)
+        maxWidth: breakpoint
       };
     };
     return handleBreakpoints(props, props.maxWidth, styleFromPropValue);
@@ -8451,7 +8473,7 @@ function create$3(definition) {
   return cache[key];
 }
 
-const NEBULA_VERSION_HASH = "d1ff" ;
+const NEBULA_VERSION_HASH = "7c03" ;
 ClassNameGenerator$1.configure(componentName => {
   return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 });
@@ -8712,7 +8734,7 @@ function boot(_ref2) {
   const appRef = React__default.createRef();
   const element = document.createElement('div');
   element.style.display = 'none';
-  element.setAttribute('data-nebulajs-version', "4.5.0-alpha.0" );
+  element.setAttribute('data-nebulajs-version', "4.5.0" );
   element.setAttribute('data-app-id', app.id);
   document.body.appendChild(element);
   if (context) {
@@ -9916,6 +9938,9 @@ const frequencyTextNone = '-';
 const barPadPx = 4;
 const barBorderWidthPx = 1;
 const barWithCheckboxLeftPadPx = 29;
+const GRID_ROW_HEIGHT = 32;
+const LIST_ROW_HEIGHT = 29;
+const DENSE_ROW_HEIGHT = 20; // same for both list and grid in dense mode
 
 const joinClassNames = namesArray => namesArray.filter(c => !!c).join(' ').trim();
 const getBarWidth = _ref => {
@@ -10757,13 +10782,13 @@ const KEYS = Object.freeze({
 const getElementIndex = currentTarget => +currentTarget.getAttribute('data-n');
 const focusSearch = container => {
   const searchField = container === null || container === void 0 ? void 0 : container.querySelector('.search input');
-  searchField === null || searchField === void 0 ? void 0 : searchField.focus();
+  searchField === null || searchField === void 0 || searchField.focus();
   return searchField;
 };
 const focusRow = container => {
   const row = container === null || container === void 0 ? void 0 : container.querySelector('.value.last-focused, .value.selector, .value');
-  row === null || row === void 0 ? void 0 : row.setAttribute('tabIndex', 0);
-  row === null || row === void 0 ? void 0 : row.focus();
+  row === null || row === void 0 || row.setAttribute('tabIndex', 0);
+  row === null || row === void 0 || row.focus();
   return row;
 };
 
@@ -10945,18 +10970,18 @@ function getRowsKeyboardNavigation(_ref) {
       case KEYS.HOME:
         focusListItems.setFirst(true);
         if (ctrlKey) {
-          setScrollPosition === null || setScrollPosition === void 0 ? void 0 : setScrollPosition('overflowStart');
+          setScrollPosition === null || setScrollPosition === void 0 || setScrollPosition('overflowStart');
           break;
         }
-        setScrollPosition === null || setScrollPosition === void 0 ? void 0 : setScrollPosition('start');
+        setScrollPosition === null || setScrollPosition === void 0 || setScrollPosition('start');
         break;
       case KEYS.END:
         focusListItems.setLast(true);
         if (ctrlKey) {
-          setScrollPosition === null || setScrollPosition === void 0 ? void 0 : setScrollPosition('overflowEnd');
+          setScrollPosition === null || setScrollPosition === void 0 || setScrollPosition('overflowEnd');
           break;
         }
-        setScrollPosition === null || setScrollPosition === void 0 ? void 0 : setScrollPosition('end');
+        setScrollPosition === null || setScrollPosition === void 0 || setScrollPosition('end');
         break;
       case KEYS.A:
         if (ctrlKey || metaKey) {
@@ -13137,9 +13162,8 @@ function useListSizes(_ref) {
   let rowCount;
   const isGridMode = dataLayout === 'grid';
   const itemPadding = 4;
-  const denseItemHeight = 20;
-  const normalItemHeight = isGridMode ? 32 : 29;
-  let itemHeight = dense ? denseItemHeight : normalItemHeight;
+  const normalItemHeight = isGridMode ? GRID_ROW_HEIGHT : LIST_ROW_HEIGHT;
+  let itemHeight = dense ? DENSE_ROW_HEIGHT : normalItemHeight;
   if (isGridMode) {
     // Emulate a margin between items using padding, since the list library
     // needs an explicit row height and cannot handle margins.
@@ -13867,7 +13891,7 @@ function ListBox(_ref) {
   const cardinal = layout === null || layout === void 0 ? void 0 : layout.qListObject.qDimensionInfo.qCardinal;
   if (itemsLoader !== null && itemsLoader !== void 0 && itemsLoader.pages.length && !awaitingFrequencyMax || cardinal === 0) {
     // All necessary data fetching done - signal rendering done!
-    renderedCallback === null || renderedCallback === void 0 ? void 0 : renderedCallback();
+    renderedCallback === null || renderedCallback === void 0 || renderedCallback();
   }
   const isItemLoaded = useCallback(index => {
     if (!(pages !== null && pages !== void 0 && pages.length) || !local.current.validPages) {
@@ -14620,7 +14644,7 @@ function ActionsToolbar(_ref3) {
     actionsRefMock = null,
     // for testing
     direction = 'ltr',
-    autoConfirm
+    autoConfirm = false
   } = _ref3;
   const defaultSelectionActions = useDefaultSelectionActions(selections);
   const {
@@ -14667,14 +14691,7 @@ function ActionsToolbar(_ref3) {
     focusHandler.on('focus_toolbar_last', focusLast);
   }, []);
   if (autoConfirm) {
-    const canConfirm = selections.show;
-    if (canConfirm) {
-      const confirm = defaultSelectionActions.find(o => o.key === 'confirm') || {
-        action: () => {}
-      };
-      confirm.action();
-    }
-    return null;
+    return undefined;
   }
   let moreEnabled = more$1.enabled;
   let moreActions = more$1.actions;
@@ -14751,13 +14768,15 @@ function ActionsToolbar(_ref3) {
     transformOrigin: popoverTransformOrigin,
     hideBackdrop: true,
     style: popoverStyle,
-    PaperProps: {
-      id: 'njs-action-toolbar-popover',
-      'data-testid': 'njs-action-toolbar-popover',
-      className: ActionToolbarElement.className,
-      style: {
-        pointerEvents: 'auto',
-        padding: theme.spacing(0.5, 0.25)
+    slotProps: {
+      paper: {
+        id: 'njs-action-toolbar-popover',
+        'data-testid': 'njs-action-toolbar-popover',
+        className: ActionToolbarElement.className,
+        style: {
+          pointerEvents: 'auto',
+          padding: theme.spacing(0.5, 0.25)
+        }
       }
     }
   }, Actions) : show && Actions;
@@ -14888,7 +14907,7 @@ function ListBoxSearch(_ref3) {
   function focusRow(container) {
     const row = (container === null || container === void 0 ? void 0 : container.querySelector('.last-focused')) || (container === null || container === void 0 ? void 0 : container.querySelector('[role="row"]:first-child'));
     row.setAttribute('tabIndex', 0);
-    row === null || row === void 0 ? void 0 : row.focus();
+    row === null || row === void 0 || row.focus();
   }
   const onKeyDown = async e => {
     const {
@@ -14914,7 +14933,7 @@ function ListBoxSearch(_ref3) {
             focusRow(container);
 
             // Clean up.
-            container === null || container === void 0 ? void 0 : container.querySelectorAll('.last-focused').forEach(elm => {
+            container === null || container === void 0 || container.querySelectorAll('.last-focused').forEach(elm => {
               elm.classList.remove('last-focused');
             });
           }
@@ -15223,12 +15242,12 @@ const getClickOutFuncs = _ref3 => {
     activateClickOut() {
       var _options$onSelectionA;
       document.addEventListener('mousedown', handler);
-      options === null || options === void 0 || (_options$onSelectionA = options.onSelectionActivated) === null || _options$onSelectionA === void 0 ? void 0 : _options$onSelectionA.call(options);
+      options === null || options === void 0 || (_options$onSelectionA = options.onSelectionActivated) === null || _options$onSelectionA === void 0 || _options$onSelectionA.call(options);
     },
     deactivateClickOut() {
       var _options$onSelectionD;
       document.removeEventListener('mousedown', handler);
-      options === null || options === void 0 || (_options$onSelectionD = options.onSelectionDeactivated) === null || _options$onSelectionD === void 0 ? void 0 : _options$onSelectionD.call(options);
+      options === null || options === void 0 || (_options$onSelectionD = options.onSelectionDeactivated) === null || _options$onSelectionD === void 0 || _options$onSelectionD.call(options);
     }
   };
 };
@@ -15353,7 +15372,7 @@ function selectionState() {
       if (selected && !additive) {
         state.itemStates[elementNumber] = false;
       } else if (!selected) {
-        selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.push(elementNumber);
+        selectedValues === null || selectedValues === void 0 || selectedValues.push(elementNumber);
         state.itemStates[elementNumber] = true;
       }
     },
@@ -15493,7 +15512,7 @@ function ListBoxPopover(_ref) {
   });
   const onCtrlF = () => {
     const input = searchContainerRef.current.querySelector('input');
-    input === null || input === void 0 ? void 0 : input.focus();
+    input === null || input === void 0 || input.focus();
   };
   const hasSelections$1 = hasSelections(layout);
   return /*#__PURE__*/React__default.createElement(Popover, {
@@ -16746,12 +16765,12 @@ const drillDown = props => _objectSpread2(_objectSpread2({}, props), {}, {
 var DrillDownIcon = (props => SvgIcon$2(drillDown(props)));
 
 function removeInnnerTabStops(container) {
-  container === null || container === void 0 ? void 0 : container.querySelectorAll('[tabIndex="0"]').forEach(elm => {
+  container === null || container === void 0 || container.querySelectorAll('[tabIndex="0"]').forEach(elm => {
     elm.setAttribute('tabIndex', -1);
   });
 }
 function removeLastFocused(container) {
-  container === null || container === void 0 ? void 0 : container.querySelectorAll('.last-focused').forEach(elm => {
+  container === null || container === void 0 || container.querySelectorAll('.last-focused').forEach(elm => {
     elm.classList.remove('last-focused');
   });
 }
@@ -16799,13 +16818,13 @@ function useTempKeyboard(_ref) {
       const firstRowElement = c === null || c === void 0 ? void 0 : c.querySelector('.value.selector, .value');
       const confirmButton = c === null || c === void 0 ? void 0 : c.querySelector('.actions-toolbar-default-actions .actions-toolbar-confirm');
       const elementToFocus = searchField || lastSelectedRow || firstRowElement || confirmButton;
-      elementToFocus === null || elementToFocus === void 0 ? void 0 : elementToFocus.setAttribute('tabIndex', 0);
-      elementToFocus === null || elementToFocus === void 0 ? void 0 : elementToFocus.focus();
+      elementToFocus === null || elementToFocus === void 0 || elementToFocus.setAttribute('tabIndex', 0);
+      elementToFocus === null || elementToFocus === void 0 || elementToFocus.focus();
     },
     focusSelection() {
       const confirmButton = document.querySelector('.actions-toolbar-default-actions .actions-toolbar-confirm');
-      confirmButton === null || confirmButton === void 0 ? void 0 : confirmButton.setAttribute('tabIndex', 0);
-      confirmButton === null || confirmButton === void 0 ? void 0 : confirmButton.focus();
+      confirmButton === null || confirmButton === void 0 || confirmButton.setAttribute('tabIndex', 0);
+      confirmButton === null || confirmButton === void 0 || confirmButton.focus();
     }
   };
   return keyboard;
@@ -16847,7 +16866,7 @@ function getListboxContainerKeyboardNavigation(_ref) {
       keyboard.blur();
       const c = currentTarget.closest('.listbox-container');
       c.setAttribute('tabIndex', -1);
-      c === null || c === void 0 ? void 0 : c.focus();
+      c === null || c === void 0 || c.focus();
     }
   };
   const handleKeyDown = event => {
@@ -17010,11 +17029,9 @@ function getListboxActionProps(_ref) {
     isLocked,
     listboxSelectionToolbarItems,
     selections,
-    keyboard,
-    autoConfirm
+    keyboard
   } = _ref;
   return {
-    autoConfirm,
     show: showToolbar && !isDetached,
     popover: {
       show: showToolbar && isDetached,
@@ -17035,10 +17052,10 @@ function getListboxActionProps(_ref) {
       show: showToolbar,
       api: selections,
       onConfirm: () => {
-        keyboard === null || keyboard === void 0 ? void 0 : keyboard.focus();
+        keyboard === null || keyboard === void 0 || keyboard.focus();
       },
       onCancel: () => {
-        keyboard === null || keyboard === void 0 ? void 0 : keyboard.focus();
+        keyboard === null || keyboard === void 0 || keyboard.focus();
       }
     }
   };
@@ -17320,10 +17337,6 @@ function ListBoxInline(_ref4) {
   const showSearchToggle = search === 'toggle' && showSearch;
   const searchVisible = (search === true || showSearchToggle) && !selectDisabled() && searchEnabled !== false;
   const dense = (_layoutOptions$dense = layoutOptions.dense) !== null && _layoutOptions$dense !== void 0 ? _layoutOptions$dense : false;
-  const searchHeight = dense ? 27 : 40;
-  const extraheight = dense ? 39 : 49;
-  const searchAddHeight = searchVisible ? searchHeight : 0;
-  const minHeight = showToolbarWithTitle ? 49 + searchAddHeight + extraheight : 0;
   const headerHeight = 32;
   const onShowSearch = () => {
     const newValue = !showSearch;
@@ -17334,17 +17347,18 @@ function ListBoxInline(_ref4) {
       onShowSearch();
     } else {
       const input = searchContainer.current.querySelector('input');
-      input === null || input === void 0 ? void 0 : input.focus();
+      input === null || input === void 0 || input.focus();
     }
   };
-  const getActionToolbarProps = isDetached => getListboxActionProps({
+  const getActionToolbarProps = isDetached => _objectSpread2(_objectSpread2({}, getListboxActionProps({
     isDetached: isPopover ? false : isDetached,
     showToolbar,
     containerRef,
     isLocked,
     listboxSelectionToolbarItems,
     selections,
-    keyboard,
+    keyboard
+  })), {}, {
     autoConfirm
   });
   const shouldAutoFocus = searchVisible && search === 'toggle';
@@ -17392,7 +17406,7 @@ function ListBoxInline(_ref4) {
     }
   }));
   if (isInvalid) {
-    renderedCallback === null || renderedCallback === void 0 ? void 0 : renderedCallback();
+    renderedCallback === null || renderedCallback === void 0 || renderedCallback();
   }
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, showDetachedToolbarOnly && /*#__PURE__*/React__default.createElement(ActionsToolbar, _extends$5({
     direction: direction
@@ -17405,7 +17419,6 @@ function ListBoxInline(_ref4) {
     containerPadding: containerPadding,
     style: {
       height: '100%',
-      minHeight: "".concat(minHeight, "px"),
       flexFlow: 'column nowrap'
     },
     onKeyDown: handleKeyDown,
@@ -17460,7 +17473,7 @@ function ListBoxInline(_ref4) {
     direction: "column",
     style: {
       height: '100%',
-      minHeight: '50px'
+      minHeight: DENSE_ROW_HEIGHT + SCROLL_BAR_WIDTH
     },
     role: "region",
     "aria-label": translator.get('Listbox.ResultFilterLabel')
@@ -17675,7 +17688,7 @@ const listdef = {
    */
   wildCardSearch: false,
   /**
-   * Automatically confirm selections without showing the selections toolbar.
+   * Automatically confirm selections when clicking outside a listbox, without showing the selections toolbar.
    * @type {boolean=}
    * @default
    */