@digdir/designsystemet-react 1.0.0-next.34 → 1.0.0-next.36

package/dist/types/utilities/hooks/useRadioGroup/useRadioGroup.d.ts

@@ -0,0 +1,365 @@
+import type { ReactNode } from 'react';
+export type UseRadioGroupProps = {
+    /** Set disabled state of all radios */
+    disabled?: boolean;
+    /** Shared error message for all radios */
+    error?: ReactNode;
+    /** Name of all radios.
+     * @default string of auto-generated name
+     */
+    name?: string;
+    /** Set read only state of all radios */
+    readOnly?: boolean;
+    /** Set required state of all radios */
+    required?: boolean;
+    /**
+     * Initial value of the group
+     */
+    value?: string;
+    /** Callback when selected radios changes */
+    onChange?: (nextValue: string, prevValue: string) => void;
+};
+/**
+ * Get anything that is set on a radio, but
+ * remove anything that comes from the group itself.
+ */
+export type GetRadioProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix' | 'role' | 'type' | 'size' | 'aria-label' | 'aria-labelledby' | 'label' | 'name' | 'checked' | 'value'> & {
+    ref?: React.RefObject<HTMLInputElement>;
+    value?: string;
+};
+/**
+ * useRadioGroup is used to group multiple <Radio> components
+ * @example
+ * const { getRadioProps, validationMessageProps, value, setValue } = useRadioGroup({
+ *   disabled: false,
+ *   error: 'Validation message text',
+ *   name: 'group-name',
+ *   onChange: (nextValue, prevValue) => {},
+ *   readOnly: false,
+ *   required: true,
+ *   value: '',
+ * });
+ */
+export declare function useRadioGroup({ error, readOnly, required, disabled, name, onChange, value: initalValue, }?: UseRadioGroupProps): {
+    /**
+     * Current value of the group.
+     */
+    value: string;
+    /**
+     * Set the value of the group.
+     *
+     * @param value string[]
+     * @returns void
+     */
+    setValue: React.Dispatch<React.SetStateAction<string>>;
+    /**
+     * Props to send to the `Radio` component.
+     * @example
+     * <Radio label="Option 1" {...getRadioProps('option-1')} />
+     */
+    getRadioProps: (propsOrValue: string | GetRadioProps) => {
+        name: string;
+        'aria-describedby': string | undefined;
+        'aria-invalid': boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+        value: string;
+        ref: ((instance: HTMLInputElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null;
+        required: boolean | undefined;
+        readOnly: boolean | undefined;
+        disabled: boolean | undefined;
+        onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+        defaultValue?: string | number | readonly string[] | undefined;
+        onBlur?: React.FocusEventHandler<HTMLInputElement> | undefined;
+        onFocus?: React.FocusEventHandler<HTMLInputElement> | undefined;
+        children?: ReactNode | undefined;
+        defaultChecked?: boolean | undefined;
+        suppressContentEditableWarning?: boolean | undefined;
+        suppressHydrationWarning?: boolean | undefined;
+        accessKey?: string | undefined;
+        autoFocus?: boolean | undefined;
+        className?: string | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+        contextMenu?: string | undefined;
+        dir?: string | undefined;
+        draggable?: (boolean | "true" | "false") | undefined;
+        hidden?: boolean | undefined;
+        id?: string | undefined;
+        lang?: string | undefined;
+        nonce?: string | undefined;
+        slot?: string | undefined;
+        spellCheck?: (boolean | "true" | "false") | undefined;
+        style?: React.CSSProperties | undefined;
+        tabIndex?: number | undefined;
+        title?: string | undefined;
+        translate?: "yes" | "no" | undefined;
+        radioGroup?: string | undefined;
+        about?: string | undefined;
+        content?: string | undefined;
+        datatype?: string | undefined;
+        inlist?: any;
+        property?: string | undefined;
+        rel?: string | undefined;
+        resource?: string | undefined;
+        rev?: string | undefined;
+        typeof?: string | undefined;
+        vocab?: string | undefined;
+        autoCapitalize?: string | undefined;
+        autoCorrect?: string | undefined;
+        autoSave?: string | undefined;
+        color?: string | undefined;
+        itemProp?: string | undefined;
+        itemScope?: boolean | undefined;
+        itemType?: string | undefined;
+        itemID?: string | undefined;
+        itemRef?: string | undefined;
+        results?: number | undefined;
+        security?: string | undefined;
+        unselectable?: "on" | "off" | undefined;
+        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
+        is?: string | undefined;
+        popovertarget?: string | undefined;
+        "aria-activedescendant"?: string | undefined;
+        "aria-atomic"?: (boolean | "true" | "false") | undefined;
+        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
+        "aria-braillelabel"?: string | undefined;
+        "aria-brailleroledescription"?: string | undefined;
+        "aria-busy"?: (boolean | "true" | "false") | undefined;
+        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
+        "aria-colcount"?: number | undefined;
+        "aria-colindex"?: number | undefined;
+        "aria-colindextext"?: string | undefined;
+        "aria-colspan"?: number | undefined;
+        "aria-controls"?: string | undefined;
+        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
+        "aria-description"?: string | undefined;
+        "aria-details"?: string | undefined;
+        "aria-disabled"?: (boolean | "true" | "false") | undefined;
+        "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
+        "aria-errormessage"?: string | undefined;
+        "aria-expanded"?: (boolean | "true" | "false") | undefined;
+        "aria-flowto"?: string | undefined;
+        "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+        "aria-hidden"?: (boolean | "true" | "false") | undefined;
+        "aria-keyshortcuts"?: string | undefined;
+        "aria-level"?: number | undefined;
+        "aria-live"?: "off" | "assertive" | "polite" | undefined;
+        "aria-modal"?: (boolean | "true" | "false") | undefined;
+        "aria-multiline"?: (boolean | "true" | "false") | undefined;
+        "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+        "aria-orientation"?: "horizontal" | "vertical" | undefined;
+        "aria-owns"?: string | undefined;
+        "aria-placeholder"?: string | undefined;
+        "aria-posinset"?: number | undefined;
+        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
+        "aria-readonly"?: (boolean | "true" | "false") | undefined;
+        "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
+        "aria-required"?: (boolean | "true" | "false") | undefined;
+        "aria-roledescription"?: string | undefined;
+        "aria-rowcount"?: number | undefined;
+        "aria-rowindex"?: number | undefined;
+        "aria-rowindextext"?: string | undefined;
+        "aria-rowspan"?: number | undefined;
+        "aria-selected"?: (boolean | "true" | "false") | undefined;
+        "aria-setsize"?: number | undefined;
+        "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+        "aria-valuemax"?: number | undefined;
+        "aria-valuemin"?: number | undefined;
+        "aria-valuenow"?: number | undefined;
+        "aria-valuetext"?: string | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined;
+        onCopy?: React.ClipboardEventHandler<HTMLInputElement> | undefined;
+        onCopyCapture?: React.ClipboardEventHandler<HTMLInputElement> | undefined;
+        onCut?: React.ClipboardEventHandler<HTMLInputElement> | undefined;
+        onCutCapture?: React.ClipboardEventHandler<HTMLInputElement> | undefined;
+        onPaste?: React.ClipboardEventHandler<HTMLInputElement> | undefined;
+        onPasteCapture?: React.ClipboardEventHandler<HTMLInputElement> | undefined;
+        onCompositionEnd?: React.CompositionEventHandler<HTMLInputElement> | undefined;
+        onCompositionEndCapture?: React.CompositionEventHandler<HTMLInputElement> | undefined;
+        onCompositionStart?: React.CompositionEventHandler<HTMLInputElement> | undefined;
+        onCompositionStartCapture?: React.CompositionEventHandler<HTMLInputElement> | undefined;
+        onCompositionUpdate?: React.CompositionEventHandler<HTMLInputElement> | undefined;
+        onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLInputElement> | undefined;
+        onFocusCapture?: React.FocusEventHandler<HTMLInputElement> | undefined;
+        onBlurCapture?: React.FocusEventHandler<HTMLInputElement> | undefined;
+        onChangeCapture?: React.FormEventHandler<HTMLInputElement> | undefined;
+        onBeforeInput?: React.FormEventHandler<HTMLInputElement> | undefined;
+        onBeforeInputCapture?: React.FormEventHandler<HTMLInputElement> | undefined;
+        onInput?: React.FormEventHandler<HTMLInputElement> | undefined;
+        onInputCapture?: React.FormEventHandler<HTMLInputElement> | undefined;
+        onReset?: React.FormEventHandler<HTMLInputElement> | undefined;
+        onResetCapture?: React.FormEventHandler<HTMLInputElement> | undefined;
+        onSubmit?: React.FormEventHandler<HTMLInputElement> | undefined;
+        onSubmitCapture?: React.FormEventHandler<HTMLInputElement> | undefined;
+        onInvalid?: React.FormEventHandler<HTMLInputElement> | undefined;
+        onInvalidCapture?: React.FormEventHandler<HTMLInputElement> | undefined;
+        onLoad?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onError?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onErrorCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onKeyDown?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
+        onKeyDownCapture?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
+        onKeyPress?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
+        onKeyPressCapture?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
+        onKeyUp?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
+        onKeyUpCapture?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
+        onAbort?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onAbortCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onCanPlay?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onCanPlayCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onCanPlayThrough?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onCanPlayThroughCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onDurationChange?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onDurationChangeCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onEmptied?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onEmptiedCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onEncrypted?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onEncryptedCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onEnded?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onEndedCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadedData?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadedDataCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadedMetadata?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadedMetadataCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadStart?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadStartCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onPause?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onPauseCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onPlay?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onPlayCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onPlaying?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onPlayingCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onProgress?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onProgressCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onRateChange?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onRateChangeCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onResize?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onResizeCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onSeeked?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onSeekedCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onSeeking?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onSeekingCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onStalled?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onStalledCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onSuspend?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onSuspendCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onTimeUpdate?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onTimeUpdateCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onVolumeChange?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onVolumeChangeCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onWaiting?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onWaitingCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onAuxClick?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onAuxClickCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onClick?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onClickCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onContextMenu?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onContextMenuCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onDoubleClick?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onDoubleClickCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onDrag?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onDragCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onDragEnd?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onDragEndCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onDragEnter?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onDragEnterCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onDragExit?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onDragExitCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onDragLeave?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onDragLeaveCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onDragOver?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onDragOverCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onDragStart?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onDragStartCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onDrop?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onDropCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
+        onMouseDown?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseDownCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseEnter?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseLeave?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseMove?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseMoveCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseOut?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseOutCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseOver?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseOverCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseUp?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseUpCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onSelect?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onSelectCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
+        onTouchCancel?: React.TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchCancelCapture?: React.TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchEnd?: React.TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchEndCapture?: React.TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchMove?: React.TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchMoveCapture?: React.TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchStart?: React.TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchStartCapture?: React.TouchEventHandler<HTMLInputElement> | undefined;
+        onPointerDown?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerDownCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerMove?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerMoveCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerUp?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerUpCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerCancel?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerCancelCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerEnter?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerLeave?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerOver?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerOverCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerOut?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerOutCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onGotPointerCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onLostPointerCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLInputElement> | undefined;
+        onScroll?: React.UIEventHandler<HTMLInputElement> | undefined;
+        onScrollCapture?: React.UIEventHandler<HTMLInputElement> | undefined;
+        onWheel?: React.WheelEventHandler<HTMLInputElement> | undefined;
+        onWheelCapture?: React.WheelEventHandler<HTMLInputElement> | undefined;
+        onAnimationStart?: React.AnimationEventHandler<HTMLInputElement> | undefined;
+        onAnimationStartCapture?: React.AnimationEventHandler<HTMLInputElement> | undefined;
+        onAnimationEnd?: React.AnimationEventHandler<HTMLInputElement> | undefined;
+        onAnimationEndCapture?: React.AnimationEventHandler<HTMLInputElement> | undefined;
+        onAnimationIteration?: React.AnimationEventHandler<HTMLInputElement> | undefined;
+        onAnimationIterationCapture?: React.AnimationEventHandler<HTMLInputElement> | undefined;
+        onTransitionEnd?: React.TransitionEventHandler<HTMLInputElement> | undefined;
+        onTransitionEndCapture?: React.TransitionEventHandler<HTMLInputElement> | undefined;
+        form?: string | undefined;
+        pattern?: string | undefined;
+        list?: string | undefined;
+        step?: number | string | undefined;
+        height?: number | string | undefined;
+        max?: number | string | undefined;
+        min?: number | string | undefined;
+        width?: number | string | undefined;
+        formAction?: string | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS] | undefined;
+        formEncType?: string | undefined;
+        formMethod?: string | undefined;
+        formNoValidate?: boolean | undefined;
+        formTarget?: string | undefined;
+        multiple?: boolean | undefined;
+        alt?: string | undefined;
+        autoComplete?: React.HTMLInputAutoCompleteAttribute | undefined;
+        accept?: string | undefined;
+        capture?: boolean | "user" | "environment" | undefined;
+        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
+        maxLength?: number | undefined;
+        minLength?: number | undefined;
+        src?: string | undefined;
+        placeholder?: string | undefined;
+    };
+    /**
+     * Props to send to the `ValidationMessage` component.
+     *
+     * @example
+     * <ValidationMessage {...validationMessageProps} />
+     */
+    validationMessageProps: {
+        children: ReactNode;
+        hidden: boolean;
+        id: string;
+    };
+};
+//# sourceMappingURL=useRadioGroup.d.ts.map

package/dist/types/utilities/hooks/useRadioGroup/useRadioGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRadioGroup.d.ts","sourceRoot":"","sources":["../../../../../src/utilities/hooks/useRadioGroup/useRadioGroup.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3D,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACzC,QAAQ,GACR,MAAM,GACN,MAAM,GACN,MAAM,GACN,YAAY,GACZ,iBAAiB,GACjB,OAAO,GACP,MAAM,GACN,SAAS,GACT,OAAO,CACV,GAAG;IACF,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,KAAK,EAAE,WAAgB,GACxB,GAAE,kBAAuB;IAOtB;;OAEG;;IAEH;;;;;OAKG;;IAEH;;;;OAIG;kCAC2B,MAAM,GAAG,aAAa;;;;;;;;;sBAwClC,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAOrD;;;;;OAKG;;;;;;EAON"}

package/dist/types/utilities/index.d.ts

@@ -1,4 +1,5 @@
 export * from './omit/omit';
 export * from './hooks';
 export * from './RovingFocus';
+export type * from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/utilities/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utilities/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utilities/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,mBAAmB,SAAS,CAAC"}

package/dist/types/utilities/types.d.ts

@@ -0,0 +1,10 @@
+/** Simplify a type signature to help with readability in editor hints, error messages etc */
+export type Simplify<T> = {
+    [Key in keyof T]: T[Key];
+} & {};
+/**
+ * Create a new type with the properties of the first type merged with the properties of the second type.
+ * If a key exists in both types, the property from the *second* type will be used.
+ */
+export type MergeRight<T1, T2> = Simplify<Omit<T1, keyof T2> & T2>;
+//# sourceMappingURL=types.d.ts.map

package/dist/types/utilities/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/utilities/types.ts"],"names":[],"mappings":"AAAA,6FAA6F;AAC7F,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI;KAAG,GAAG,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC;CAAE,GAAG,EAAE,CAAC;AAE5D;;;GAGG;AACH,MAAM,MAAM,UAAU,CAAC,EAAE,EAAE,EAAE,IAAI,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digdir/designsystemet-react",
-  "version": "1.0.0-next.34",
+  "version": "1.0.0-next.36",
   "description": "React components for Designsystemet",
   "author": "Designsystemet team",
   "repository": {
@@ -40,7 +40,7 @@
     "@navikt/aksel-icons": "^6.14.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@tanstack/react-virtual": "^3.10.7",
-    "@u-elements/u-details": "^0.0.5",
+    "@u-elements/u-details": "^0.1.0",
     "clsx": "^2.1.1"
   },
   "devDependencies": {
@@ -55,7 +55,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rimraf": "^6.0.1",
-    "rollup": "^4.20.0",
+    "rollup": "^4.22.4",
     "typescript": "^5.5.4"
   }
 }

