Fiks posisjonering på velgeren (#118)

* Velger tar valgfri parameter friKomponent

* Bugfix for virksomhetsvelger som enkel komponent

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@navikt/bedriftsmeny",
-    "version": "6.4.1",
+    "version": "6.4.2",
     "description": "Bedriftsvelger og -meny for innlogget arbeidsgiver. Laget av TAG (Tjenester for Arbeidsgivere).",
     "author": "NAVIKT",
     "license": "MIT",

src/bedriftsmeny/Bedriftsmeny.tsx

@@ -31,7 +31,7 @@ const Bedriftsmeny: FunctionComponent<EgneProps> = (props) => {
             tittel={sidetittel}
             undertittel={props.undertittel}
             piktogram={props.piktogram}
-            virksomhetsvelger={<Virksomhetsvelger {...props} />}
+            virksomhetsvelger={<Virksomhetsvelger {...props} friKomponent={false}/>}
             bjelle={props.children}
         />
     );
@@ -43,6 +43,7 @@ export type VirksomhetsvelgerProps = {
     /**
      * Hook som styrer hvordan man skal oppdatere søkeparametere i urlen
      */
+    friKomponent?: boolean;
     orgnrSearchParam?: OrgnrSearchParamType;
     amplitudeClient?: AmplitudeClient;
 }
@@ -78,7 +79,7 @@ export const Virksomhetsvelger = (props: VirksomhetsvelgerProps): ReactElement =
             organisasjonstre={organisasjonstre ?? []}
             onOrganisasjonChange={props.onOrganisasjonChange ?? (() => {})}
         >
-            <Velger />
+            <Velger friKomponent={props.friKomponent ?? true}/>
         </VirksomhetsvelgerProvider>
     </AmplitudeProvider>
 }

src/bedriftsmeny/velger/Dropdown.css

@@ -2,17 +2,20 @@
   display: flex;
   z-index: 999;
   position: absolute;
-  top: 5rem;
-  right: 0;
   margin: 0;
   padding: 0;
+  top: 5rem;
   width: 100%;
   max-width: 30rem;
   border: solid 2px var(--a-deepblue-700);
   border-radius: 4px;
   max-height: 65vh;
 }
 
+.Dropdown-panel-Bedriftsmeny{
+  right: 0;
+}
+
 .Dropdown-panel > * {
   flex-grow: 1;
 }

src/bedriftsmeny/velger/Dropdown.tsx

@@ -3,14 +3,15 @@ import React from "react";
 interface Props {
   children: React.ReactNode,
   ariaLabel: string,
+  friKomponent: boolean,
   erApen: boolean,
 }
 
-const Dropdown = ({erApen, ariaLabel, children}: Props) => {
+const Dropdown = ({erApen, ariaLabel, friKomponent,  children}: Props) => {
   return erApen ? <div
     role='dialog'
     aria-label={ariaLabel}
-    className="Dropdown-panel"
+    className={`Dropdown-panel ${!friKomponent ? "Dropdown-panel-Bedriftsmeny" : ""}`}
   >
     {children}
   </div> : null

src/bedriftsmeny/velger/Virksomhetsvelger.css

@@ -6,7 +6,6 @@
     padding: var(--a-spacing-3) var(--a-spacing-5);
 }
 
-
 .navbm-virksomhetsvelger:active {
     color: white;
 }
@@ -28,6 +27,10 @@
     }
 }
 
+.navbm-virksomhetsvelger-fri-komponent{
+    position: relative;
+}
+
 .navbm-virksomhetsvelger__innhold svg {
     width: 1.25rem;
     height: 1.25rem;

src/bedriftsmeny/velger/Virksomhetsvelger.tsx

@@ -5,6 +5,7 @@ import {Expand, Collapse, Office1, Close} from '@navikt/ds-icons';
 import {VirksomhetsvelgerContext} from './VirksomhetsvelgerProvider';
 import JuridiskEnhet from './JuridiskEnhet';
 import Dropdown from "./Dropdown";
+import {Props} from "react-modal";
 
 export const useKeyboardEvent = (type: 'keydown' | 'keypress' | 'keyup', containerRef: React.RefObject<HTMLElement>, handler: (event: KeyboardEvent) => void) => {
     React.useEffect(() => {
@@ -27,7 +28,7 @@ export const useKeyboardEvent = (type: 'keydown' | 'keypress' | 'keyup', contain
     }, [type, containerRef, handler]);
 }
 
-const Velger = () => {
+const Velger = ({friKomponent} : {friKomponent: boolean} ) => {
     const buttonRef = useRef<HTMLButtonElement>(null);
     const lukkKnappRef = useRef<HTMLButtonElement>(null);
     const søkefeltRef = useRef<HTMLInputElement>(null);
@@ -46,6 +47,7 @@ const Velger = () => {
     const [valgtUnderenhetIntern, velgOrganisasjonIntern] = useState(valgtOrganisasjon)
     const underenheterFlat = aktivtOrganisasjonstre.flatMap(({Underenheter }) => [...Underenheter]);
     const antallTreff = underenheterFlat.length;
+    console.log("friKomponent ", friKomponent)
 
     useKeyboardEvent('keydown', listeRef, (e) => {
         if (e.key === 'Tab') {
@@ -128,7 +130,7 @@ const Velger = () => {
 
 
     return (
-        <div ref={dropdownRef}>
+        <div ref={dropdownRef} className={`${friKomponent ? "navbm-virksomhetsvelger-fri-komponent" : ""}`}>
             <Button
                 className="navbm-virksomhetsvelger"
                 onClick={() => toggleVelger()}
@@ -155,6 +157,7 @@ const Velger = () => {
             </Button>
             <Dropdown
                 ariaLabel="Virksomhetsvelger"
+                friKomponent={friKomponent}
                 erApen={åpen}
             >
                 <div

src/index.tsx

@@ -58,7 +58,7 @@ const App = () => {
                     <p>
                         Her er en annen virksomhetsvelger:
                     </p>
-                    {/*<Virksomhetsvelger organisasjoner={organisasjoner}/>*/}
+                    <Virksomhetsvelger organisasjoner={organisasjoner}/>
 
                 </section>
             </div>