@norges-domstoler/dds-components 0.0.0-dev-20260114122739 → 0.0.0-dev-20260119151916

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ComponentPropsWithRef, HTMLAttributes, Ref, CSSProperties, ElementType, ComponentPropsWithoutRef, ReactNode, SVGAttributes, JSX, ButtonHTMLAttributes, MouseEventHandler, DependencyList, RefCallback, Dispatch, SetStateAction, ChangeEvent, RefObject, KeyboardEvent as KeyboardEvent$1, ComponentProps, AnchorHTMLAttributes, LabelHTMLAttributes, AriaRole, InputHTMLAttributes, FocusEvent, ForwardedRef, ForwardRefExoticComponent, MouseEvent as MouseEvent$1, ReactElement } from 'react';
+import { ComponentPropsWithRef, ElementType, CSSProperties, Ref, ComponentPropsWithoutRef, HTMLAttributes, ReactNode, SVGAttributes, JSX, ButtonHTMLAttributes, MouseEventHandler, DependencyList, RefCallback, Dispatch, SetStateAction, ChangeEvent, RefObject, KeyboardEvent as KeyboardEvent$1, ComponentProps, AnchorHTMLAttributes, LabelHTMLAttributes, AriaRole, InputHTMLAttributes, FocusEvent, ForwardedRef, ForwardRefExoticComponent, MouseEvent as MouseEvent$1, ReactElement } from 'react';
 import * as CSS from 'csstype';
 import { Property, StandardProperties } from 'csstype';
 import { Strategy, UseFloatingReturn, Placement as Placement$1 } from '@floating-ui/react-dom';
@@ -185,7 +185,7 @@ type ButtonSize = (typeof BUTTON_SIZES)[number];
 type ButtonPurpose = (typeof BUTTON_PURPOSES)[number];
 type IconPosition = 'left' | 'right';
 type PickedHTMLAttributes$4 = Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onFocus' | 'onBlur' | 'type' | 'aria-label'>;
-type ButtonProps<I extends SvgIcon = SvgIcon> = BaseComponentProps<HTMLButtonElement, {
+type ButtonProps<I extends SvgIcon = SvgIcon, T extends ElementType = 'button'> = PolymorphicBaseComponentProps<T, {
     /** Størrelsen på knappen.
      *  @default "medium"
      */
@@ -214,11 +214,7 @@ type ButtonProps<I extends SvgIcon = SvgIcon> = BaseComponentProps<HTMLButtonEle
     iconState?: IconStatesOf<I>;
     /**Knapp med full bredde. */
     fullWidth?: boolean;
-    /**URL for knapper som skal brukes som lenke. Knappen blir til et `<a>`-element. */
-    href?: string;
-    /**Nativt `target`-attributt. Kan settes når knappen er et `<a>`-element.  */
-    target?: string;
-} & PickedHTMLAttributes$4, ButtonHTMLAttributes<HTMLButtonElement>>;
+} & PickedHTMLAttributes$4>;
 
 declare const TEXT_COLORS: readonly ["text-on-action", "text-on-inverse", "text-on-status-default", "text-on-status-strong", "text-action-resting", "text-action-hover", "text-action-visited", "text-default", "text-requiredfield", "text-subtle", "text-medium", "text-on-notification", "text-on-primary-default", "text-on-primary-medium", "text-on-primary-subtle", "text-on-primary-strong", "text-on-secondary-default", "text-on-secondary-medium", "text-on-secondary-subtle", "text-on-secondary-strong", "text-on-tertiary-default", "text-on-tertiary-medium", "text-on-tertiary-subtle", "text-on-tertiary-strong", "text-on-data-default", "text-on-data-subtle", "icon-on-action", "icon-on-info-default", "icon-on-success-default", "icon-on-danger-default", "icon-on-warning-default", "icon-on-info-strong", "icon-on-success-strong", "icon-on-danger-strong", "icon-on-warning-strong", "icon-on-inverse", "icon-action-resting", "icon-action-hover", "icon-default", "icon-subtle", "icon-medium"];
 type DDSTextColor = (typeof TEXT_COLORS)[number];