package/dist/cjs/components/Card/CardContent.js

@@ -1,16 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var reactSlot = require('@radix-ui/react-slot');
-var cl = require('clsx/lite');
-var react = require('react');
-var Paragraph = require('../Typography/Paragraph/Paragraph.js');
-
-const CardContent = react.forwardRef(({ asChild, className, ...rest }, ref) => {
-    const Component = asChild ? reactSlot.Slot : 'div';
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { size: 'md', asChild: true, children: jsxRuntime.jsx(Component, { className: cl(`ds-card__content`, className), ref: ref, ...rest }) }));
-});
-CardContent.displayName = 'CardContent';
-
-exports.CardContent = CardContent;

package/dist/cjs/components/Card/CardFooter.js

@@ -1,16 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var reactSlot = require('@radix-ui/react-slot');
-var cl = require('clsx/lite');
-var react = require('react');
-var Paragraph = require('../Typography/Paragraph/Paragraph.js');
-
-const CardFooter = react.forwardRef(({ asChild, className, ...rest }, ref) => {
-    const Component = asChild ? reactSlot.Slot : 'div';
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { size: 'md', asChild: true, children: jsxRuntime.jsx(Component, { className: cl(`ds-card__footer`, className), ref: ref, ...rest }) }));
-});
-CardFooter.displayName = 'CardFooter';
-
-exports.CardFooter = CardFooter;

