diff --git a/.changeset/curvy-ducks-battle.md b/.changeset/curvy-ducks-battle.md new file mode 100644 index 00000000000..d6fb4e16fc5 --- /dev/null +++ b/.changeset/curvy-ducks-battle.md @@ -0,0 +1,5 @@ +--- +"@navikt/ds-react": patch +--- + +Switch: Fikset edgecase der checked Switch var visuelt unchecked diff --git a/@navikt/core/react/src/expansion-card/ExpansionCard.tsx b/@navikt/core/react/src/expansion-card/ExpansionCard.tsx index 7416bfe46ca..64b1dc66527 100644 --- a/@navikt/core/react/src/expansion-card/ExpansionCard.tsx +++ b/@navikt/core/react/src/expansion-card/ExpansionCard.tsx @@ -1,5 +1,6 @@ import cl from "clsx"; -import React, { forwardRef, useRef, useState } from "react"; +import React, { forwardRef, useRef } from "react"; +import { useControllableState } from "../util/hooks"; import { OverridableComponent } from "../util/types"; import ExpansionCardContent, { ExpansionCardContentProps, @@ -116,24 +117,24 @@ export const ExpansionCard = forwardRef( }, ref, ) => { - const [_open, _setOpen] = useState(defaultOpen); - const shouldFade = useRef(!(Boolean(open) || defaultOpen)); - const handleOpen = () => { - if (open === undefined) { - const newOpen = !_open; - _setOpen(newOpen); - onToggle?.(newOpen); - } else { - onToggle?.(!open); - } - shouldFade.current = true; - }; + const [_open, _setOpen] = useControllableState({ + value: open, + onChange: (newValue) => { + onToggle?.(newValue); + shouldFade.current = true; + }, + defaultValue: defaultOpen, + }); return ( _setOpen((x) => !x), + size, + }} >
( ...rest } = props; - const [checked, setChecked] = useState( + const [_checked, setChecked] = useState( defaultChecked ?? checkedProp ?? false, ); @@ -93,6 +93,8 @@ export const Switch = forwardRef( checkedProp !== undefined && setChecked(checkedProp); }, [checkedProp]); + const checked = checkedProp ?? _checked; + return (