@dvrd/dvr-controls 1.0.56 → 1.0.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dvrd/dvr-controls",
-  "version": "1.0.56",
+  "version": "1.0.58",
   "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

@@ -11,7 +11,7 @@ import defer from 'lodash.defer';
 
 
 interface Props {
-    onChange: (value: SelectValueType, evt: React.MouseEvent) => void;
+    onChange: (value: SelectValueType, evt?: React.MouseEvent | React.ChangeEvent) => void;
     items: Array<GroupedSelectItem>;
     value: SelectValueType;
     label?: string;
@@ -64,14 +64,20 @@ 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) {
         return function (evt: React.MouseEvent) {
             evt.stopPropagation();
             if (item.value !== undefined) {
-                if (item.value !== value)
-                    onChange(item.value, evt);
+                onChange(item.value, evt);
                 onToggleOpen(false);
             }
         }
@@ -129,6 +135,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});