package/dist/cjs/components/Card/CardHeader.js

@@ -1,16 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var reactSlot = require('@radix-ui/react-slot');
-var cl = require('clsx/lite');
-var react = require('react');
-var Heading = require('../Typography/Heading/Heading.js');
-
-const CardHeader = react.forwardRef(({ asChild, className, ...rest }, ref) => {
-    const Component = asChild ? reactSlot.Slot : 'div';
-    return (jsxRuntime.jsx(Heading.Heading, { size: 'md', asChild: true, children: jsxRuntime.jsx(Component, { className: cl(`ds-card__header`, className), ref: ref, ...rest }) }));
-});
-CardHeader.displayName = 'CardHeader';
-
-exports.CardHeader = CardHeader;

package/dist/cjs/components/Chip/Group/Group.js

@@ -1,15 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var cl = require('clsx/lite');
-var react = require('react');
-
-const ChipGroupContext = react.createContext(null);
-const Group = react.forwardRef(({ size = 'md', children, className, ...rest }, ref) => {
-    return (jsxRuntime.jsx("ul", { ref: ref, className: cl(`ds-chip--group-container`, `ds-chip--${size}`, className), ...rest, children: jsxRuntime.jsx(ChipGroupContext.Provider, { value: { size }, children: react.Children.toArray(children).map((child, index) => react.isValidElement(child) ? (jsxRuntime.jsx("li", { children: child }, `chip-${index}`)) : null) }) }));
-});
-Group.displayName = 'ChipGroup';
-
-exports.ChipGroupContext = ChipGroupContext;
-exports.Group = Group;

