@nebula.js/stardust 4.2.0 → 4.2.2

package/dist/stardust.dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v4.2.0
+* @nebula.js/stardust v4.2.2
 * Copyright (c) 2023 QlikTech International AB
 * Released under the MIT license.
 */
@@ -1955,6 +1955,24 @@
 			"zh-TW": "不符計算條件"
 		}
 	};
+	var ScreenReader_OneSearchResult = {
+		id: "ScreenReader.OneSearchResult",
+		locale: {
+			"en-US": "There is one available result"
+		}
+	};
+	var ScreenReader_ManySearchResults = {
+		id: "ScreenReader.ManySearchResults",
+		locale: {
+			"en-US": "There are {0} available results"
+		}
+	};
+	var ScreenReader_SearchFieldLabel = {
+		id: "ScreenReader.SearchFieldLabel",
+		locale: {
+			"en-US": "Search Field"
+		}
+	};
 	var all = {
 		Cancel: Cancel$1,
 		CurrentSelections_All: CurrentSelections_All,
@@ -2005,7 +2023,10 @@
 		Visualization_Invalid_Dimension: Visualization_Invalid_Dimension,
 		Visualization_Invalid_Measure: Visualization_Invalid_Measure,
 		Visualization_LayoutError: Visualization_LayoutError,
-		Visualization_UnfulfilledCalculationCondition: Visualization_UnfulfilledCalculationCondition
+		Visualization_UnfulfilledCalculationCondition: Visualization_UnfulfilledCalculationCondition,
+		ScreenReader_OneSearchResult: ScreenReader_OneSearchResult,
+		ScreenReader_ManySearchResults: ScreenReader_ManySearchResults,
+		ScreenReader_SearchFieldLabel: ScreenReader_SearchFieldLabel
 	};
 
 	function appLocaleFn(language) {
@@ -10439,7 +10460,6 @@
 	  }
 
 	  if (!contains(state.elements.popper, arrowElement)) {
-
 	    return;
 	  }
 
@@ -10581,7 +10601,6 @@
 	      adaptive = _options$adaptive === void 0 ? true : _options$adaptive,
 	      _options$roundOffsets = options.roundOffsets,
 	      roundOffsets = _options$roundOffsets === void 0 ? true : _options$roundOffsets;
-
 	  var commonStyles = {
 	    placement: getBasePlacement(state.placement),
 	    variation: getVariation(state.placement),
@@ -11649,8 +11668,7 @@
 
 	        state.orderedModifiers = orderedModifiers.filter(function (m) {
 	          return m.enabled;
-	        }); // Validate the provided modifiers so that the consumer will get warned
-
+	        });
 	        runModifierEffects();
 	        return instance.update();
 	      },
@@ -11670,7 +11688,6 @@
 	        // anymore
 
 	        if (!areValidElements(reference, popper)) {
-
 	          return;
 	        } // Store the reference and popper rects to be read by modifiers
 
