@norges-domstoler/dds-components 0.0.0-dev-20260112140706 → 0.0.0-dev-20260119083800

package/dist/index.d.mts

@@ -3224,14 +3224,28 @@ type PropsOfWithRef<T extends ElementType> = ComponentPropsWithRef<T> & {
 type PolymorphicProps<T extends ElementType> = PropsOfWithRef<T>;
 declare const ElementAs: <T extends ElementType>({ as, ref, children, ...props }: PolymorphicProps<T>) => react_jsx_runtime.JSX.Element;
 
-type AccordionProps = BaseComponentPropsWithChildren<HTMLDivElement, {
-    /**Spesifiserer om body skal være utvidet ved innlastning. */
+interface AccordionConfig {
+    /**
+     * Ukontrollerttilstand: om utvidbare delen skal være utvidet ved første render.
+     */
+    isInitiallyExpanded?: boolean;
+    /**
+     * Kontrollert tilstand: om utvidbare delen er utvidet.
+     */
     isExpanded?: boolean;
-    /**For å lytte til endringer i expanded-state. */
+    /**
+     * Callback når tilstanden endres.
+     */
     onChange?: (expanded: boolean) => void;
-}>;
+    /**
+     * Custom id for accordion; delene får i tillegg suffix `'header'` og `'body'`.
+     */
+    id?: string;
+}
+
+type AccordionProps = BaseComponentPropsWithChildren<HTMLDivElement, Pick<AccordionConfig, 'isExpanded' | 'isInitiallyExpanded' | 'onChange'>>;
 declare const Accordion: {
-    ({ isExpanded, onChange, id, children, className, style, htmlProps, ...rest }: AccordionProps): react_jsx_runtime.JSX.Element;
+    ({ isInitiallyExpanded, isExpanded, onChange, id, children, className, style, htmlProps, ...rest }: AccordionProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -3543,14 +3557,9 @@ declare const Card: {
     displayName: string;
 };
 
-type CardExpandableProps = BaseComponentPropsWithChildren<HTMLDivElement, {
-    /**Spesifiserer om body skal være utvidet ved innlastning. */
-    isExpanded?: boolean;
-    /**For å lytte til endringer i expanded-state. */
-    onChange?: (expanded: boolean) => void;
-}>;
+type CardExpandableProps = BaseComponentPropsWithChildren<HTMLDivElement, Pick<AccordionConfig, 'isExpanded' | 'isInitiallyExpanded' | 'onChange'>>;
 declare const CardExpandable: {
-    ({ isExpanded, onChange, id, children, className, style, htmlProps, ...rest }: CardExpandableProps): react_jsx_runtime.JSX.Element;
+    ({ isInitiallyExpanded, isExpanded, onChange, id, children, className, style, htmlProps, ...rest }: CardExpandableProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/index.d.ts

@@ -3224,14 +3224,28 @@ type PropsOfWithRef<T extends ElementType> = ComponentPropsWithRef<T> & {
 type PolymorphicProps<T extends ElementType> = PropsOfWithRef<T>;
 declare const ElementAs: <T extends ElementType>({ as, ref, children, ...props }: PolymorphicProps<T>) => react_jsx_runtime.JSX.Element;
 
-type AccordionProps = BaseComponentPropsWithChildren<HTMLDivElement, {
-    /**Spesifiserer om body skal være utvidet ved innlastning. */
+interface AccordionConfig {
+    /**
+     * Ukontrollerttilstand: om utvidbare delen skal være utvidet ved første render.
+     */
+    isInitiallyExpanded?: boolean;
+    /**
+     * Kontrollert tilstand: om utvidbare delen er utvidet.
+     */
     isExpanded?: boolean;
-    /**For å lytte til endringer i expanded-state. */
+    /**
+     * Callback når tilstanden endres.
+     */
     onChange?: (expanded: boolean) => void;
-}>;
+    /**
+     * Custom id for accordion; delene får i tillegg suffix `'header'` og `'body'`.
+     */
+    id?: string;
+}
+
+type AccordionProps = BaseComponentPropsWithChildren<HTMLDivElement, Pick<AccordionConfig, 'isExpanded' | 'isInitiallyExpanded' | 'onChange'>>;
 declare const Accordion: {
-    ({ isExpanded, onChange, id, children, className, style, htmlProps, ...rest }: AccordionProps): react_jsx_runtime.JSX.Element;
+    ({ isInitiallyExpanded, isExpanded, onChange, id, children, className, style, htmlProps, ...rest }: AccordionProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -3543,14 +3557,9 @@ declare const Card: {
     displayName: string;
 };
 
-type CardExpandableProps = BaseComponentPropsWithChildren<HTMLDivElement, {
-    /**Spesifiserer om body skal være utvidet ved innlastning. */
-    isExpanded?: boolean;
-    /**For å lytte til endringer i expanded-state. */
-    onChange?: (expanded: boolean) => void;
-}>;
+type CardExpandableProps = BaseComponentPropsWithChildren<HTMLDivElement, Pick<AccordionConfig, 'isExpanded' | 'isInitiallyExpanded' | 'onChange'>>;
 declare const CardExpandable: {
-    ({ isExpanded, onChange, id, children, className, style, htmlProps, ...rest }: CardExpandableProps): react_jsx_runtime.JSX.Element;
+    ({ isInitiallyExpanded, isExpanded, onChange, id, children, className, style, htmlProps, ...rest }: CardExpandableProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/index.js

@@ -3581,32 +3581,27 @@ var AccordionBase_default = {
 
 // src/components/helpers/AccordionBase/useAccordion.tsx
 var useAccordion = ({
-  initiallyExpanded = false,
+  isInitiallyExpanded = false,
+  isExpanded: isExpandedProp,
   onChange,
   id
 }) => {
   var _a;
-  const [isExpanded, setIsExpanded] = (0, import_react17.useState)(initiallyExpanded);
+  const [isExpanded, setIsExpanded] = useControllableState({
+    onChange,
+    defaultValue: isInitiallyExpanded,
+    value: isExpandedProp
+  });
   const generatedId = (0, import_react17.useId)();
   const accordionId = id != null ? id : `${generatedId}-accordion`;
-  const openAccordion = () => {
-    setIsExpanded(true);
-  };
-  const closeAccordion = () => {
-    setIsExpanded(false);
-  };
-  (0, import_react17.useEffect)(() => {
-    setIsExpanded(isExpanded);
-  }, [isExpanded]);
+  const openAccordion = (0, import_react17.useCallback)(() => setIsExpanded(true), [setIsExpanded]);
+  const closeAccordion = (0, import_react17.useCallback)(
+    () => setIsExpanded(false),
+    [setIsExpanded]
+  );
   const toggleExpanded = (0, import_react17.useCallback)(() => {
-    setIsExpanded((prevExpanded) => {
-      const newExpanded = !prevExpanded;
-      if (onChange) {
-        onChange(newExpanded);
-      }
-      return newExpanded;
-    });
-  }, [onChange]);
+    setIsExpanded((prev) => !prev);
+  }, [setIsExpanded]);
   const bodyContentRef = (0, import_react17.useRef)(null);
   const [animate, setAnimate] = (0, import_react17.useState)(false);
   const isMounted = useIsMounted();
@@ -3676,7 +3671,8 @@ var useAccordionContext = () => {
 // src/components/Accordion/Accordion.tsx
 var import_jsx_runtime185 = require("react/jsx-runtime");
 var Accordion = ({
-  isExpanded = false,
+  isInitiallyExpanded = false,
+  isExpanded,
   onChange,
   id,
   children,
@@ -3692,7 +3688,7 @@ var Accordion = ({
     bodyContentRef,
     headerProps,
     bodyProps
-  } = useAccordion({ initiallyExpanded: isExpanded, onChange, id });
+  } = useAccordion({ isInitiallyExpanded, isExpanded, onChange, id });
   return /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
     "div",
     {
@@ -5039,7 +5035,8 @@ var CardExpandable_default = {
 // src/components/Card/CardExpandable/CardExpandable.tsx
 var import_jsx_runtime212 = require("react/jsx-runtime");
 var CardExpandable = ({
-  isExpanded = false,
+  isInitiallyExpanded = false,
+  isExpanded,
   onChange,
   id,
   children,
@@ -5055,7 +5052,7 @@ var CardExpandable = ({
     bodyContentRef,
     headerProps,
     bodyProps
-  } = useAccordion({ initiallyExpanded: isExpanded, onChange, id });
+  } = useAccordion({ isInitiallyExpanded, isExpanded, onChange, id });
   return /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(
     "div",
     {