package/dist/cjs/components/Chip/Removable/Removable.js

@@ -1,17 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var akselIcons = require('@navikt/aksel-icons');
-var cl = require('clsx/lite');
-var react = require('react');
-var Group = require('../Group/Group.js');
-var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
-
-const RemovableChip = react.forwardRef(({ size = 'md', children, className, ...rest }, ref) => {
-    const group = react.useContext(Group.ChipGroupContext);
-    return (jsxRuntime.jsx("button", { type: 'button', ref: ref, className: cl(`ds-focus`, `ds-chip--button`, `ds-chip--removable`, `ds-chip--${group?.size || size}`, className), ...rest, children: jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: group?.size || size, variant: 'short', children: jsxRuntime.jsxs("span", { className: `ds-chip__label`, children: [jsxRuntime.jsx("span", { children: children }), jsxRuntime.jsx("span", { className: `ds-chip__x-mark`, "aria-hidden": true, children: jsxRuntime.jsx(akselIcons.XMarkIcon, { className: `ds-chip__icon` }) })] }) }) }));
-});
-RemovableChip.displayName = 'ChipRemovable';
-
-exports.RemovableChip = RemovableChip;

package/dist/cjs/components/Chip/Toggle/Toggle.js

@@ -1,18 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var akselIcons = require('@navikt/aksel-icons');
-var cl = require('clsx/lite');
-var react = require('react');
-var Group = require('../Group/Group.js');
-var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
-
-const ToggleChip = react.forwardRef(({ children, selected = false, checkmark = true, size = 'md', className, ...rest }, ref) => {
-    const shouldDisplayCheckmark = checkmark && selected;
-    const group = react.useContext(Group.ChipGroupContext);
-    return (jsxRuntime.jsx("button", { ref: ref, type: 'button', "aria-pressed": selected, className: cl(`ds-focus`, `ds-chip--button`, `ds-chip--${group?.size || size}`, shouldDisplayCheckmark && `ds-chip--spacing`, className), ...rest, children: jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: group?.size || size, variant: 'short', children: jsxRuntime.jsxs("span", { className: `ds-chip__label`, children: [shouldDisplayCheckmark && (jsxRuntime.jsx(akselIcons.CheckmarkIcon, { className: `ds-chip__checkmark-icon`, "aria-hidden": true })), jsxRuntime.jsx("span", { children: children })] }) }) }));
-});
-ToggleChip.displayName = 'ChipToggle';
-
-exports.ToggleChip = ToggleChip;