@@ -11695,7 +11712,6 @@
 	        });
 
 	        for (var index = 0; index < state.orderedModifiers.length; index++) {
-
 	          if (state.reset === true) {
 	            state.reset = false;
 	            index = -1;
@@ -11733,7 +11749,6 @@
 	    };
 
 	    if (!areValidElements(reference, popper)) {
-
 	      return instance;
 	    }
 
@@ -11748,11 +11763,11 @@
 	    // one.
 
 	    function runModifierEffects() {
-	      state.orderedModifiers.forEach(function (_ref3) {
-	        var name = _ref3.name,
-	            _ref3$options = _ref3.options,
-	            options = _ref3$options === void 0 ? {} : _ref3$options,
-	            effect = _ref3.effect;
+	      state.orderedModifiers.forEach(function (_ref) {
+	        var name = _ref.name,
+	            _ref$options = _ref.options,
+	            options = _ref$options === void 0 ? {} : _ref$options,
+	            effect = _ref.effect;
 
 	        if (typeof effect === 'function') {
 	          var cleanupFn = effect({
@@ -14769,7 +14784,7 @@
 	  return cache[key];
 	}
 
-	const NEBULA_VERSION_HASH = "28e4" ;
+	const NEBULA_VERSION_HASH = "7f71" ;
 	ClassNameGenerator$1.configure(componentName => {
 	  return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 	});
@@ -15016,7 +15031,7 @@
 	  const appRef = React.createRef();
 	  const element = document.createElement('div');
 	  element.style.display = 'none';
-	  element.setAttribute('data-nebulajs-version', "4.2.0" );
+	  element.setAttribute('data-nebulajs-version', "4.2.2" );
 	  element.setAttribute('data-app-id', app.id);
 	  document.body.appendChild(element);
 	  if (context) {
@@ -17154,7 +17169,7 @@
 	        className: clsx(className, rootSlotProps == null ? void 0 : rootSlotProps.className, classes == null ? void 0 : classes.root, !ownerState.open && ownerState.exited && (classes == null ? void 0 : classes.hidden))
 	      }),
 	      backdrop: () => _extends$4({}, BackdropProps, resolveComponentProps(backdropSlotProps, ownerState), {
-	        className: clsx(backdropSlotProps == null ? void 0 : backdropSlotProps.className, classes == null ? void 0 : classes.backdrop)
+	        className: clsx(backdropSlotProps == null ? void 0 : backdropSlotProps.className, BackdropProps == null ? void 0 : BackdropProps.className, classes == null ? void 0 : classes.backdrop)
 	      })
 	    },
 	    onTransitionEnter: () => setExited(false),
@@ -18919,6 +18934,13 @@
 	  // item and use the first valid item as a fallback
 	  reactExports.Children.forEach(children, (child, index) => {
 	    if (! /*#__PURE__*/reactExports.isValidElement(child)) {
+	      if (activeItemIndex === index) {
+	        activeItemIndex += 1;
+	        if (activeItemIndex >= children.length) {
+	          // there are no focusable items within the list.
+	          activeItemIndex = -1;
+	        }
+	      }
 	      return;
 	    }
 	    if (!child.props.disabled) {
@@ -18967,7 +18989,8 @@
 	generateUtilityClasses('MuiPopover', ['root', 'paper']);
 
 	const _excluded$a = ["onEntering"],
-	  _excluded2$1 = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps"];
+	  _excluded2$1 = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "slots", "slotProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps"],
+	  _excluded3 = ["slotProps"];
 	function getOffsetTop(rect, vertical) {
 	  let offset = 0;
 	  if (typeof vertical === 'number') {
@@ -19029,6 +19052,7 @@
 	  outline: 0
 	});
 	const Popover = /*#__PURE__*/reactExports.forwardRef(function Popover(inProps, ref) {
+	  var _slotProps$paper, _slots$root, _slots$paper;
 	  const props = useThemeProps({
 	    props: inProps,
 	    name: 'MuiPopover'
@@ -19048,7 +19072,9 @@
 	      elevation = 8,
 	      marginThreshold = 16,
 	      open,
-	      PaperProps = {},
+	      PaperProps: PaperPropsProp = {},
+	      slots,
+	      slotProps,
 	      transformOrigin = {
 	        vertical: 'top',
 	        horizontal: 'left'
@@ -19061,14 +19087,15 @@
 	    } = props,
 	    TransitionProps = _objectWithoutPropertiesLoose$3(props.TransitionProps, _excluded$a),
 	    other = _objectWithoutPropertiesLoose$3(props, _excluded2$1);
+	  const externalPaperSlotProps = (_slotProps$paper = slotProps == null ? void 0 : slotProps.paper) != null ? _slotProps$paper : PaperPropsProp;
 	  const paperRef = reactExports.useRef();
-	  const handlePaperRef = useForkRef(paperRef, PaperProps.ref);
+	  const handlePaperRef = useForkRef(paperRef, externalPaperSlotProps.ref);
 	  const ownerState = _extends$4({}, props, {
 	    anchorOrigin,
 	    anchorReference,
 	    elevation,
 	    marginThreshold,
-	    PaperProps,
+	    externalPaperSlotProps,
 	    transformOrigin,
 	    TransitionComponent,
 	    transitionDuration: transitionDurationProp,
@@ -19217,16 +19244,46 @@
 	  // If the anchorEl prop is provided, use its parent body element as the container
 	  // If neither are provided let the Modal take care of choosing the container
 	  const container = containerProp || (anchorEl ? ownerDocument(resolveAnchorEl(anchorEl)).body : undefined);
-	  return /*#__PURE__*/jsxRuntimeExports.jsx(PopoverRoot, _extends$4({
-	    BackdropProps: {
-	      invisible: true
+	  const RootSlot = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : PopoverRoot;
+	  const PaperSlot = (_slots$paper = slots == null ? void 0 : slots.paper) != null ? _slots$paper : PopoverPaper;
+	  const paperProps = useSlotProps({
+	    elementType: PaperSlot,
+	    externalSlotProps: _extends$4({}, externalPaperSlotProps, {
+	      style: isPositioned ? externalPaperSlotProps.style : _extends$4({}, externalPaperSlotProps.style, {
+	        opacity: 0
+	      })
+	    }),
+	    additionalProps: {
+	      elevation,
+	      ref: handlePaperRef
 	    },
-	    className: clsx(classes.root, className),
-	    container: container,
-	    open: open,
-	    ref: ref,
-	    ownerState: ownerState
-	  }, other, {
+	    ownerState,
+	    className: clsx(classes.paper, externalPaperSlotProps == null ? void 0 : externalPaperSlotProps.className)
+	  });
+	  const _useSlotProps = useSlotProps({
+	      elementType: RootSlot,
+	      externalSlotProps: (slotProps == null ? void 0 : slotProps.root) || {},
+	      externalForwardedProps: other,
+	      additionalProps: {
+	        ref,
+	        slotProps: {
+	          backdrop: {
+	            invisible: true
+	          }
+	        },
+	        container,
+	        open
+	      },
+	      ownerState,
+	      className: clsx(classes.root, className)
+	    }),
+	    {
+	      slotProps: rootSlotPropsProp
+	    } = _useSlotProps,
+	    rootProps = _objectWithoutPropertiesLoose$3(_useSlotProps, _excluded3);
+	  return /*#__PURE__*/jsxRuntimeExports.jsx(RootSlot, _extends$4({}, rootProps, !isHostComponent(RootSlot) && {
+	    slotProps: rootSlotPropsProp
+	  }, {
 	    children: /*#__PURE__*/jsxRuntimeExports.jsx(TransitionComponent, _extends$4({
 	      appear: true,
 	      in: open,
@@ -19234,17 +19291,7 @@
 	      onExited: handleExited,
 	      timeout: transitionDuration
 	    }, TransitionProps, {
-	      children: /*#__PURE__*/jsxRuntimeExports.jsx(PopoverPaper, _extends$4({
-	        elevation: elevation
-	      }, PaperProps, {
-	        ref: handlePaperRef,
-	        className: clsx(classes.paper, PaperProps.className)
-	      }, isPositioned ? undefined : {
-	        style: _extends$4({}, PaperProps.style, {
-	          opacity: 0
-	        })
-	      }, {
-	        ownerState: ownerState,
+	      children: /*#__PURE__*/jsxRuntimeExports.jsx(PaperSlot, _extends$4({}, paperProps, {
 	        children: children
 	      }))
 	    }))
@@ -21533,7 +21580,6 @@
 	const REMOVE_TICK_LIMIT = 80; // an item width equal to or less than this, will hide the select tick
 	const SCROLL_BAR_WIDTH = 10; // TODO: ignore this - instead set the styling only show on hover...
 	const ITEM_MAX_WIDTH = 150;
-	const FREQUENCY_WIDTH = 40;
 	const ITEM_MIN_WIDTH = 56;
 	const CHECKBOX_WIDTH = 20;
 	const frequencyTextNone = '-';
@@ -21555,10 +21601,39 @@
 	};
 	const getFrequencyText = qFrequency => qFrequency || frequencyTextNone;
 
-	const getSelectedStyle = _ref => {
+	const getFreqFlexBasis = _ref => {
 	  let {
-	    theme
+	    sizes,
+	    frequencyMode,
+	    isGridMode,
+	    freqHitsValue
 	  } = _ref;
+	  if (frequencyMode === 'P') {
+	    return "".concat(sizes.freqMinWidth, "px");
+	  }
+	  const flexBasis = isGridMode && !freqHitsValue ? 'max-content' : '25%';
+	  return flexBasis;
+	};
+	const getMaxFreqWidth = _ref2 => {
+	  let {
+	    sizes,
+	    frequencyMode,
+	    isGridMode
+	  } = _ref2;
+	  if (isGridMode) {
+	    // This makes the neighbouring value stretch farther than when using a fixed freuency width.
+	    return 'max-content';
+	  }
+	  if (frequencyMode === 'P') {
+	    return sizes.freqMinWidth; // because it will never grow beyond "100.0%"
+	  }
+
+	  return sizes.freqMaxWidth;
+	};
+	const getSelectedStyle = _ref3 => {
+	  let {
+	    theme
+	  } = _ref3;
 	  return {
 	    background: theme.palette.selected.main,
 	    color: theme.palette.selected.mainContrastText,
@@ -21580,18 +21655,20 @@
 	const iconWidth = 24; // tick and lock icon width in px
 
 	const RowColRoot = styled$1('div', {
-	  shouldForwardProp: prop => !['flexBasisProp', 'isGridMode', 'isGridCol', 'dense', 'frequencyWidth', 'direction'].includes(prop)
-	})(_ref2 => {
+	  shouldForwardProp: prop => !['checkboxes', 'isGridMode', 'isGridCol', 'dense', 'direction', 'sizes', 'frequencyMode', 'freqHitsValue'].includes(prop)
+	})(_ref4 => {
 	  var _theme$listBox$conten, _theme$listBox, _theme$listBox$conten2, _theme$listBox$conten3, _theme$listBox2, _theme$listBox2$conte, _theme$listBox3, _theme$listBox3$conte, _theme$listBox4, _theme$listBox4$conte;
 	  let {
 	    theme,
-	    flexBasisProp,
+	    checkboxes,
 	    isGridMode,
 	    isGridCol,
 	    dense,
-	    frequencyWidth,
-	    direction
-	  } = _ref2;
+	    direction,
+	    sizes,
+	    frequencyMode,
+	    freqHitsValue
+	  } = _ref4;
 	  return {
 	    '&:focus': {
 	      boxShadow: "inset 0 0 0 2px ".concat(theme.palette.custom.focusBorder, " !important")
@@ -21624,15 +21701,16 @@
 	    ["& .".concat(rowColClasses.cell)]: {
 	      display: 'flex',
 	      alignItems: 'center',
-	      minWidth: 0,
 	      flexGrow: 1,
+	      minWidth: checkboxes ? '52px' : '26px',
+	      // these numbers are just enough to show one letter and ellipsis: A…
+	      flexBasis: checkboxes ? 'auto' : 'max-content',
 	      // Note that this padding is overridden when using checkboxes.
 	      paddingLeft: "".concat(CELL_PADDING_LEFT, "px"),
 	      paddingRight: 0
 	    },
 	    // The leaf node, containing the label text.
 	    ["& .".concat(rowColClasses.labelText)]: _objectSpread2(_objectSpread2({
-	      flexBasis: flexBasisProp,
 	      lineHeight: '16px',
 	      userSelect: 'none',
 	      paddingRight: '1px'
@@ -21700,9 +21778,22 @@
 	    ["& .".concat(rowColClasses.frequencyCount)]: _objectSpread2(_objectSpread2({
 	      justifyContent: 'flex-end'
 	    }, ellipsis), {}, {
-	      flex: "0 1 ".concat(frequencyWidth, "px"),
+	      flex: "0 0 ".concat(getFreqFlexBasis({
+	        sizes,
+	        frequencyMode,
+	        isGridMode,
+	        freqHitsValue
+	      })),
+	      minWidth: !isGridMode && frequencyMode !== 'P' && freqHitsValue ? sizes.freqMinWidth : 'max-content',
+	      maxWidth: getMaxFreqWidth({
+	        sizes,
+	        frequencyMode,
+	        isGridMode
+	      }),
 	      textAlign: direction === 'rtl' ? 'left' : 'right',
-	      paddingLeft: '2px'
+	      // In RTL, we already get the 8px from the value element's padding and for
+	      // percent mode we have already adapted the width (fixed width) to the max number.
+	      paddingLeft: direction !== 'rtl' ? '8px' : 0
 	    }),
 	    ["&.".concat(rowColClasses.barContainer)]: {
 	      height: '100%',
@@ -22286,6 +22377,21 @@
 	    "aria-live": "assertive"
 	  }, text);
 	}
+	function getScreenReaderSearchText(listCount) {
+	  let t;
+	  switch (listCount) {
+	    case 0:
+	      t = 'Listbox.NoMatchesForYourTerms';
+	      break;
+	    case 1:
+	      t = 'ScreenReader.OneSearchResult';
+	      break;
+	    default:
+	      t = 'ScreenReader.ManySearchResults';
+	      break;
+	  }
+	  return t;
+	}
 
 	const KEYS = Object.freeze({
 	  ENTER: 13,
@@ -22548,6 +22654,32 @@
 	  return handleKeyDown;
 	}
 
+	function getValueTextAlign(_ref) {
+	  let {
+	    direction,
+	    cell,
+	    textAlign
+	  } = _ref;
+	  const isNumeric = !['NaN', undefined].includes(cell === null || cell === void 0 ? void 0 : cell.qNum);
+	  let valueTextAlign;
+	  const isAutoTextAlign = !textAlign || textAlign.auto;
+	  const dirToTextAlignMap = {
+	    rtl: 'right',
+	    ltr: 'left'
+	  };
+	  if (isAutoTextAlign) {
+	    if (!isNumeric) {
+	      valueTextAlign = dirToTextAlignMap[direction];
+	    } else {
+	      valueTextAlign = direction === 'rtl' ? 'left' : 'right';
+	    }
+	  } else {
+	    valueTextAlign = (textAlign === null || textAlign === void 0 ? void 0 : textAlign.align) || 'left';
+	  }
+	  const ALLOWED_OPTIONS = ['left', 'center', 'right'];
+	  return ALLOWED_OPTIONS.includes(valueTextAlign) ? valueTextAlign : 'left';
+	}
+
 	function RowColumn(_ref) {
 	  var _cell$qText, _cell$qHighlightRange, _cell$qHighlightRange2;
 	  let {
@@ -22583,10 +22715,10 @@
 	    columnCount = 1,
 	    rowCount = 1,
 	    dataOffset,
+	    deducedFrequencyMode,
 	    focusListItems,
 	    listCount,
-	    itemPadding,
-	    frequencyWidth,
+	    sizes,
 	    translator,
 	    showSearch,
 	    isModal
@@ -22596,6 +22728,9 @@
 	    dataLayout = 'singleColumn',
 	    layoutOrder
 	  } = layoutOptions;
+	  const {
+	    itemPadding
+	  } = sizes;
 	  let cellIndex;
 	  let styles;
 	  const count = {
@@ -22663,26 +22798,15 @@
 	  const preventContextMenu = reactExports.useCallback(event => {
 	    event.preventDefault();
 	  }, [checkboxes]);
+	  const valueTextAlign = reactExports.useMemo(() => cell && getValueTextAlign({
+	    direction,
+	    cell,
+	    textAlign
+	  }), [direction, cell, textAlign]);
 	  if (!cell) {
 	    return null; // prevent rendering empty rows
 	  }
 
-	  const isNumeric = !['NaN', undefined].includes(cell === null || cell === void 0 ? void 0 : cell.qNum);
-	  let valueTextAlign;
-	  const isAutoTextAlign = !textAlign || textAlign.auto;
-	  const dirToTextAlignMap = {
-	    rtl: 'right',
-	    ltr: 'left'
-	  };
-	  if (isAutoTextAlign) {
-	    if (!isNumeric) {
-	      valueTextAlign = dirToTextAlignMap[direction];
-	    } else {
-	      valueTextAlign = direction === 'rtl' ? 'left' : 'right';
-	    }
-	  } else {
-	    valueTextAlign = (textAlign === null || textAlign === void 0 ? void 0 : textAlign.align) || 'left';
-	  }
 	  const isGridCol = dataLayout === 'grid' && layoutOrder === 'column';
 	  const label = (_cell$qText = cell === null || cell === void 0 ? void 0 : cell.qText) !== null && _cell$qText !== void 0 ? _cell$qText : '';
 	  // Search highlights. Split up labelText span into several and add the highlighted class to matching sub-strings.
@@ -22697,17 +22821,16 @@
 	    display: 'flex',
 	    fontSize: '8px'
 	  };
+	  const isRtl = direction === 'rtl';
 	  const cellStyle = {
 	    display: 'flex',
 	    alignItems: 'center',
-	    minWidth: 0,
 	    flexGrow: 1,
-	    paddingLeft: direction === 'rtl' ? 8 : checkboxes ? 0 : undefined,
-	    paddingRight: checkboxes ? 0 : direction === 'rtl' ? 8 : 0,
+	    paddingLeft: isRtl ? 8 : checkboxes ? 0 : undefined,
+	    paddingRight: checkboxes ? 0 : isRtl ? 8 : 0,
 	    justifyContent: valueTextAlign
 	  };
 	  const isFirstElement = index === 0;
-	  const flexBasisVal = checkboxes ? 'auto' : 'max-content';
 	  const showLock = isSelected && isLocked;
 	  const showTick = !checkboxes && isSelected && !isLocked;
 	  const showIcon = !checkboxes && sizePermitsTickOrLock;
@@ -22720,15 +22843,18 @@
 	    maxIndex: count.max,
 	    showSearch
 	  });
+	  const freqHitsValue = !isRtl && valueTextAlign === 'right' || isRtl && valueTextAlign === 'left';
 	  return /*#__PURE__*/React.createElement(RowColRoot$1, {
 	    className: rowColClasses.barContainer,
-	    flexBasisProp: flexBasisVal,
+	    checkboxes: checkboxes,
 	    style: styles,
 	    isGridCol: isGridCol,
 	    isGridMode: dataLayout === 'grid',
 	    dense: dense,
-	    frequencyWidth: frequencyWidth,
 	    direction: direction,
+	    sizes: sizes,
+	    frequencyMode: deducedFrequencyMode,
+	    freqHitsValue: freqHitsValue,
 	    "data-testid": "listbox.item"
 	  }, /*#__PURE__*/React.createElement(ItemGrid, {
 	    role: "row",
@@ -24352,7 +24478,7 @@
 	    pages,
 	    selectDisabled,
 	    interactionEvents,
-	    frequencyMode,
+	    deducedFrequencyMode,
 	    histogram,
 	    isSingleSelect,
 	    select,
@@ -24382,12 +24508,10 @@
 	  } = layout || {};
 	  const {
 	    columnWidth,
-	    itemPadding,
 	    listHeight,
 	    itemHeight,
 	    rowCount,
-	    columnCount,
-	    frequencyWidth
+	    columnCount
 	  } = sizes || {};
 	  const itemWidth = layoutOptions.dataLayout === 'grid' ? columnWidth : width;
 	  const showTick = itemWidth > REMOVE_TICK_LIMIT;
@@ -24408,12 +24532,11 @@
 	  }, isLocked || selectDisabled() ? {} : interactionEvents), {}, {
 	    checkboxes,
 	    layoutOptions,
-	    frequencyMode,
+	    deducedFrequencyMode,
 	    freqIsAllowed,
 	    isSingleSelect,
 	    textAlign,
-	    itemPadding,
-	    frequencyWidth,
+	    sizes,
 	    actions: {
 	      select,
 	      confirm: () => selections === null || selections === void 0 ? void 0 : selections.confirm.call(selections),
@@ -24598,16 +24721,46 @@
 	  };
 	}
 
-	function getListSizes(_ref) {
+	const getContext = () => {
+	  const fragment = document.createDocumentFragment();
+	  const canvas = document.createElement('canvas');
+	  fragment.appendChild(canvas);
+	  return canvas.getContext('2d');
+	};
+	const getTextWidth = (currentText, font) => {
+	  const context = getContext();
+	  context.font = font;
+	  if (Array.isArray(currentText)) {
+	    return Math.max(...currentText.map(t => context.measureText(t).width));
+	  }
+	  const metrics = context.measureText(currentText);
+	  return Math.ceil(metrics.width || 0);
+	};
+	const useTextWidth = options => {
+	  const textOptions = reactExports.useMemo(() => 'text' in options ? options : {}, [options]);
+	  return reactExports.useMemo(() => getTextWidth(textOptions.text, textOptions.font || '12px Source Sans Pro'), [textOptions.text, textOptions.font]);
+	};
+
+	function getMeasureText(layoutOrNumber) {
+	  if (!layoutOrNumber) {
+	    return '';
+	  }
+	  const maxGlyphCount = typeof layoutOrNumber === 'number' ? layoutOrNumber : layoutOrNumber.qListObject.qDimensionInfo.qApprMaxGlyphCount;
+	  const measureString = Array(maxGlyphCount).fill('M').join('');
+	  return measureString;
+	}
+
+	function useListSizes(_ref) {
+	  var _theme$listBox;
 	  let {
 	    layout,
 	    width,
 	    height,
 	    listCount,
 	    count,
-	    textWidth,
 	    freqIsAllowed,
-	    checkboxes
+	    checkboxes,
+	    theme
 	  } = _ref;
 	  const {
 	    layoutOptions = {}
@@ -24619,7 +24772,24 @@
 	    dense,
 	    dataLayout
 	  } = layoutOptions;
-	  const frequencyAddWidth = freqIsAllowed ? FREQUENCY_WIDTH : 0;
+	  const {
+	    fontSize = '12px',
+	    fontFamily = 'Source sans pro'
+	  } = ((_theme$listBox = theme.listBox) === null || _theme$listBox === void 0 ? void 0 : _theme$listBox.content) || {};
+	  const font = "".concat(fontSize, " ").concat(fontFamily); // font format as supported by HTML canvas
+	  const textWidth = useTextWidth({
+	    text: getMeasureText(layout),
+	    font
+	  });
+	  const freqMinWidth = useTextWidth({
+	    text: getMeasureText(5),
+	    font
+	  });
+	  const freqMaxWidth = useTextWidth({
+	    text: getMeasureText(8),
+	    font
+	  });
+	  const frequencyAddWidth = freqIsAllowed ? freqMinWidth : 0;
 	  const checkboxAddWidth = checkboxes ? CHECKBOX_WIDTH : 0;
 	  const tickIconWidth = CHECKBOX_WIDTH;
 	  let dynamicItemMinWidth = ITEM_MIN_WIDTH + frequencyAddWidth + checkboxAddWidth;
@@ -24700,6 +24870,7 @@
 	    overflowStyling,
 	    itemHeight,
 	    listHeight,
+	    listWidth: width,
 	    scrollBarWidth: SCROLL_BAR_WIDTH,
 	    count,
 	    listCount: limitedListCount,
@@ -24708,42 +24879,12 @@
 	      column: maxColumnCount
 	    },
 	    itemPadding,
-	    frequencyWidth: FREQUENCY_WIDTH
+	    textWidth,
+	    freqMinWidth,
+	    freqMaxWidth
 	  };
 	}
 
-	const getContext = () => {
-	  const fragment = document.createDocumentFragment();
-	  const canvas = document.createElement('canvas');
-	  fragment.appendChild(canvas);
-	  return canvas.getContext('2d');
-	};
-	const getTextWidth = (currentText, font) => {
-	  const context = getContext();
-	  context.font = font;
-	  if (Array.isArray(currentText)) {
-	    return Math.max(...currentText.map(t => context.measureText(t).width));
-	  }
-	  const metrics = context.measureText(currentText);
-	  return metrics.width;
-	};
-	const useTextWidth = options => {
-	  const textOptions = reactExports.useMemo(() => 'text' in options ? options : {}, [options]);
-	  return reactExports.useMemo(() => getTextWidth(textOptions.text, textOptions.font || '14px Source Sans Pro'), [textOptions.text, textOptions.font]);
-	};
-
-	function getMeasureText(layout) {
-	  if (!layout) {
-	    return '';
-	  }
-	  const maxGlyphCount = layout.qListObject.qDimensionInfo.qApprMaxGlyphCount;
-	  let measureString = '';
-	  for (let i = 0; i < maxGlyphCount; i++) {
-	    measureString += 'M';
-	  }
-	  return measureString;
-	}
-
 	function getHorizontalMinBatchSize(_ref) {
 	  let {
 	    width,
@@ -25077,7 +25218,7 @@
 	  const {
 	    frequencyEnabled = false
 	  } = (layout === null || layout === void 0 ? void 0 : layout.qListObject) || {};
-	  const hasValidFreqOption = !['none', undefined].includes(frequencyMode);
+	  const hasValidFreqOption = !['N', undefined].includes(frequencyMode);
 	  return !!(widthPermitsFreq && (hasValidFreqOption || frequencyEnabled));
 	}
 
@@ -25124,6 +25265,21 @@
 	  };
 	};
 
+	function deduceFrequencyMode(pages) {
+	  const hasPercentSign = pages.some(_ref => {
+	    let {
+	      qMatrix
+	    } = _ref;
+	    return qMatrix.some(_ref2 => {
+	      var _item$qFrequency;
+	      let [item] = _ref2;
+	      return !!((_item$qFrequency = item.qFrequency) !== null && _item$qFrequency !== void 0 && _item$qFrequency.match('%'));
+	    });
+	  });
+	  const OTHER = '-'; // treat all other as '-' (change later if we need to identify other modes)
+	  return hasPercentSign ? 'P' : OTHER;
+	}
+
 	const _excluded$4 = ["isLoadingData"];
 	const DEFAULT_MIN_BATCH_SIZE = 100;
 	const StyledWrapper = styled$1('div')(() => ({
@@ -25140,6 +25296,7 @@
 	    model,
 	    app,
 	    constraints,
+	    theme,
 	    layout,
 	    selections,
 	    selectionState,
@@ -25177,6 +25334,7 @@
 	    checkboxes = checkboxOption,
 	    histogram
 	  } = layout !== null && layout !== void 0 ? layout : {};
+	  const [screenReaderText, setScreenReaderText] = reactExports.useState('');
 	  const loaderRef = reactExports.useRef(null);
 	  const local = reactExports.useRef({
 	    queue: [],
@@ -25204,6 +25362,7 @@
 	    }),
 	    itemsLoader = _objectWithoutProperties(_useItemsLoader, _excluded$4);
 	  const {
+	    getStoreValue,
 	    setStoreValue
 	  } = useDataStore(model);
 	  const loadMoreItems = reactExports.useCallback(itemsLoader.loadMoreItems, [layout]);
@@ -25295,10 +25454,6 @@
 	  reactExports.useEffect(() => {
 	    fetchData();
 	  }, [layout, local.current.dataOffset]);
-	  const textWidth = useTextWidth({
-	    text: getMeasureText(layout),
-	    font: '14px Source sans pro'
-	  });
 	  let minimumBatchSize = DEFAULT_MIN_BATCH_SIZE;
 	  const isVertical = layoutOptions.dataLayout !== 'grid';
 	  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;
@@ -25315,15 +25470,16 @@
 	    layout,
 	    frequencyMode
 	  });
-	  const sizes = getListSizes({
+	  const deducedFrequencyMode = deduceFrequencyMode(pages);
+	  const sizes = useListSizes({
 	    layout,
 	    width,
 	    height,
 	    listCount: unlimitedListCount,
 	    count,
-	    textWidth,
 	    freqIsAllowed,
-	    checkboxes
+	    checkboxes,
+	    theme
 	  });
 	  if (sizes.columnWidth) {
 	    // In grid mode, where we have a dynamic item width, get a second opinion on showing/hiding frequency.
@@ -25337,6 +25493,14 @@
 	    listCount
 	  } = sizes;
 	  setStoreValue('listCount', listCount);
+	  const inputText = getStoreValue('inputText');
+	  reactExports.useEffect(() => {
+	    if (inputText) {
+	      const srText = getScreenReaderSearchText(listCount);
+	      const srFinalText = translator.get(srText, [listCount]);
+	      setScreenReaderText(srFinalText);
+	    }
+	  }, [inputText, listCount]);
 	  const setScrollPosition = position => {
 	    const {
 	      scrollIndex,
@@ -25400,7 +25564,7 @@
 	    height,
 	    width,
 	    checkboxes,
-	    frequencyMode,
+	    deducedFrequencyMode,
 	    histogram,
 	    keyboard,
 	    showGray,
@@ -25448,7 +25612,10 @@
 	  return /*#__PURE__*/React.createElement(StyledWrapper, null, /*#__PURE__*/React.createElement(ScreenReaderForSelections, {
 	    className: "screenReaderOnly",
 	    layout: layout
-	  }), !listCount && cardinal > 0 && /*#__PURE__*/React.createElement(ListBoxDisclaimer, {
+	  }), /*#__PURE__*/React.createElement("div", {
+	    className: "screenReaderOnly",
+	    "aria-live": "assertive"
+	  }, screenReaderText), !listCount && cardinal > 0 && /*#__PURE__*/React.createElement(ListBoxDisclaimer, {
 	    width: width,
 	    text: "Listbox.NoMatchesForYourTerms"
 	  }), /*#__PURE__*/React.createElement(InfiniteLoader, {
@@ -26157,7 +26324,8 @@
 	  const inputRef = reactExports.useRef();
 	  const theme = useTheme$1();
 	  const {
-	    getStoreValue
+	    getStoreValue,
+	    setStoreValue
 	  } = useDataStore(model);
 	  const isRtl = direction === 'rtl';
 	  const inpuTextAlign = isRtl ? 'right' : 'left';
@@ -26190,6 +26358,9 @@
 	      setWildcardOn(false);
 	    }
 	  }, [wildcardOn, inputRef.current]);
+	  reactExports.useEffect(() => {
+	    setStoreValue('inputText', value);
+	  }, [value]);
 	  const onChange = async e => {
 	    setValue(e.target.value);
 	    if (!e.target.value.length) {
@@ -26324,7 +26495,8 @@
 	      style: {
 	        textAlign: "".concat(inpuTextAlign)
 	      },
-	      'data-testid': 'search-input-field'
+	      'data-testid': 'search-input-field',
+	      'aria-label': translator.get('ScreenReader.SearchFieldLabel')
 	    }
 	  });
 	}
@@ -27687,21 +27859,6 @@
 	  }), element, uid());
 	}
 
-	var $parcel$global =
-	typeof globalThis !== 'undefined'
-	  ? globalThis
-	  : typeof self !== 'undefined'
-	  ? self
-	  : typeof window !== 'undefined'
-	  ? window
-	  : typeof global !== 'undefined'
-	  ? global
-	  : {};
-	function $parcel$export(e, n, v, s) {
-	  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
-	}
-
-	var $3e40d2fd7fdb47d2$exports = {};
 	/**
 	 * Detect Element Resize.
 	 * https://github.com/sdecima/javascript-detect-element-resize
@@ -27712,346 +27869,371 @@
 	 * 2) Defer initialization code via a top-level function wrapper (to support SSR).
 	 * 3) Avoid unnecessary reflows by not measuring size for scroll events bubbling from children.
 	 * 4) Add nonce for style element.
-	 **/ // Check `document` and `window` in case of server-side rendering
-	let $3e40d2fd7fdb47d2$var$windowObject;
-	if (typeof window !== "undefined") $3e40d2fd7fdb47d2$var$windowObject = window;
-	else if (typeof self !== "undefined") // eslint-disable-next-line no-restricted-globals
-	$3e40d2fd7fdb47d2$var$windowObject = self;
-	else $3e40d2fd7fdb47d2$var$windowObject = $parcel$global;
-	let $3e40d2fd7fdb47d2$var$cancelFrame = null;
-	let $3e40d2fd7fdb47d2$var$requestFrame = null;
-	const $3e40d2fd7fdb47d2$var$TIMEOUT_DURATION = 20;
-	const $3e40d2fd7fdb47d2$var$clearTimeoutFn = $3e40d2fd7fdb47d2$var$windowObject.clearTimeout;
-	const $3e40d2fd7fdb47d2$var$setTimeoutFn = $3e40d2fd7fdb47d2$var$windowObject.setTimeout;
-	const $3e40d2fd7fdb47d2$var$cancelAnimationFrameFn = $3e40d2fd7fdb47d2$var$windowObject.cancelAnimationFrame || $3e40d2fd7fdb47d2$var$windowObject.mozCancelAnimationFrame || $3e40d2fd7fdb47d2$var$windowObject.webkitCancelAnimationFrame;
-	const $3e40d2fd7fdb47d2$var$requestAnimationFrameFn = $3e40d2fd7fdb47d2$var$windowObject.requestAnimationFrame || $3e40d2fd7fdb47d2$var$windowObject.mozRequestAnimationFrame || $3e40d2fd7fdb47d2$var$windowObject.webkitRequestAnimationFrame;
-	if ($3e40d2fd7fdb47d2$var$cancelAnimationFrameFn == null || $3e40d2fd7fdb47d2$var$requestAnimationFrameFn == null) {
-	    // For environments that don't support animation frame,
-	    // fallback to a setTimeout based approach.
-	    $3e40d2fd7fdb47d2$var$cancelFrame = $3e40d2fd7fdb47d2$var$clearTimeoutFn;
-	    $3e40d2fd7fdb47d2$var$requestFrame = function requestAnimationFrameViaSetTimeout(callback) {
-	        return $3e40d2fd7fdb47d2$var$setTimeoutFn(callback, $3e40d2fd7fdb47d2$var$TIMEOUT_DURATION);
-	    };
+	 * 5) Use 'export' statement over 'module.exports' assignment
+	 **/
+
+	// Check `document` and `window` in case of server-side rendering
+	let windowObject;
+	if (typeof window !== "undefined") {
+	  windowObject = window;
+
+	  // eslint-disable-next-line no-restricted-globals
+	} else if (typeof self !== "undefined") {
+	  // eslint-disable-next-line no-restricted-globals
+	  windowObject = self;
 	} else {
-	    // Counter intuitively, environments that support animation frames can be trickier.
-	    // Chrome's "Throttle non-visible cross-origin iframes" flag can prevent rAFs from being called.
-	    // In this case, we should fallback to a setTimeout() implementation.
-	    $3e40d2fd7fdb47d2$var$cancelFrame = function cancelFrame([animationFrameID, timeoutID]) {
-	        $3e40d2fd7fdb47d2$var$cancelAnimationFrameFn(animationFrameID);
-	        $3e40d2fd7fdb47d2$var$clearTimeoutFn(timeoutID);
-	    };
-	    $3e40d2fd7fdb47d2$var$requestFrame = function requestAnimationFrameWithSetTimeoutFallback(callback) {
-	        const animationFrameID = $3e40d2fd7fdb47d2$var$requestAnimationFrameFn(function animationFrameCallback() {
-	            $3e40d2fd7fdb47d2$var$clearTimeoutFn(timeoutID);
-	            callback();
-	        });
-	        const timeoutID = $3e40d2fd7fdb47d2$var$setTimeoutFn(function timeoutCallback() {
-	            $3e40d2fd7fdb47d2$var$cancelAnimationFrameFn(animationFrameID);
-	            callback();
-	        }, $3e40d2fd7fdb47d2$var$TIMEOUT_DURATION);
-	        return [
-	            animationFrameID,
-	            timeoutID
-	        ];
-	    };
-	}
-	function $3e40d2fd7fdb47d2$var$createDetectElementResize(nonce) {
-	    let animationKeyframes;
-	    let animationName;
-	    let animationStartEvent;
-	    let animationStyle;
-	    let checkTriggers;
-	    let resetTriggers;
-	    let scrollListener;
-	    const attachEvent = typeof document !== "undefined" && document.attachEvent;
-	    if (!attachEvent) {
-	        resetTriggers = function(element) {
-	            const triggers = element.__resizeTriggers__, expand = triggers.firstElementChild, contract = triggers.lastElementChild, expandChild = expand.firstElementChild;
-	            contract.scrollLeft = contract.scrollWidth;
-	            contract.scrollTop = contract.scrollHeight;
-	            expandChild.style.width = expand.offsetWidth + 1 + "px";
-	            expandChild.style.height = expand.offsetHeight + 1 + "px";
-	            expand.scrollLeft = expand.scrollWidth;
-	            expand.scrollTop = expand.scrollHeight;
-	        };
-	        checkTriggers = function(element) {
-	            return element.offsetWidth !== element.__resizeLast__.width || element.offsetHeight !== element.__resizeLast__.height;
-	        };
-	        scrollListener = function(e) {
-	            // Don't measure (which forces) reflow for scrolls that happen inside of children!
-	            if (e.target.className && typeof e.target.className.indexOf === "function" && e.target.className.indexOf("contract-trigger") < 0 && e.target.className.indexOf("expand-trigger") < 0) return;
-	            const element = this;
-	            resetTriggers(this);
-	            if (this.__resizeRAF__) $3e40d2fd7fdb47d2$var$cancelFrame(this.__resizeRAF__);
-	            this.__resizeRAF__ = $3e40d2fd7fdb47d2$var$requestFrame(function animationFrame() {
-	                if (checkTriggers(element)) {
-	                    element.__resizeLast__.width = element.offsetWidth;
-	                    element.__resizeLast__.height = element.offsetHeight;
-	                    element.__resizeListeners__.forEach(function forEachResizeListener(fn) {
-	                        fn.call(element, e);
-	                    });
-	                }
-	            });
-	        };
-	        /* Detect CSS Animations support to detect element display/re-attach */ let animation = false;
-	        let keyframeprefix = "";
-	        animationStartEvent = "animationstart";
-	        const domPrefixes = "Webkit Moz O ms".split(" ");
-	        let startEvents = "webkitAnimationStart animationstart oAnimationStart MSAnimationStart".split(" ");
-	        let pfx = "";
-	        {
-	            const elm = document.createElement("fakeelement");
-	            if (elm.style.animationName !== undefined) animation = true;
-	            if (animation === false) {
-	                for(let i = 0; i < domPrefixes.length; i++)if (elm.style[domPrefixes[i] + "AnimationName"] !== undefined) {
-	                    pfx = domPrefixes[i];
-	                    keyframeprefix = "-" + pfx.toLowerCase() + "-";
-	                    animationStartEvent = startEvents[i];
-	                    animation = true;
-	                    break;
-	                }
-	            }
-	        }
-	        animationName = "resizeanim";
-	        animationKeyframes = "@" + keyframeprefix + "keyframes " + animationName + " { from { opacity: 0; } to { opacity: 0; } } ";
-	        animationStyle = keyframeprefix + "animation: 1ms " + animationName + "; ";
-	    }
-	    const createStyles = function(doc) {
-	        if (!doc.getElementById("detectElementResize")) {
-	            //opacity:0 works around a chrome bug https://code.google.com/p/chromium/issues/detail?id=286360
-	            const css = (animationKeyframes ? animationKeyframes : "") + ".resize-triggers { " + (animationStyle ? animationStyle : "") + "visibility: hidden; opacity: 0; } " + '.resize-triggers, .resize-triggers > div, .contract-trigger:before { content: " "; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; z-index: -1; } .resize-triggers > div { background: #eee; overflow: auto; } .contract-trigger:before { width: 200%; height: 200%; }', head = doc.head || doc.getElementsByTagName("head")[0], style = doc.createElement("style");
-	            style.id = "detectElementResize";
-	            style.type = "text/css";
-	            if (nonce != null) style.setAttribute("nonce", nonce);
-	            if (style.styleSheet) style.styleSheet.cssText = css;
-	            else style.appendChild(doc.createTextNode(css));
-	            head.appendChild(style);
-	        }
+	  windowObject = global;
+	}
+	let cancelFrame = null;
+	let requestFrame = null;
+	const TIMEOUT_DURATION = 20;
+	const clearTimeoutFn = windowObject.clearTimeout;
+	const setTimeoutFn = windowObject.setTimeout;
+	const cancelAnimationFrameFn = windowObject.cancelAnimationFrame || windowObject.mozCancelAnimationFrame || windowObject.webkitCancelAnimationFrame;
+	const requestAnimationFrameFn = windowObject.requestAnimationFrame || windowObject.mozRequestAnimationFrame || windowObject.webkitRequestAnimationFrame;
+	if (cancelAnimationFrameFn == null || requestAnimationFrameFn == null) {
+	  // For environments that don't support animation frame,
+	  // fallback to a setTimeout based approach.
+	  cancelFrame = clearTimeoutFn;
+	  requestFrame = function requestAnimationFrameViaSetTimeout(callback) {
+	    return setTimeoutFn(callback, TIMEOUT_DURATION);
+	  };
+	} else {
+	  // Counter intuitively, environments that support animation frames can be trickier.
+	  // Chrome's "Throttle non-visible cross-origin iframes" flag can prevent rAFs from being called.
+	  // In this case, we should fallback to a setTimeout() implementation.
+	  cancelFrame = function cancelFrame([animationFrameID, timeoutID]) {
+	    cancelAnimationFrameFn(animationFrameID);
+	    clearTimeoutFn(timeoutID);
+	  };
+	  requestFrame = function requestAnimationFrameWithSetTimeoutFallback(callback) {
+	    const animationFrameID = requestAnimationFrameFn(function animationFrameCallback() {
+	      clearTimeoutFn(timeoutID);
+	      callback();
+	    });
+	    const timeoutID = setTimeoutFn(function timeoutCallback() {
+	      cancelAnimationFrameFn(animationFrameID);
+	      callback();
+	    }, TIMEOUT_DURATION);
+	    return [animationFrameID, timeoutID];
+	  };
+	}
+	function createDetectElementResize(nonce) {
+	  let animationKeyframes;
+	  let animationName;
+	  let animationStartEvent;
+	  let animationStyle;
+	  let checkTriggers;
+	  let resetTriggers;
+	  let scrollListener;
+	  const attachEvent = typeof document !== "undefined" && document.attachEvent;
+	  if (!attachEvent) {
+	    resetTriggers = function (element) {
+	      const triggers = element.__resizeTriggers__,
+	        expand = triggers.firstElementChild,
+	        contract = triggers.lastElementChild,
+	        expandChild = expand.firstElementChild;
+	      contract.scrollLeft = contract.scrollWidth;
+	      contract.scrollTop = contract.scrollHeight;
+	      expandChild.style.width = expand.offsetWidth + 1 + "px";
+	      expandChild.style.height = expand.offsetHeight + 1 + "px";
+	      expand.scrollLeft = expand.scrollWidth;
+	      expand.scrollTop = expand.scrollHeight;
 	    };
-	    const addResizeListener = function(element, fn) {
-	        if (attachEvent) element.attachEvent("onresize", fn);
-	        else {
-	            if (!element.__resizeTriggers__) {
-	                const doc = element.ownerDocument;
-	                const elementStyle = $3e40d2fd7fdb47d2$var$windowObject.getComputedStyle(element);
-	                if (elementStyle && elementStyle.position === "static") element.style.position = "relative";
-	                createStyles(doc);
-	                element.__resizeLast__ = {};
-	                element.__resizeListeners__ = [];
-	                (element.__resizeTriggers__ = doc.createElement("div")).className = "resize-triggers";
-	                const expandTrigger = doc.createElement("div");
-	                expandTrigger.className = "expand-trigger";
-	                expandTrigger.appendChild(doc.createElement("div"));
-	                const contractTrigger = doc.createElement("div");
-	                contractTrigger.className = "contract-trigger";
-	                element.__resizeTriggers__.appendChild(expandTrigger);
-	                element.__resizeTriggers__.appendChild(contractTrigger);
-	                element.appendChild(element.__resizeTriggers__);
-	                resetTriggers(element);
-	                element.addEventListener("scroll", scrollListener, true);
-	                /* Listen for a css animation to detect element display/re-attach */ if (animationStartEvent) {
-	                    element.__resizeTriggers__.__animationListener__ = function animationListener(e) {
-	                        if (e.animationName === animationName) resetTriggers(element);
-	                    };
-	                    element.__resizeTriggers__.addEventListener(animationStartEvent, element.__resizeTriggers__.__animationListener__);
-	                }
-	            }
-	            element.__resizeListeners__.push(fn);
-	        }
+	    checkTriggers = function (element) {
+	      return element.offsetWidth !== element.__resizeLast__.width || element.offsetHeight !== element.__resizeLast__.height;
 	    };
-	    const removeResizeListener = function(element, fn) {
-	        if (attachEvent) element.detachEvent("onresize", fn);
-	        else {
-	            element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
-	            if (!element.__resizeListeners__.length) {
-	                element.removeEventListener("scroll", scrollListener, true);
-	                if (element.__resizeTriggers__.__animationListener__) {
-	                    element.__resizeTriggers__.removeEventListener(animationStartEvent, element.__resizeTriggers__.__animationListener__);
-	                    element.__resizeTriggers__.__animationListener__ = null;
-	                }
-	                try {
-	                    element.__resizeTriggers__ = !element.removeChild(element.__resizeTriggers__);
-	                } catch (e) {
-	                // Preact compat; see developit/preact-compat/issues/228
-	                }
-	            }
+	    scrollListener = function (e) {
+	      // Don't measure (which forces) reflow for scrolls that happen inside of children!
+	      if (e.target.className && typeof e.target.className.indexOf === "function" && e.target.className.indexOf("contract-trigger") < 0 && e.target.className.indexOf("expand-trigger") < 0) {
+	        return;
+	      }
+	      const element = this;
+	      resetTriggers(this);
+	      if (this.__resizeRAF__) {
+	        cancelFrame(this.__resizeRAF__);
+	      }
+	      this.__resizeRAF__ = requestFrame(function animationFrame() {
+	        if (checkTriggers(element)) {
+	          element.__resizeLast__.width = element.offsetWidth;
+	          element.__resizeLast__.height = element.offsetHeight;
+	          element.__resizeListeners__.forEach(function forEachResizeListener(fn) {
+	            fn.call(element, e);
+	          });
 	        }
+	      });
 	    };
-	    return {
-	        addResizeListener: addResizeListener,
-	        removeResizeListener: removeResizeListener
-	    };
-	}
-	$3e40d2fd7fdb47d2$exports = {
-	    createDetectElementResize: $3e40d2fd7fdb47d2$var$createDetectElementResize
-	};
-
 
-	function $6e2bb92d9db3b0c8$var$_defineProperty(obj, key, value) {
-	    key = $6e2bb92d9db3b0c8$var$_toPropertyKey(key);
-	    if (key in obj) Object.defineProperty(obj, key, {
-	        value: value,
-	        enumerable: true,
-	        configurable: true,
-	        writable: true
-	    });
-	    else obj[key] = value;
-	    return obj;
-	}
-	function $6e2bb92d9db3b0c8$var$_toPropertyKey(arg) {
-	    var key = $6e2bb92d9db3b0c8$var$_toPrimitive(arg, "string");
-	    return typeof key === "symbol" ? key : String(key);
-	}
-	function $6e2bb92d9db3b0c8$var$_toPrimitive(input, hint) {
-	    if (typeof input !== "object" || input === null) return input;
-	    var prim = input[Symbol.toPrimitive];
-	    if (prim !== undefined) {
-	        var res = prim.call(input, hint || "default");
-	        if (typeof res !== "object") return res;
-	        throw new TypeError("@@toPrimitive must return a primitive value.");
-	    }
-	    return (hint === "string" ? String : Number)(input);
-	}
-	class $6e2bb92d9db3b0c8$export$9d94f4ee1d930ff extends (reactExports.Component) {
-	    constructor(...args){
-	        super(...args);
-	        $6e2bb92d9db3b0c8$var$_defineProperty(this, "state", {
-	            height: this.props.defaultHeight || 0,
-	            scaledHeight: this.props.defaultHeight || 0,
-	            scaledWidth: this.props.defaultWidth || 0,
-	            width: this.props.defaultWidth || 0
-	        });
-	        $6e2bb92d9db3b0c8$var$_defineProperty(this, "_autoSizer", null);
-	        $6e2bb92d9db3b0c8$var$_defineProperty(this, "_detectElementResize", null);
-	        $6e2bb92d9db3b0c8$var$_defineProperty(this, "_parentNode", null);
-	        $6e2bb92d9db3b0c8$var$_defineProperty(this, "_resizeObserver", null);
-	        $6e2bb92d9db3b0c8$var$_defineProperty(this, "_onResize", ()=>{
-	            const { disableHeight: disableHeight , disableWidth: disableWidth , onResize: onResize  } = this.props;
-	            if (this._parentNode) {
-	                var _style$paddingLeft, _style$paddingRight, _style$paddingTop, _style$paddingBottom;
-	                // Guard against AutoSizer component being removed from the DOM immediately after being added.
-	                // This can result in invalid style values which can result in NaN values if we don't handle them.
-	                // See issue #150 for more context.
-	                const style = window.getComputedStyle(this._parentNode) || {};
-	                const paddingLeft = parseFloat((_style$paddingLeft = style.paddingLeft) !== null && _style$paddingLeft !== void 0 ? _style$paddingLeft : "0");
-	                const paddingRight = parseFloat((_style$paddingRight = style.paddingRight) !== null && _style$paddingRight !== void 0 ? _style$paddingRight : "0");
-	                const paddingTop = parseFloat((_style$paddingTop = style.paddingTop) !== null && _style$paddingTop !== void 0 ? _style$paddingTop : "0");
-	                const paddingBottom = parseFloat((_style$paddingBottom = style.paddingBottom) !== null && _style$paddingBottom !== void 0 ? _style$paddingBottom : "0");
-	                const rect = this._parentNode.getBoundingClientRect();
-	                const scaledHeight = rect.height - paddingTop - paddingBottom;
-	                const scaledWidth = rect.width - paddingLeft - paddingRight;
-	                const height = this._parentNode.offsetHeight - paddingTop - paddingBottom;
-	                const width = this._parentNode.offsetWidth - paddingLeft - paddingRight;
-	                if (!disableHeight && (this.state.height !== height || this.state.scaledHeight !== scaledHeight) || !disableWidth && (this.state.width !== width || this.state.scaledWidth !== scaledWidth)) {
-	                    this.setState({
-	                        height: height,
-	                        width: width,
-	                        scaledHeight: scaledHeight,
-	                        scaledWidth: scaledWidth
-	                    });
-	                    if (typeof onResize === "function") onResize({
-	                        height: height,
-	                        scaledHeight: scaledHeight,
-	                        scaledWidth: scaledWidth,
-	                        width: width
-	                    });
-	                }
-	            }
-	        });
-	        $6e2bb92d9db3b0c8$var$_defineProperty(this, "_setRef", (autoSizer)=>{
-	            this._autoSizer = autoSizer;
-	        });
-	    }
-	    componentDidMount() {
-	        const { nonce: nonce  } = this.props;
-	        if (this._autoSizer && this._autoSizer.parentNode && this._autoSizer.parentNode.ownerDocument && this._autoSizer.parentNode.ownerDocument.defaultView && this._autoSizer.parentNode instanceof this._autoSizer.parentNode.ownerDocument.defaultView.HTMLElement) {
-	            // Delay access of parentNode until mount.
-	            // This handles edge-cases where the component has already been unmounted before its ref has been set,
-	            // As well as libraries like react-lite which have a slightly different lifecycle.
-	            this._parentNode = this._autoSizer.parentNode;
-	            // Defer requiring resize handler in order to support server-side rendering.
-	            // See issue #41
-	            if (this._parentNode != null) {
-	                if (typeof ResizeObserver !== "undefined") {
-	                    this._resizeObserver = new ResizeObserver(()=>{
-	                        // Guard against "ResizeObserver loop limit exceeded" error;
-	                        // could be triggered if the state update causes the ResizeObserver handler to run long.
-	                        // See https://github.com/bvaughn/react-virtualized-auto-sizer/issues/55
-	                        setTimeout(this._onResize, 0);
-	                    });
-	                    this._resizeObserver.observe(this._parentNode);
-	                } else {
-	                    this._detectElementResize = (0, $3e40d2fd7fdb47d2$exports.createDetectElementResize)(nonce);
-	                    this._detectElementResize.addResizeListener(this._parentNode, this._onResize);
-	                }
-	                this._onResize();
-	            }
+	    /* Detect CSS Animations support to detect element display/re-attach */
+	    let animation = false;
+	    let keyframeprefix = "";
+	    animationStartEvent = "animationstart";
+	    const domPrefixes = "Webkit Moz O ms".split(" ");
+	    let startEvents = "webkitAnimationStart animationstart oAnimationStart MSAnimationStart".split(" ");
+	    let pfx = "";
+	    {
+	      const elm = document.createElement("fakeelement");
+	      if (elm.style.animationName !== undefined) {
+	        animation = true;
+	      }
+	      if (animation === false) {
+	        for (let i = 0; i < domPrefixes.length; i++) {
+	          if (elm.style[domPrefixes[i] + "AnimationName"] !== undefined) {
+	            pfx = domPrefixes[i];
+	            keyframeprefix = "-" + pfx.toLowerCase() + "-";
+	            animationStartEvent = startEvents[i];
+	            animation = true;
+	            break;
+	          }
 	        }
+	      }
 	    }
-	    componentWillUnmount() {
-	        if (this._parentNode) {
-	            if (this._detectElementResize) this._detectElementResize.removeResizeListener(this._parentNode, this._onResize);
-	            if (this._resizeObserver) {
-	                this._resizeObserver.observe(this._parentNode);
-	                this._resizeObserver.disconnect();
+	    animationName = "resizeanim";
+	    animationKeyframes = "@" + keyframeprefix + "keyframes " + animationName + " { from { opacity: 0; } to { opacity: 0; } } ";
+	    animationStyle = keyframeprefix + "animation: 1ms " + animationName + "; ";
+	  }
+	  const createStyles = function (doc) {
+	    if (!doc.getElementById("detectElementResize")) {
+	      //opacity:0 works around a chrome bug https://code.google.com/p/chromium/issues/detail?id=286360
+	      const css = (animationKeyframes ? animationKeyframes : "") + ".resize-triggers { " + (animationStyle ? animationStyle : "") + "visibility: hidden; opacity: 0; } " + '.resize-triggers, .resize-triggers > div, .contract-trigger:before { content: " "; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; z-index: -1; } .resize-triggers > div { background: #eee; overflow: auto; } .contract-trigger:before { width: 200%; height: 200%; }',
+	        head = doc.head || doc.getElementsByTagName("head")[0],
+	        style = doc.createElement("style");
+	      style.id = "detectElementResize";
+	      style.type = "text/css";
+	      if (nonce != null) {
+	        style.setAttribute("nonce", nonce);
+	      }
+	      if (style.styleSheet) {
+	        style.styleSheet.cssText = css;
+	      } else {
+	        style.appendChild(doc.createTextNode(css));
+	      }
+	      head.appendChild(style);
+	    }
+	  };
+	  const addResizeListener = function (element, fn) {
+	    if (attachEvent) {
+	      element.attachEvent("onresize", fn);
+	    } else {
+	      if (!element.__resizeTriggers__) {
+	        const doc = element.ownerDocument;
+	        const elementStyle = windowObject.getComputedStyle(element);
+	        if (elementStyle && elementStyle.position === "static") {
+	          element.style.position = "relative";
+	        }
+	        createStyles(doc);
+	        element.__resizeLast__ = {};
+	        element.__resizeListeners__ = [];
+	        (element.__resizeTriggers__ = doc.createElement("div")).className = "resize-triggers";
+	        const expandTrigger = doc.createElement("div");
+	        expandTrigger.className = "expand-trigger";
+	        expandTrigger.appendChild(doc.createElement("div"));
+	        const contractTrigger = doc.createElement("div");
+	        contractTrigger.className = "contract-trigger";
+	        element.__resizeTriggers__.appendChild(expandTrigger);
+	        element.__resizeTriggers__.appendChild(contractTrigger);
+	        element.appendChild(element.__resizeTriggers__);
+	        resetTriggers(element);
+	        element.addEventListener("scroll", scrollListener, true);
+
+	        /* Listen for a css animation to detect element display/re-attach */
+	        if (animationStartEvent) {
+	          element.__resizeTriggers__.__animationListener__ = function animationListener(e) {
+	            if (e.animationName === animationName) {
+	              resetTriggers(element);
 	            }
+	          };
+	          element.__resizeTriggers__.addEventListener(animationStartEvent, element.__resizeTriggers__.__animationListener__);
 	        }
+	      }
+	      element.__resizeListeners__.push(fn);
 	    }
-	    render() {
-	        const { children: children , defaultHeight: defaultHeight , defaultWidth: defaultWidth , disableHeight: disableHeight = false , disableWidth: disableWidth = false , nonce: nonce , onResize: onResize , style: style = {} , tagName: tagName = "div" , ...rest } = this.props;
-	        const { height: height , scaledHeight: scaledHeight , scaledWidth: scaledWidth , width: width  } = this.state;
-	        // Outer div should not force width/height since that may prevent containers from shrinking.
-	        // Inner component should overflow and use calculated width/height.
-	        // See issue #68 for more information.
-	        const outerStyle = {
-	            overflow: "visible"
-	        };
-	        const childParams = {};
-	        // Avoid rendering children before the initial measurements have been collected.
-	        // At best this would just be wasting cycles.
-	        let bailoutOnChildren = false;
-	        if (!disableHeight) {
-	            if (height === 0) bailoutOnChildren = true;
-	            outerStyle.height = 0;
-	            childParams.height = height;
-	            childParams.scaledHeight = scaledHeight;
+	  };
+	  const removeResizeListener = function (element, fn) {
+	    if (attachEvent) {
+	      element.detachEvent("onresize", fn);
+	    } else {
+	      element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
+	      if (!element.__resizeListeners__.length) {
+	        element.removeEventListener("scroll", scrollListener, true);
+	        if (element.__resizeTriggers__.__animationListener__) {
+	          element.__resizeTriggers__.removeEventListener(animationStartEvent, element.__resizeTriggers__.__animationListener__);
+	          element.__resizeTriggers__.__animationListener__ = null;
 	        }
-	        if (!disableWidth) {
-	            if (width === 0) bailoutOnChildren = true;
-	            outerStyle.width = 0;
-	            childParams.width = width;
-	            childParams.scaledWidth = scaledWidth;
+	        try {
+	          element.__resizeTriggers__ = !element.removeChild(element.__resizeTriggers__);
+	        } catch (e) {
+	          // Preact compat; see developit/preact-compat/issues/228
 	        }
-	        return (reactExports.createElement)(tagName, {
-	            ref: this._setRef,
-	            style: {
-	                ...outerStyle,
-	                ...style
-	            },
-	            ...rest
-	        }, !bailoutOnChildren && children(childParams));
+	      }
 	    }
+	  };
+	  return {
+	    addResizeListener,
+	    removeResizeListener
+	  };
 	}
 
+	class AutoSizer extends reactExports.Component {
+	  constructor(...args) {
+	    super(...args);
+	    this.state = {
+	      height: this.props.defaultHeight || 0,
+	      scaledHeight: this.props.defaultHeight || 0,
+	      scaledWidth: this.props.defaultWidth || 0,
+	      width: this.props.defaultWidth || 0
+	    };
+	    this._autoSizer = null;
+	    this._detectElementResize = null;
+	    this._parentNode = null;
+	    this._resizeObserver = null;
+	    this._timeoutId = null;
+	    this._onResize = () => {
+	      this._timeoutId = null;
+	      const {
+	        disableHeight,
+	        disableWidth,
+	        onResize
+	      } = this.props;
+	      if (this._parentNode) {
+	        var _style$paddingLeft, _style$paddingRight, _style$paddingTop, _style$paddingBottom;
+	        // Guard against AutoSizer component being removed from the DOM immediately after being added.
+	        // This can result in invalid style values which can result in NaN values if we don't handle them.
+	        // See issue #150 for more context.
+
+	        const style = window.getComputedStyle(this._parentNode) || {};
+	        const paddingLeft = parseFloat((_style$paddingLeft = style.paddingLeft) !== null && _style$paddingLeft !== void 0 ? _style$paddingLeft : "0");
+	        const paddingRight = parseFloat((_style$paddingRight = style.paddingRight) !== null && _style$paddingRight !== void 0 ? _style$paddingRight : "0");
+	        const paddingTop = parseFloat((_style$paddingTop = style.paddingTop) !== null && _style$paddingTop !== void 0 ? _style$paddingTop : "0");
+	        const paddingBottom = parseFloat((_style$paddingBottom = style.paddingBottom) !== null && _style$paddingBottom !== void 0 ? _style$paddingBottom : "0");
+	        const rect = this._parentNode.getBoundingClientRect();
+	        const scaledHeight = rect.height - paddingTop - paddingBottom;
+	        const scaledWidth = rect.width - paddingLeft - paddingRight;
+	        const height = this._parentNode.offsetHeight - paddingTop - paddingBottom;
+	        const width = this._parentNode.offsetWidth - paddingLeft - paddingRight;
+	        if (!disableHeight && (this.state.height !== height || this.state.scaledHeight !== scaledHeight) || !disableWidth && (this.state.width !== width || this.state.scaledWidth !== scaledWidth)) {
+	          this.setState({
+	            height,
+	            width,
+	            scaledHeight,
+	            scaledWidth
+	          });
+	          if (typeof onResize === "function") {
+	            onResize({
+	              height,
+	              scaledHeight,
+	              scaledWidth,
+	              width
+	            });
+	          }
+	        }
+	      }
+	    };
+	    this._setRef = autoSizer => {
+	      this._autoSizer = autoSizer;
+	    };
+	  }
+	  componentDidMount() {
+	    const {
+	      nonce
+	    } = this.props;
+	    if (this._autoSizer && this._autoSizer.parentNode && this._autoSizer.parentNode.ownerDocument && this._autoSizer.parentNode.ownerDocument.defaultView && this._autoSizer.parentNode instanceof this._autoSizer.parentNode.ownerDocument.defaultView.HTMLElement) {
+	      // Delay access of parentNode until mount.
+	      // This handles edge-cases where the component has already been unmounted before its ref has been set,
+	      // As well as libraries like react-lite which have a slightly different lifecycle.
+	      this._parentNode = this._autoSizer.parentNode;
+
+	      // Defer requiring resize handler in order to support server-side rendering.
+	      // See issue #41
+	      if (this._parentNode != null) {
+	        if (typeof ResizeObserver !== "undefined") {
+	          this._resizeObserver = new ResizeObserver(() => {
+	            // Guard against "ResizeObserver loop limit exceeded" error;
+	            // could be triggered if the state update causes the ResizeObserver handler to run long.
+	            // See https://github.com/bvaughn/react-virtualized-auto-sizer/issues/55
+	            this._timeoutId = setTimeout(this._onResize, 0);
+	          });
+	          this._resizeObserver.observe(this._parentNode);
+	        } else {
+	          this._detectElementResize = createDetectElementResize(nonce);
+	          this._detectElementResize.addResizeListener(this._parentNode, this._onResize);
+	        }
+	        this._onResize();
+	      }
+	    }
+	  }
+	  componentWillUnmount() {
+	    if (this._parentNode) {
+	      if (this._detectElementResize) {
+	        this._detectElementResize.removeResizeListener(this._parentNode, this._onResize);
+	      }
+	      if (this._timeoutId !== null) {
+	        clearTimeout(this._timeoutId);
+	      }
+	      if (this._resizeObserver) {
+	        this._resizeObserver.observe(this._parentNode);
+	        this._resizeObserver.disconnect();
+	      }
+	    }
+	  }
+	  render() {
+	    const {
+	      children,
+	      defaultHeight,
+	      defaultWidth,
+	      disableHeight = false,
+	      disableWidth = false,
+	      nonce,
+	      onResize,
+	      style = {},
+	      tagName = "div",
+	      ...rest
+	    } = this.props;
+	    const {
+	      height,
+	      scaledHeight,
+	      scaledWidth,
+	      width
+	    } = this.state;
 
-	var $81c1b644006d48ec$exports = {};
+	    // Outer div should not force width/height since that may prevent containers from shrinking.
+	    // Inner component should overflow and use calculated width/height.
+	    // See issue #68 for more information.
+	    const outerStyle = {
+	      overflow: "visible"
+	    };
+	    const childParams = {};
 
-	$parcel$export($81c1b644006d48ec$exports, "isHeightAndWidthProps", () => $81c1b644006d48ec$export$6a9e233b3261c1f);
-	$parcel$export($81c1b644006d48ec$exports, "isHeightOnlyProps", () => $81c1b644006d48ec$export$232069b3e05ce32a);
-	$parcel$export($81c1b644006d48ec$exports, "isWidthOnlyProps", () => $81c1b644006d48ec$export$10ec32941a097f36);
-	function $81c1b644006d48ec$export$6a9e233b3261c1f(props) {
-	    return props && props.disableHeight !== true && props.disableWidth !== true;
-	}
-	function $81c1b644006d48ec$export$232069b3e05ce32a(props) {
-	    return props && props.disableHeight !== true && props.disableWidth === true;
-	}
-	function $81c1b644006d48ec$export$10ec32941a097f36(props) {
-	    return props && props.disableHeight === true && props.disableWidth !== true;
+	    // Avoid rendering children before the initial measurements have been collected.
+	    // At best this would just be wasting cycles.
+	    let bailoutOnChildren = false;
+	    if (!disableHeight) {
+	      if (height === 0) {
+	        bailoutOnChildren = true;
+	      }
+	      outerStyle.height = 0;
+	      childParams.height = height;
+	      childParams.scaledHeight = scaledHeight;
+	    }
+	    if (!disableWidth) {
+	      if (width === 0) {
+	        bailoutOnChildren = true;
+	      }
+	      outerStyle.width = 0;
+	      childParams.width = width;
+	      childParams.scaledWidth = scaledWidth;
+	    }
+	    return reactExports.createElement(tagName, {
+	      ref: this._setRef,
+	      style: {
+	        ...outerStyle,
+	        ...style
+	      },
+	      ...rest
+	    }, !bailoutOnChildren && children(childParams));
+	  }
 	}
 
-
-	var $149c1bd638913645$export$2e2bcd8739ae039 = ($6e2bb92d9db3b0c8$export$9d94f4ee1d930ff);
-
 	const drillDown = props => _objectSpread2(_objectSpread2({}, props), {}, {
 	  shapes: [{
 	    type: 'path',
@@ -28802,7 +28984,7 @@
 	    className: classes$4.screenReaderOnly
 	  }, translator.get('Listbox.ScreenReaderInstructions')), isInvalid ? /*#__PURE__*/React.createElement(ListBoxError, {
 	    text: errorText
-	  }) : /*#__PURE__*/React.createElement($149c1bd638913645$export$2e2bcd8739ae039, null, _ref5 => {
+	  }) : /*#__PURE__*/React.createElement(AutoSizer, null, _ref5 => {
 	    let {
 	      height,
 	      width
@@ -28810,6 +28992,7 @@
 	    return /*#__PURE__*/React.createElement(ListBox, {
 	      model: model,
 	      app: app,
+	      theme: theme,
 	      constraints: constraints,
 	      layout: layout,
 	      selections: selections,
@@ -29085,6 +29268,14 @@
 	  const [model, setModel] = reactExports.useState();
 	  const [fallbackTitle, setFallbackTitle] = reactExports.useState();
 	  const title = (_options$title = options.title) !== null && _options$title !== void 0 ? _options$title : fallbackTitle;
+	  let {
+	    histogram = false,
+	    frequencyMode = 'N'
+	  } = options;
+	  if (fieldDef && fieldDef.failedToFetchFieldDef) {
+	    histogram = false;
+	    frequencyMode = 'N';
+	  }
 	  reactExports.useEffect(() => {
 	    async function fetchMasterItem() {
 	      try {
@@ -29107,7 +29298,7 @@
 	        throw new Error("Disabling frequency count and histogram: ".concat(e && e.message));
 	      }
 	    }
-	    const isFrequencyMaxNeeded = options.histogram || options.frequencyMode !== 'N';
+	    const isFrequencyMaxNeeded = histogram || frequencyMode !== 'N';
 	    const shouldFetchMasterItem = fieldIdentifier.qLibraryId && isFrequencyMaxNeeded;
 	    if (shouldFetchMasterItem) {
 	      fetchMasterItem();
@@ -29122,31 +29313,6 @@
 	    listLayout,
 	    properties = {}
 	  } = options;
-	  let {
-	    frequencyMode,
-	    histogram = false
-	  } = options;
-	  if (fieldDef && fieldDef.failedToFetchFieldDef) {
-	    histogram = false;
-	    frequencyMode = 'N';
-	  }
-	  switch (true) {
-	    case ['none', 'N', 'NX_FREQUENCY_NONE'].includes(frequencyMode):
-	      frequencyMode = 'N';
-	      break;
-	    case ['value', 'V', 'NX_FREQUENCY_VALUE', 'default'].includes(frequencyMode):
-	      frequencyMode = 'V';
-	      break;
-	    case ['percent', 'P', 'NX_FREQUENCY_PERCENT'].includes(frequencyMode):
-	      frequencyMode = 'P';
-	      break;
-	    case ['relative', 'R', 'NX_FREQUENCY_RELATIVE'].includes(frequencyMode):
-	      frequencyMode = 'R';
-	      break;
-	    default:
-	      frequencyMode = 'N';
-	      break;
-	  }
 	  const getListdefFrequencyMode = () => histogram && frequencyMode === 'N' ? 'V' : frequencyMode;
 	  const layoutOptions = {
 	    dense
@@ -29224,6 +29390,28 @@
 	  };
 	}
 
+	function getFrequencyModeLetter(frequencyMode) {
+	  let freqLetter;
+	  switch (true) {
+	    case ['none', 'N', 'NX_FREQUENCY_NONE'].includes(frequencyMode):
+	      freqLetter = 'N';
+	      break;
+	    case ['value', 'V', 'NX_FREQUENCY_VALUE', 'default'].includes(frequencyMode):
+	      freqLetter = 'V';
+	      break;
+	    case ['percent', 'P', 'NX_FREQUENCY_PERCENT'].includes(frequencyMode):
+	      freqLetter = 'P';
+	      break;
+	    case ['relative', 'R', 'NX_FREQUENCY_RELATIVE'].includes(frequencyMode):
+	      freqLetter = 'R';
+	      break;
+	    default:
+	      freqLetter = 'N';
+	      break;
+	  }
+	  return freqLetter;
+	}
+
 	const _excluded$3 = ["__DO_NOT_USE__"];
 
 	/**
@@ -29286,6 +29474,12 @@
 	    qId,
 	    options
 	  });
+	  if (!isExistingObject) {
+	    Object.assign(options, {
+	      frequencyMode: getFrequencyModeLetter(options.frequencyMode) // stick to letter option hereafter
+	    });
+	  }
+
 	  const [changeCount, setChangeCount] = reactExports.useState(0);
 	  reactExports.useEffect(() => {
 	    if (changeCount) {
@@ -37110,12 +37304,11 @@
 	       * @returns {Promise<object>} The objects properties
 	       * @example
 	       * // generate properties for a barchart
-	       * const properties = await n.create({
+	       * const properties = await n.generateProperties({
 	       *     type: 'barchart',
 	       *     fields: ['Product', { qLibraryId: 'u378hn', type: 'measure' }],
 	       *     properties: { showTitle: true }
 	       *   },
-	       *   true
 	       * );
 	       */
 	      generateProperties: async cfg => createObject(cfg, halo, true),