@dvrd/dvr-controls 1.0.56 → 1.0.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dvrd/dvr-controls",
-  "version": "1.0.56",
+  "version": "1.0.57",
   "description": "Custom web controls",
   "main": "index.ts",
   "files": [
@@ -48,7 +48,7 @@
     "@types/react-color": "2.13.5",
     "@types/react-dom": "^18.0.11",
     "@types/uuid": "9.0.0",
-    "classnames": "2.3.2",
+    "classnames": "2.5.1",
     "dompurify": "3.0.0",
     "js-cookie": "3.0.1",
     "lodash.defer": "^4.1.0",

package/src/js/select/dvrdGroupedSelect.tsx

@@ -64,6 +64,13 @@ function DVRDGroupedSelect(props: Props, ref: ForwardedRef<GroupedSelectRef>) {
         if (!selectedItem) return null;
         return selectedItem.valueLabel ?? selectedItem.label ?? '';
     }, [value, items]);
+    const longestValue = useMemo(() => {
+        let longest: string = '';
+        for (const item of items)
+            if (item.label.toString().length > longest.length)
+                longest = item.label.toString();
+        return longest;
+    }, [items]);
     const itemsContainer = useRef<HTMLDivElement>(null);
 
     function onSelectItem(item: GroupedSelectItem) {
@@ -129,6 +136,7 @@ function DVRDGroupedSelect(props: Props, ref: ForwardedRef<GroupedSelectRef>) {
                         {placeholderHidden ? 'placeholder' : placeholder}</label>
                 }
                 <AwesomeIcon name={chevIcon} className='chev-icon'/>
+                <div style={{height: 0, visibility: 'hidden'}}>{longestValue}</div>
             </div>
         );
     }

package/src/js/select/selectController.tsx

@@ -218,7 +218,7 @@ export default class SelectController extends React.Component<SelectProps, State
 
     // noinspection JSUnusedGlobalSymbols
     /**
-     * Function for external components to close the item container.
+     * Function for external component to close the item container.
      */
     closeItems = () => {
         this.setState({itemsOpen: false, isFocused: false});