package/dist/cjs/components/Dropdown/DropdownContext.js

@@ -1,26 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-require('../Popover/index.js');
-var PopoverContext = require('../Popover/PopoverContext.js');
-
-/**
- * DropdownContext is the root component for the DropdownMenu component.
- * @example
- * <DropdownMenu.Context>
- *  <DropdownMenu.Trigger>Dropdown</DropdownMenu.Trigger>
- *  <DropdownMenu>
- *   <DropdownMenu.Heading>Heading</DropdownMenu.Heading>
- *    <DropdownMenu.List>
- *      <DropdownMenu.Item>Button 1</DropdownMenu.Item>
- *    </DropdownMenu.List>
- *  </DropdownMenu>
- * </DropdownMenu.Context>
- */
-const DropdownContext = ({ children }) => {
-    return jsxRuntime.jsx(PopoverContext.PopoverContext, { children: children });
-};
-DropdownContext.displayName = 'DropdownContext';
-
-exports.DropdownContext = DropdownContext;

package/dist/cjs/components/Modal/ModaContent.js

@@ -1,15 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var reactSlot = require('@radix-ui/react-slot');
-var cl = require('clsx/lite');
-var react = require('react');
-
-const ModalContent = react.forwardRef(({ asChild, className, ...rest }, ref) => {
-    const Component = asChild ? reactSlot.Slot : 'div';
-    return (jsxRuntime.jsx(Component, { ref: ref, className: cl('ds-modal__content', className), ...rest }));
-});
-ModalContent.displayName = 'ModalContent';
-
-exports.ModalContent = ModalContent;

