@vizzly/dashboard 0.15.0-dev-8918a59c86fe6247b4e6ab94c7292899afc191c9 → 0.15.0-dev-0a70ef71157ea073e1a17a7c5163d6dc2e42a7e8

package/dist/dashboard.cjs.development.js

@@ -24512,6 +24512,14 @@ var asyncLoadFilterOptions = function asyncLoadFilterOptions(filter, runQueriesC
   }();
 };
 
+/**
+ * Calculates the width of the given text by creating a temporary HTML element and measuring its offsetWidth.
+ * @param text - The text string to measure.
+ * @param element - The HTML element type to use for measurement (e.g., 'span').
+ * @param styles - Optional styling properties, including fontSize and fontWeight.
+ * @returns The calculated width of the text in pixels.
+ * OBS: For every function call you should use useMemo to avoid infinitely re-renders (especially in Google Chrome).
+ */
 var calculateTextWidth = function calculateTextWidth(text, element, styles) {
   // Create a temporary HTML element to measure the width
 
@@ -24545,6 +24553,14 @@ var calculateTextWidth = function calculateTextWidth(text, element, styles) {
   document.body.removeChild(wrapperDiv);
   return textWidth;
 };
+
+/**
+ * Calculates the width of a label text, ensuring a minimum width.
+ * @param label - The text label to measure.
+ * @param labelStyles - Optional styling properties from the theme, including fontSize and fontWeight.
+ * @returns The calculated width in pixels, with a minimum of 124 (100 + 24 for padding).
+ * OBS: For every function call you should use useMemo to avoid infinitely re-renders (especially in Google Chrome).
+ */
 function calculateLabelWidth(label, labelStyles) {
   var calculateLabelWidth = calculateTextWidth(label, 'span', {
     fontSize: labelStyles == null ? void 0 : labelStyles.fontSize,
@@ -24554,7 +24570,7 @@ function calculateLabelWidth(label, labelStyles) {
 }
 
 var AdditionalSingleSelectFilter = function AdditionalSingleSelectFilter(props) {
-  var _theme$forms, _props$filter$title;
+  var _theme$forms2, _props$filter$title;
   var _useDashboardContext = useDashboardContext(),
     runQueriesCallback = _useDashboardContext.runQueriesCallback;
   var _useDashboardBehaviou = useDashboardBehaviourContext(),
@@ -24641,7 +24657,10 @@ var AdditionalSingleSelectFilter = function AdditionalSingleSelectFilter(props)
     prevFilterRef.current = filter.optionsFilters;
   }, [filter.optionsFilters]);
   var label = getTitle(filter, dataSets, textOverride);
-  var labelWidth = calculateLabelWidth(label, theme == null || (_theme$forms = theme.forms) == null ? void 0 : _theme$forms.select);
+  var labelWidth = React.useMemo(function () {
+    var _theme$forms;
+    return calculateLabelWidth(label, theme == null || (_theme$forms = theme.forms) == null ? void 0 : _theme$forms.select);
+  }, [label, theme == null || (_theme$forms2 = theme.forms) == null ? void 0 : _theme$forms2.select]);
   if (props.filter.hidden) return null;
   var currentValue = function () {
     if (valueAlias) {
@@ -25972,11 +25991,14 @@ var Modal = /*#__PURE__*/Object.assign(BaseModal, {
 });
 
 var AdvancedPicker = function AdvancedPicker(props) {
-  var _theme$forms, _theme$modals;
+  var _theme$forms2, _theme$modals;
   var theme = useTheme();
   var _useDashboardBehaviou = useDashboardBehaviourContext(),
     featureToggles = _useDashboardBehaviou.featureToggles;
-  var labelWidth = calculateLabelWidth(props.label, theme == null || (_theme$forms = theme.forms) == null ? void 0 : _theme$forms.select);
+  var labelWidth = React.useMemo(function () {
+    var _theme$forms;
+    return calculateLabelWidth(props.label, theme == null || (_theme$forms = theme.forms) == null ? void 0 : _theme$forms.select);
+  }, [props.label, theme == null || (_theme$forms2 = theme.forms) == null ? void 0 : _theme$forms2.select]);
   var inputRef = React.useRef(null);
   var _useState = React.useState({}),
     position = _useState[0],
@@ -29965,7 +29987,7 @@ function buildDateTimePayload(type, filter, value) {
 }
 
 var DateFilter$1 = function DateFilter(props) {
-  var _theme$forms, _props$filter$title;
+  var _theme$forms2, _props$filter$title;
   var theme = useTheme();
   var _useDashboardBehaviou = useDashboardBehaviourContext(),
     textOverride = _useDashboardBehaviou.textOverride,
@@ -29978,7 +30000,10 @@ var DateFilter$1 = function DateFilter(props) {
     showClearBtn = props.showClearBtn,
     type = props.type;
   var label = getTitle(filter, dataSets, textOverride);
-  var labelWidth = calculateLabelWidth(label, theme == null || (_theme$forms = theme.forms) == null ? void 0 : _theme$forms.select);
+  var labelWidth = React.useMemo(function () {
+    var _theme$forms;
+    return calculateLabelWidth(label, theme == null || (_theme$forms = theme.forms) == null ? void 0 : _theme$forms.select);
+  }, [label, theme == null || (_theme$forms2 = theme.forms) == null ? void 0 : _theme$forms2.select]);
   var isDateTimeFilter = !!(type === DATE_FILTER && 'allowTimeSelection' in filter && filter.allowTimeSelection);
   if (props.filter.hidden) return null;
   return jsxRuntime.jsx(View, {
@@ -30150,13 +30175,16 @@ var DisplayChips = function DisplayChips(_ref) {
 };
 
 var AdvancedDisplayValues = function AdvancedDisplayValues(props) {
-  var _props$label, _theme$forms, _theme$forms2, _props$label2, _theme$forms3, _theme$forms4;
+  var _theme$forms3, _theme$forms4, _props$label2, _theme$forms5, _theme$forms6;
   var theme = useTheme();
   var showSelect = props.pickerOpen || !props.defined;
-  var textWidth = calculateTextWidth((_props$label = props == null ? void 0 : props.label) != null ? _props$label : '', 'label', {
-    fontSize: theme == null || (_theme$forms = theme.forms) == null || (_theme$forms = _theme$forms.input) == null ? void 0 : _theme$forms.fontSize,
-    fontWeight: theme == null || (_theme$forms2 = theme.forms) == null || (_theme$forms2 = _theme$forms2.input) == null ? void 0 : _theme$forms2.fontWeight
-  });
+  var textWidth = React.useMemo(function () {
+    var _props$label, _theme$forms, _theme$forms2;
+    return calculateTextWidth((_props$label = props == null ? void 0 : props.label) != null ? _props$label : '', 'label', {
+      fontSize: theme == null || (_theme$forms = theme.forms) == null || (_theme$forms = _theme$forms.input) == null ? void 0 : _theme$forms.fontSize,
+      fontWeight: theme == null || (_theme$forms2 = theme.forms) == null || (_theme$forms2 = _theme$forms2.input) == null ? void 0 : _theme$forms2.fontWeight
+    });
+  }, [props.label, theme == null || (_theme$forms3 = theme.forms) == null || (_theme$forms3 = _theme$forms3.input) == null ? void 0 : _theme$forms3.fontSize, theme == null || (_theme$forms4 = theme.forms) == null || (_theme$forms4 = _theme$forms4.input) == null ? void 0 : _theme$forms4.fontWeight]);
   var chips = getChips(props.filter, props.type, props.filter.options);
   return jsxRuntime.jsx("div", {
     onClick: function onClick() {
@@ -30192,7 +30220,7 @@ var AdvancedDisplayValues = function AdvancedDisplayValues(props) {
           width: 26.5
         })
       }), jsxRuntime.jsx("div", {
-        className: joinClassNames(selectControlsStyles.arrowContainer(theme == null || (_theme$forms3 = theme.forms) == null ? void 0 : _theme$forms3.select, 26.5)({
+        className: joinClassNames(selectControlsStyles.arrowContainer(theme == null || (_theme$forms5 = theme.forms) == null ? void 0 : _theme$forms5.select, 26.5)({
           subtle: 'off'
         }), styles({
           position: 'absolute',
@@ -30203,7 +30231,7 @@ var AdvancedDisplayValues = function AdvancedDisplayValues(props) {
         children: jsxRuntime.jsx(ArrowButton, {
           label: "open",
           arrowStart: "up",
-          styled: theme == null || (_theme$forms4 = theme.forms) == null ? void 0 : _theme$forms4.select,
+          styled: theme == null || (_theme$forms6 = theme.forms) == null ? void 0 : _theme$forms6.select,
           expanded: showSelect
         })
       })]
@@ -30494,7 +30522,7 @@ var Form = function Form(props) {
 };
 
 var MultiSelectFilter = function MultiSelectFilter(props) {
-  var _theme$forms, _filter$value, _filter$value2, _filter$value3;
+  var _theme$forms2, _filter$value, _filter$value2, _filter$value3;
   var theme = useTheme();
   var prevFilterRef = React.useRef(undefined);
   var _useDashboardBehaviou = useDashboardBehaviourContext(),
@@ -30634,7 +30662,10 @@ var MultiSelectFilter = function MultiSelectFilter(props) {
     }
     prevFilterRef.current = filter.optionsFilters;
   }, [filter.optionsFilters]);
-  var labelWidth = calculateLabelWidth(label, theme == null || (_theme$forms = theme.forms) == null ? void 0 : _theme$forms.select);
+  var labelWidth = React.useMemo(function () {
+    var _theme$forms;
+    return calculateLabelWidth(label, theme == null || (_theme$forms = theme.forms) == null ? void 0 : _theme$forms.select);
+  }, [label, theme == null || (_theme$forms2 = theme.forms) == null ? void 0 : _theme$forms2.select]);
   if (props.filter.hidden) return null;
   return jsxRuntime.jsx(View, {
     minWidth: labelWidth + 36,