@@ -254,7 +250,7 @@ declare namespace Icon {
 }
 
 declare const Button: {
-    <I extends SvgIcon>({ children, purpose, size, iconPosition, href, target, loading, loadingTooltip, fullWidth, icon, iconState, onClick, onFocus, onBlur, id, ref, className, style, htmlProps, ...props }: ButtonProps<I>): react_jsx_runtime.JSX.Element | undefined;
+    <I extends SvgIcon, T extends ElementType = "button">({ as: propAs, children, purpose, size, iconPosition, loading, loadingTooltip, fullWidth, icon, iconState, onClick, onFocus, onBlur, id, ref, className, style, htmlProps, ...props }: ButtonProps<I, T>): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -3224,14 +3220,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 +3553,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

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ComponentPropsWithRef, HTMLAttributes, Ref, CSSProperties, ElementType, ComponentPropsWithoutRef, ReactNode, SVGAttributes, JSX, ButtonHTMLAttributes, MouseEventHandler, DependencyList, RefCallback, Dispatch, SetStateAction, ChangeEvent, RefObject, KeyboardEvent as KeyboardEvent$1, ComponentProps, AnchorHTMLAttributes, LabelHTMLAttributes, AriaRole, InputHTMLAttributes, FocusEvent, ForwardedRef, ForwardRefExoticComponent, MouseEvent as MouseEvent$1, ReactElement } from 'react';
+import { ComponentPropsWithRef, ElementType, CSSProperties, Ref, ComponentPropsWithoutRef, HTMLAttributes, ReactNode, SVGAttributes, JSX, ButtonHTMLAttributes, MouseEventHandler, DependencyList, RefCallback, Dispatch, SetStateAction, ChangeEvent, RefObject, KeyboardEvent as KeyboardEvent$1, ComponentProps, AnchorHTMLAttributes, LabelHTMLAttributes, AriaRole, InputHTMLAttributes, FocusEvent, ForwardedRef, ForwardRefExoticComponent, MouseEvent as MouseEvent$1, ReactElement } from 'react';
 import * as CSS from 'csstype';
 import { Property, StandardProperties } from 'csstype';
 import { Strategy, UseFloatingReturn, Placement as Placement$1 } from '@floating-ui/react-dom';
@@ -185,7 +185,7 @@ type ButtonSize = (typeof BUTTON_SIZES)[number];
 type ButtonPurpose = (typeof BUTTON_PURPOSES)[number];
 type IconPosition = 'left' | 'right';
 type PickedHTMLAttributes$4 = Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onFocus' | 'onBlur' | 'type' | 'aria-label'>;
-type ButtonProps<I extends SvgIcon = SvgIcon> = BaseComponentProps<HTMLButtonElement, {
+type ButtonProps<I extends SvgIcon = SvgIcon, T extends ElementType = 'button'> = PolymorphicBaseComponentProps<T, {
     /** Størrelsen på knappen.
      *  @default "medium"
      */
@@ -214,11 +214,7 @@ type ButtonProps<I extends SvgIcon = SvgIcon> = BaseComponentProps<HTMLButtonEle
     iconState?: IconStatesOf<I>;
     /**Knapp med full bredde. */
     fullWidth?: boolean;
-    /**URL for knapper som skal brukes som lenke. Knappen blir til et `<a>`-element. */
-    href?: string;
-    /**Nativt `target`-attributt. Kan settes når knappen er et `<a>`-element.  */
-    target?: string;
-} & PickedHTMLAttributes$4, ButtonHTMLAttributes<HTMLButtonElement>>;
+} & PickedHTMLAttributes$4>;
 
 declare const TEXT_COLORS: readonly ["text-on-action", "text-on-inverse", "text-on-status-default", "text-on-status-strong", "text-action-resting", "text-action-hover", "text-action-visited", "text-default", "text-requiredfield", "text-subtle", "text-medium", "text-on-notification", "text-on-primary-default", "text-on-primary-medium", "text-on-primary-subtle", "text-on-primary-strong", "text-on-secondary-default", "text-on-secondary-medium", "text-on-secondary-subtle", "text-on-secondary-strong", "text-on-tertiary-default", "text-on-tertiary-medium", "text-on-tertiary-subtle", "text-on-tertiary-strong", "text-on-data-default", "text-on-data-subtle", "icon-on-action", "icon-on-info-default", "icon-on-success-default", "icon-on-danger-default", "icon-on-warning-default", "icon-on-info-strong", "icon-on-success-strong", "icon-on-danger-strong", "icon-on-warning-strong", "icon-on-inverse", "icon-action-resting", "icon-action-hover", "icon-default", "icon-subtle", "icon-medium"];
 type DDSTextColor = (typeof TEXT_COLORS)[number];