package/dist/cjs/components/Modal/ModalDialog.js

@@ -1,73 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react$1 = require('@floating-ui/react');
-var reactSlot = require('@radix-ui/react-slot');
-var cl = require('clsx/lite');
-var react = require('react');
-var ModalRoot = require('./ModalRoot.js');
-var useModalState = require('./useModalState.js');
-var useScrollLock = require('./useScrollLock.js');
-
-const ModalDialog = react.forwardRef(({ onInteractOutside, onClose, onBeforeClose, asChild, className, children, ...rest }, ref) => {
-    const Component = asChild ? reactSlot.Slot : 'dialog';
-    // This local ref is used to make sure the modal works without a ModalRoot
-    const modalDialogRef = react.useRef(null);
-    const { modalRef, setOpen, setCloseModal } = react.useContext(ModalRoot.ModalContext);
-    const open = useModalState.useModalState(modalDialogRef);
-    react.useEffect(() => {
-        setCloseModal?.(() => {
-            if (onBeforeClose && onBeforeClose() === false)
-                return;
-            modalDialogRef.current?.close();
-        });
-    }, [onBeforeClose, setCloseModal]);
-    const mergedRefs = react$1.useMergeRefs([modalRef, ref, modalDialogRef]);
-    useScrollLock.useScrollLock(modalDialogRef, 'ds-modal--lock-scroll');
-    react.useEffect(() => {
-        setOpen(open);
-    }, [open, setOpen]);
-    react.useEffect(() => {
-        const modalEl = modalRef.current;
-        const handleBackdropClick = (e) => {
-            if (e.target === modalEl && onInteractOutside) {
-                // Fix bug where if you select text spanning two divs it thinks you clicked outside
-                if (window.getSelection()?.toString())
-                    return;
-                onInteractOutside?.();
-            }
-        };
-        if (modalEl)
-            modalEl.addEventListener('click', handleBackdropClick);
-        return () => {
-            if (modalEl) {
-                modalEl.removeEventListener('click', handleBackdropClick);
-            }
-        };
-    }, [onInteractOutside, modalRef, onBeforeClose, ref]);
-    react.useEffect(() => {
-        const modalEl = modalRef.current;
-        const handleModalClose = () => {
-            onClose?.();
-        };
-        if (modalEl)
-            modalEl.addEventListener('close', handleModalClose);
-        return () => {
-            if (modalEl) {
-                modalEl.removeEventListener('close', handleModalClose);
-            }
-        };
-    }, [modalRef, onClose]);
-    const onCancel = (e) => {
-        if (onBeforeClose && onBeforeClose() === false) {
-            e.preventDefault();
-            return;
-        }
-        modalRef.current?.close();
-    };
-    return (jsxRuntime.jsx(Component, { ref: mergedRefs, className: cl('ds-modal', className), onCancel: onCancel, ...rest, children: children }));
-});
-ModalDialog.displayName = 'ModalDialog';
-
-exports.ModalDialog = ModalDialog;