@dvrd/dvr-controls 1.0.55 → 1.0.57

package/package.json

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

@@ -29,7 +29,7 @@ interface Props {
     placeholder?: string;
 }
 
-export type GroupedSelectRef = { open: VoidFunction; close: VoidFunction; }
+export type GroupedSelectRef = { open: VoidFunction; close: VoidFunction; toggle: (forcedValue?: boolean) => void };
 
 function findInItems(items: Array<GroupedSelectItem>, value: string | number): GroupedSelectItem | null {
     for (const item of items) {
@@ -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>
         );
     }
@@ -200,7 +208,7 @@ function DVRDGroupedSelect(props: Props, ref: ForwardedRef<GroupedSelectRef>) {
     }, [open]);
 
     useImperativeHandle(ref, () => ({
-        open: onOpen, close: onClose
+        open: onOpen, close: onClose, toggle: onToggleOpen
     }));
 
     return (

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});

package/src/js/select/style/dvrdGroupedSelect.scss

@@ -34,7 +34,6 @@
       background-color: white;
 
       .grouped-select-placeholder, .grouped-select-value {
-        font-family: avenir-light, sans-serif;
         user-select: none;
         vertical-align: middle;
       }
@@ -63,7 +62,7 @@
       background-color: white;
       position: absolute;
       left: 1px;
-      width: calc(100% - 2px);
+      min-width: calc(100% - 2px);
       transition: visibility .2s ease-in-out, opacity .2s ease-in-out;
       visibility: hidden;
       opacity: 0;