@@ -254,7 +250,7 @@ declare namespace Icon {
 }
 
 declare const Button: {
-    <I extends SvgIcon>({ children, purpose, size, iconPosition, href, target, loading, loadingTooltip, fullWidth, icon, iconState, onClick, onFocus, onBlur, id, ref, className, style, htmlProps, ...props }: ButtonProps<I>): react_jsx_runtime.JSX.Element | undefined;
+    <I extends SvgIcon, T extends ElementType = "button">({ as: propAs, children, purpose, size, iconPosition, loading, loadingTooltip, fullWidth, icon, iconState, onClick, onFocus, onBlur, id, ref, className, style, htmlProps, ...props }: ButtonProps<I, T>): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -3224,14 +3220,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 +3553,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",
     {
@@ -4361,12 +4357,11 @@ var useButtonGroupContext = () => (0, import_react19.useContext)(ButtonGroupCont
 // src/components/Button/Button.tsx
 var import_jsx_runtime198 = require("react/jsx-runtime");
 var Button = ({
+  as: propAs,
   children,
   purpose = "primary",
   size: size2 = "medium",
   iconPosition = "left",
-  href,
-  target,
   loading,
   loadingTooltip,
   fullWidth = false,
@@ -4379,7 +4374,7 @@ var Button = ({
   ref,
   className,
   style,
-  htmlProps = {},
+  htmlProps,
   ...props
 }) => {
   var _a;
@@ -4433,46 +4428,27 @@ var Button = ({
   ] });
   const rest = props;
   const { disabled: restDisabled, ...restFinal } = rest;
-  const htmlDisabled = htmlProps.disabled;
+  const htmlDisabled = htmlProps == null ? void 0 : htmlProps.disabled;
   const isDisabled = ((_a = restDisabled != null ? restDisabled : htmlDisabled) != null ? _a : loading) === true;
-  if (!href)
-    return /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(
-      "button",
-      {
-        ref,
-        ...getBaseHTMLProps(id, buttonCn, style, htmlProps, restFinal),
-        onClick,
-        onFocus,
-        onBlur,
-        disabled: isDisabled,
-        children: content
-      }
-    );
-  else if (href)
-    return /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(
-      "a",
-      {
-        ref,
-        ...getBaseHTMLProps(
-          id,
-          buttonCn,
-          style,
-          //TODO: fikse types ordentlig
-          htmlProps,
-          props
-        ),
-        onClick: loading ? void 0 : (
-          //TODO: fikse types ordentlig
-          onClick
-        ),
-        onFocus,
-        onBlur,
-        href,
-        rel: "noreferrer noopener",
-        target,
-        children: content
-      }
-    );
+  const as = propAs ? propAs : "button";
+  const isAnchor = as === "a";
+  const aProps = isAnchor ? {
+    rel: "noopener noreferrer"
+  } : {};
+  return /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(
+    ElementAs,
+    {
+      as,
+      ref,
+      ...getBaseHTMLProps(id, buttonCn, style, htmlProps, restFinal),
+      onClick,
+      onFocus,
+      onBlur,
+      disabled: isDisabled,
+      ...aProps,
+      children: content
+    }
+  );
 };
 Button.displayName = "Button";
 var texts2 = createTexts({
@@ -5039,7 +5015,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 +5032,7 @@ var CardExpandable = ({
     bodyContentRef,
     headerProps,
     bodyProps
-  } = useAccordion({ initiallyExpanded: isExpanded, onChange, id });
+  } = useAccordion({ isInitiallyExpanded, isExpanded, onChange, id });
   return /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(
     "div",
     {