@vizzly/dashboard 0.15.0-dev-8918a59c86fe6247b4e6ab94c7292899afc191c9 → 0.15.0-dev-b45c36b267f57597301af4c568315651ecc53893

package/dist/dashboard.esm.js

@@ -24540,6 +24540,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
 
@@ -24573,6 +24581,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,
@@ -24582,7 +24598,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(),
@@ -24669,7 +24685,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 = 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) {
@@ -26000,11 +26019,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 = 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 = useRef(null);
   var _useState = useState({}),
     position = _useState[0],
@@ -29996,7 +30018,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,
@@ -30009,7 +30031,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 = 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 jsx(View, {
@@ -30181,13 +30206,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 = 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 jsx("div", {
     onClick: function onClick() {
@@ -30223,7 +30251,7 @@ var AdvancedDisplayValues = function AdvancedDisplayValues(props) {
           width: 26.5
         })
       }), 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',
@@ -30234,7 +30262,7 @@ var AdvancedDisplayValues = function AdvancedDisplayValues(props) {
         children: 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
         })
       })]
@@ -30525,7 +30553,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 = useRef(undefined);
   var _useDashboardBehaviou = useDashboardBehaviourContext(),
@@ -30665,7 +30693,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 = 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 jsx(View, {
     minWidth: labelWidth + 36,

package/dist/shared-ui/src/components/AdditionalFilter/labelWidth.d.ts

@@ -1,5 +1,13 @@
 import { CSSProperties } from 'react';
 import { VizzlyTheming } from '../../types';
+/**
+ * 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).
+ */
 export declare const calculateTextWidth: (text: string, element: keyof JSX.IntrinsicElements, styles?: {
     fontSize?: CSSProperties['fontSize'];
     fontWeight?: CSSProperties['fontWeight'];
@@ -10,4 +18,11 @@ export declare const getFontProperties: (element: HTMLElement) => {
     fontSize: string;
     letterSpacing: string;
 };
+/**
+ * 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).
+ */
 export declare function calculateLabelWidth(label: string, labelStyles?: VizzlyTheming.Select): number;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vizzly/dashboard",
   "author": "james@vizzly.co",
-  "version": "0.15.0-dev-8918a59c86fe6247b4e6ab94c7292899afc191c9",
+  "version": "0.15.0-dev-b45c36b267f57597301af4c568315651ecc53893",
   "source": "src/index.tsx",
   "types": "./dist/dashboard/src/index.d.ts",
   "module": "./dist/dashboard.esm.js",