grep-components 2.3.0 → 2.4.0-GREPF-2436-test.1

package/dist/build/components/GrepSelect/index.d.ts

@@ -13,6 +13,8 @@ export type GrepSelectProps = SelectProps & {
     errorMessage?: string;
     selectItems: SelectItem[];
     unselectOption?: boolean;
+    unselectOptionBottom?: boolean;
+    defaultHighlight?: string;
     useCheckedSelect?: boolean;
     inputProps?: InputBaseComponentProps | undefined;
 };

package/dist/index.js

@@ -2646,7 +2646,8 @@ const GrepSelect = (props) => {
     React.useEffect(() => {
         setLabelWidth(inputLabel.current.offsetWidth);
     }, []);
-    const { unselectOption = true, errorMessage, selectItems, helperText, fullWidth, outlined, disabled, required, label, inputProps, value, size, id, useCheckedSelect, ...rest } = props;
+    const { unselectOption = true, unselectOptionBottom = false, defaultHighlight = '', errorMessage, selectItems, helperText, fullWidth, outlined, disabled, required, label, inputProps, value, size, id, useCheckedSelect, ...rest } = props;
+    const [highlightValue, setHighlightValue] = React.useState('');
     const error = errorMessage ? errorMessage.length > 0 : false;
     const selected = value;
     return (React.createElement(FormControl, { variant: outlined ? 'outlined' : 'standard', className: props.className, fullWidth: fullWidth, required: required, style: props.style, error: error, size: size, disabled: disabled },
@@ -2654,7 +2655,29 @@ const GrepSelect = (props) => {
                 minWidth: 'max-content',
                 overflow: 'visible',
             } }, label),
-        React.createElement(Select, { ...rest, inputProps: { id, ...inputProps }, disabled: !selectItems || disabled, value: value === null ? '' : value, style: { minWidth: labelWidth + (outlined ? 35 : 25) }, 
+        React.createElement(Select, { ...rest, inputProps: { id, ...inputProps }, onOpen: (e) => {
+                if (highlightValue) {
+                    props.onOpen && props.onOpen(e);
+                    return;
+                }
+                if (selectItems.length > 0 && defaultHighlight !== '') {
+                    const index = selectItems.findIndex((e) => e.value === defaultHighlight);
+                    if (index >= 0) {
+                        setHighlightValue(defaultHighlight);
+                    }
+                }
+                props.onOpen && props.onOpen(e);
+            }, onChange: (e, c) => {
+                //console.log(highlightValue, e.target.value);
+                if (highlightValue === e.target.value) {
+                    setHighlightValue('');
+                    //console.log('asdlfjlasfjlkasd');
+                }
+                else {
+                    setHighlightValue(e.target.value);
+                }
+                props.onChange && props.onChange(e, c);
+            }, disabled: !selectItems || disabled, value: value || highlightValue, style: { minWidth: labelWidth + (outlined ? 35 : 25) }, 
             // @todo: make input respect label length
             input: outlined ? React.createElement(OutlinedInput, { label: label }) : React.createElement(Input, null), MenuProps: {
                 ...rest.MenuProps,
@@ -2671,7 +2694,9 @@ const GrepSelect = (props) => {
                 React.createElement("em", null, "Fjern valgt"))),
             selectItems.map(({ label, value, disabled, lang }, i) => (React.createElement(MenuItem$1, { key: i, value: value, disabled: disabled, lang: lang },
                 useCheckedSelect && (React.createElement(Checkbox, { checked: selected?.indexOf(value) > -1 })),
-                React.createElement(ListItemText, { sx: { margin: '0px', span: { lineHeight: '1.4375em' } }, primary: label ? label : value }))))),
+                React.createElement(ListItemText, { sx: { margin: '0px', span: { lineHeight: '1.4375em' } }, primary: label ? label : value })))),
+            unselectOptionBottom && (React.createElement(MenuItem$1, { value: "" },
+                React.createElement("em", null, "Fjern valgt")))),
         React.createElement(FormHelperText, null, errorMessage || helperText)));
 };