@dbcdk/react-components 0.0.8 → 0.0.10

package/dist/components/forms/radio-buttons/RadioButton.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import type { JSX } from 'react';
+type Variant = 'default' | 'primary' | 'outlined';
+type Size = 'sm' | 'md' | 'lg';
+export interface RadioButtonProps {
+    /** group name (required for radio behavior) */
+    name: string;
+    /** this option's value */
+    value: string;
+    /** controlled selected value for the group */
+    selectedValue?: string;
+    /** uncontrolled checked (rare; prefer selectedValue on group) */
+    checked?: boolean;
+    /** called with (value, event) */
+    onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+    label?: string;
+    variant?: Variant;
+    size?: Size;
+    containerLabel?: string;
+    error?: string;
+    helpText?: string;
+    orientation?: 'vertical' | 'horizontal';
+    labelWidth?: string;
+    fullWidth?: boolean;
+    required?: boolean;
+    /**
+     * If true, do NOT wrap with InputContainer.
+     * Use inside RadioGroup.
+     */
+    noContainer?: boolean;
+    id?: string;
+    'data-cy'?: string;
+}
+export declare function RadioButton({ name, value, selectedValue, checked, onChange, disabled, label, variant, size, containerLabel, error, helpText, orientation, labelWidth, fullWidth, required, noContainer, id, 'data-cy': dataCy, }: RadioButtonProps): JSX.Element;
+export {};

package/dist/components/forms/radio-buttons/RadioButton.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import styles from './RadioButtons.module.css';
+import { InputContainer } from '../input-container/InputContainer';
+export function RadioButton({ name, value, selectedValue, checked, onChange, disabled, label, variant = 'outlined', size = 'md', containerLabel, error, helpText, orientation = 'horizontal', labelWidth = '160px', fullWidth = false, required = false, noContainer = false, id, 'data-cy': dataCy, }) {
+    const generatedId = useId();
+    const controlId = id !== null && id !== void 0 ? id : `radio-${generatedId}`;
+    const isChecked = selectedValue !== undefined ? selectedValue === value : Boolean(checked);
+    const content = (_jsxs("span", { className: styles.container, "data-cy": dataCy, children: [_jsxs("span", { className: styles.controlWrap, children: [_jsx("input", { id: controlId, className: styles.input, type: "radio", name: name, value: value, checked: isChecked, disabled: disabled, required: required, "aria-invalid": Boolean(error) || undefined, onChange: e => {
+                            if (disabled)
+                                return;
+                            onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value, e);
+                        } }), _jsx("span", { className: [
+                            styles.radio,
+                            isChecked ? styles.checked : '',
+                            disabled ? styles.disabled : '',
+                            styles[variant],
+                            styles[size],
+                        ]
+                            .filter(Boolean)
+                            .join(' '), "aria-hidden": "true", children: _jsx("span", { className: styles.dot }) })] }), label && (_jsx("label", { className: styles.label, htmlFor: controlId, children: label }))] }));
+    if (noContainer || (!containerLabel && !error))
+        return content;
+    return (_jsx(InputContainer, { label: containerLabel, htmlFor: controlId, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, fullWidth: fullWidth, required: required, children: content }));
+}

package/dist/components/forms/radio-buttons/RadioButtonGroup.d.ts

@@ -0,0 +1,25 @@
+import type { JSX } from 'react';
+export type RadioOption<V extends string = string> = {
+    label: string;
+    value: V;
+    disabled?: boolean;
+};
+export interface RadioGroupProps<V extends string = string> {
+    name?: string;
+    value: V | null;
+    onChange: (value: V) => void;
+    options: RadioOption<V>[];
+    disabled?: boolean;
+    label?: string;
+    error?: string;
+    helpText?: string;
+    required?: boolean;
+    orientation?: 'vertical' | 'horizontal';
+    labelWidth?: string;
+    fullWidth?: boolean;
+    modified?: boolean;
+    /** layout of radios themselves */
+    direction?: 'row' | 'column';
+    'data-cy'?: string;
+}
+export declare function RadioButtonGroup<V extends string = string>({ name, value, onChange, options, disabled, label, error, helpText, required, orientation, labelWidth, fullWidth, modified, direction, 'data-cy': dataCy, }: RadioGroupProps<V>): JSX.Element;

package/dist/components/forms/radio-buttons/RadioButtonGroup.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId } from 'react';
+import { RadioButton } from './RadioButton';
+import { InputContainer } from '../input-container/InputContainer';
+export function RadioButtonGroup({ name, value, onChange, options, disabled = false, label, error, helpText, required = false, orientation = 'horizontal', labelWidth = '160px', fullWidth = false, modified = false, direction = 'column', 'data-cy': dataCy, }) {
+    const generated = useId();
+    const groupName = name !== null && name !== void 0 ? name : `radio-group-${generated}`;
+    const content = (_jsx("div", { role: "radiogroup", "aria-invalid": Boolean(error) || undefined, "data-cy": dataCy, style: {
+            display: 'flex',
+            flexDirection: direction,
+            gap: '8px',
+        }, children: options.map(opt => (_jsx(RadioButton, { noContainer: true, name: groupName, value: String(opt.value), selectedValue: value !== null && value !== void 0 ? value : undefined, disabled: disabled || opt.disabled, label: opt.label, required: required, onChange: v => onChange(v), "data-cy": dataCy ? `${dataCy}-option-${String(opt.value)}` : undefined }, String(opt.value)))) }));
+    // If no InputContainer props were provided, just return group content
+    if (!label && !error)
+        return content;
+    // Wrap once as a proper field
+    return (_jsx(InputContainer, { label: label, htmlFor: undefined, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, fullWidth: fullWidth, required: required, modified: modified, children: content }));
+}

package/dist/components/forms/radio-buttons/RadioButtons.module.css

@@ -0,0 +1,117 @@
+.container {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.controlWrap {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+/* Real input stays for a11y, but visually hidden */
+.input {
+  position: absolute;
+  inset: 0;
+  width: var(--component-size-xs);
+  height: var(--component-size-xs);
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+/* The visible radio */
+.radio {
+  width: var(--component-size-xs);
+  height: var(--component-size-xs);
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  background: var(--color-bg-surface);
+  border: 2px solid rgba(0, 0, 0, 0.25);
+
+  transition:
+    border-color 120ms ease,
+    box-shadow 120ms ease,
+    background-color 120ms ease;
+}
+
+.dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  transform: scale(0);
+  transition: transform 120ms ease;
+  background: var(--color-brand);
+}
+
+/* checked state */
+.checked {
+  border-color: var(--color-brand);
+}
+.checked .dot {
+  transform: scale(1);
+}
+
+/* hover (only when not disabled) */
+.input:not(:disabled):hover + .radio {
+  border-color: var(--color-brand-hover);
+}
+
+/* focus ring */
+.input:focus-visible + .radio {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 30%, transparent);
+  border-color: var(--color-brand-strong);
+}
+
+/* disabled */
+.disabled {
+  opacity: 0.5;
+}
+.input:disabled {
+  cursor: not-allowed;
+}
+
+.label {
+  cursor: pointer;
+  user-select: none;
+}
+
+.primary.checked {
+  background: color-mix(in srgb, var(--color-brand) 10%, var(--color-bg-surface));
+}
+
+.default {
+  border-color: rgba(0, 0, 0, 0.2);
+}
+
+/* Sizes */
+.sm {
+  width: 16px;
+  height: 16px;
+}
+.sm .dot {
+  width: 8px;
+  height: 8px;
+}
+
+.md {
+  width: 20px;
+  height: 20px;
+}
+.md .dot {
+  width: 10px;
+  height: 10px;
+}
+
+.lg {
+  width: 24px;
+  height: 24px;
+}
+.lg .dot {
+  width: 12px;
+  height: 12px;
+}

package/dist/components/forms/select/Select.d.ts

@@ -18,5 +18,5 @@ export type SelectProps<T> = Omit<InputContainerProps, 'children' | 'htmlFor' |
     tooltip?: React.ReactNode;
     tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';
 };
-export declare function Select<T extends string | number | Record<string, any>>({ label, error, helpText, orientation, labelWidth, fullWidth, required, tooltip, tooltipPlacement, id, options, selectedValue, onChange, placeholder, size, variant, onClear, datakey, dataCy, disabled, }: SelectProps<T>): React.ReactNode;
+export declare function Select<T extends string | number | Record<string, any>>({ label, error, helpText, orientation, labelWidth, fullWidth, required, tooltip, tooltipPlacement, modified, id, options, selectedValue, onChange, placeholder, size, variant, onClear, datakey, dataCy, disabled, }: SelectProps<T>): React.ReactNode;
 export {};

package/dist/components/forms/select/Select.js

@@ -10,7 +10,7 @@ import { Popover } from '../../popover/Popover';
 import { InputContainer } from '../input-container/InputContainer';
 export function Select({ 
 // InputContainer props
-label, error, helpText, orientation = 'vertical', labelWidth = '120px', fullWidth = true, required, tooltip, tooltipPlacement = 'right', 
+label, error, helpText, orientation = 'vertical', labelWidth = '160px', fullWidth = true, required, tooltip, tooltipPlacement = 'right', modified = false, 
 // Select props
 id, options, selectedValue, onChange, placeholder = 'Vælg', size, variant = 'outlined', onClear, datakey, dataCy, disabled, }) {
     const generatedId = useId();
@@ -72,10 +72,10 @@ id, options, selectedValue, onChange, placeholder = 'Vælg', size, variant = 'ou
             ids.push(tooltipId);
         return ids.length ? ids.join(' ') : undefined;
     })();
-    return (_jsxs(InputContainer, { label: label, htmlFor: controlId, fullWidth: fullWidth, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, required: required, children: [_jsx(Popover, { ref: popoverRef, trigger: (onClick, icon) => (_jsx(Button, { disabled: disabled, ...(tooltipEnabled ? triggerProps : {}), id: controlId, "data-cy": dataCy !== null && dataCy !== void 0 ? dataCy : 'select-button', onKeyDown: handleKeyDown, fullWidth: fullWidth, variant: variant, onClick: e => {
+    return (_jsxs(InputContainer, { label: label, htmlFor: controlId, fullWidth: fullWidth, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, required: required, modified: modified, children: [_jsx(Popover, { ref: popoverRef, trigger: (onClick, icon) => (_jsx(Button, { disabled: disabled, ...(tooltipEnabled ? triggerProps : {}), id: controlId, "data-cy": dataCy !== null && dataCy !== void 0 ? dataCy : 'select-button', onKeyDown: handleKeyDown, fullWidth: fullWidth, variant: variant, onClick: e => {
                         setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
                         onClick(e);
-                    }, size: size, type: "button", "aria-haspopup": "listbox", "aria-invalid": Boolean(error) || undefined, "aria-describedby": describedBy, children: _jsxs("span", { className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs", style: { width: '100%' }, children: [_jsx("span", { children: selected ? selected.label : placeholder }), onClear && selected && _jsx(ClearButton, { onClick: onClear }), icon] }) })), children: _jsx(Menu, { onKeyDown: handleKeyDown, role: "listbox", children: options.map((opt, index) => {
+                    }, size: size, type: "button", "data-forminput": true, "aria-haspopup": "listbox", "aria-invalid": Boolean(error) || undefined, "aria-describedby": describedBy, children: _jsxs("span", { className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs", style: { width: '100%' }, children: [_jsx("span", { children: selected ? selected.label : placeholder }), onClear && selected && _jsx(ClearButton, { onClick: onClear }), icon] }) })), children: _jsx(Menu, { onKeyDown: handleKeyDown, role: "listbox", children: options.map((opt, index) => {
                         const isSelected = typeof opt.value === 'object' && typeof selectedValue === 'object' && datakey
                             ? (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue[datakey]) === opt.value[datakey]
                             : opt.value === selectedValue;

package/dist/components/forms/text-area/Textarea.js

@@ -4,9 +4,9 @@ import { useCallback, useId, useMemo } from 'react';
 import { useTooltipTrigger } from '../../../components/overlay/tooltip/useTooltipTrigger';
 import styles from './Textarea.module.css';
 import { InputContainer } from '../input-container/InputContainer';
-export const Textarea = function Textarea({ value, inputChanged, disabled, rows = 3, showCount, tooltip, tooltipPlacement = 'right', showTooltip, placeholder, adjustHeight, id, 
+export const Textarea = function Textarea({ value, inputChanged, disabled, rows = 3, showCount, tooltip, tooltipPlacement = 'right', showTooltip, placeholder, adjustHeight, id, modified = false, 
 // InputContainer props
-label, error, helpText, orientation = 'horizontal', labelWidth = '120px', fullWidth = false, required, 
+label, error, helpText, orientation = 'horizontal', labelWidth = '160px', fullWidth = false, required, 
 // Native textarea props
 className, ...rest }) {
     const generatedId = useId();
@@ -28,6 +28,6 @@ className, ...rest }) {
         placement: tooltipPlacement,
         offset: 8,
     });
-    return (_jsx(InputContainer, { label: label, htmlFor: textareaId, error: error, helpText: helpText, helpTextAddition: showCount ? `${value === null || value === void 0 ? void 0 : value.length} tegn i denne boks` : undefined, orientation: orientation, labelWidth: labelWidth, fullWidth: fullWidth, required: required, children: _jsx("div", { className: styles.container, children: _jsx("div", { ...(tooltipEnabled ? triggerProps : {}), children: inputField }) }) }));
+    return (_jsx(InputContainer, { modified: modified, label: label, htmlFor: textareaId, error: error, helpText: helpText, helpTextAddition: showCount ? `${value === null || value === void 0 ? void 0 : value.length} tegn i denne boks` : undefined, orientation: orientation, labelWidth: labelWidth, fullWidth: fullWidth, required: required, children: _jsx("div", { className: styles.container, children: _jsx("div", { ...(tooltipEnabled ? triggerProps : {}), children: inputField }) }) }));
 };
 Textarea.displayName = 'Textarea';

package/dist/components/forms/text-area/Textarea.module.css

@@ -9,6 +9,14 @@
   font-family: var(--font-family);
 }
 
+.container textarea:disabled {
+  background-color: var(--color-disabled-bg);
+  border: 0;
+  color: var(--color-disabled-fg);
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
 .internalCount {
   text-align: right;
   font-size: var(--font-size-sm);
@@ -22,5 +30,4 @@
 .container textarea:focus-visible {
   outline: none;
   border-color: var(--color-border-selected);
-  box-shadow: var(--focus-ring);
 }

package/dist/components/headline/Headline.d.ts

@@ -10,13 +10,8 @@ interface HeadlineProps extends React.AriaAttributes {
     subHeadline?: string | JSX.Element;
     addition?: React.ReactNode;
     icon?: React.ReactNode;
-    /**
-     * Optional visual tone override:
-     * - dark: force normal foreground colours
-     * - light: force on-strong/light text
-     * If omitted, the headline simply inherits its colour from its parent.
-     */
+    allowWrap?: boolean;
     tone?: HeadlineTone;
 }
-export declare function Headline({ size, marker, disableMargin, children, severity, weight, subHeadline, addition, icon, tone, }: PropsWithChildren<HeadlineProps>): React.ReactNode;
+export declare function Headline({ size, marker, disableMargin, children, severity, weight, subHeadline, addition, icon, tone, allowWrap, }: PropsWithChildren<HeadlineProps>): React.ReactNode;
 export {};

package/dist/components/headline/Headline.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import styles from './Headline.module.css';
 import { SeverityBgColor } from '../../constants/severity';
 import { Icon } from '../icon/Icon';
-export function Headline({ size = 2, marker, disableMargin, children, severity, weight = 600, subHeadline, addition, icon, tone, }) {
+export function Headline({ size = 2, marker, disableMargin, children, severity, weight = 600, subHeadline, addition, icon, tone, allowWrap = true, }) {
     const Tag = `h${size}`;
     const containerClassName = [styles.headlineContainer, tone ? styles[`tone-${tone}`] : '']
         .filter(Boolean)
@@ -15,8 +15,11 @@ export function Headline({ size = 2, marker, disableMargin, children, severity,
     ]
         .filter(Boolean)
         .join(' ');
+    const textClassName = [styles.text, allowWrap ? styles.wrap : styles.truncate]
+        .filter(Boolean)
+        .join(' ');
     return (_jsxs(_Fragment, { children: [_jsxs("div", { className: containerClassName, children: [_jsxs(Tag, { style: {
                             '--font-weight': weight,
                             '--marker-color': severity ? SeverityBgColor[severity] : undefined,
-                        }, className: headlineClassName, children: [icon || (severity && !marker) ? _jsx(Icon, { customIcon: icon, severity: severity }) : null, children] }), addition] }), subHeadline && _jsx("div", { className: styles.subHeadline, children: subHeadline })] }));
+                        }, className: headlineClassName, children: [icon || (severity && !marker) ? (_jsx("span", { className: styles.icon, children: _jsx(Icon, { customIcon: icon, severity: severity }) })) : null, _jsx("span", { className: textClassName, children: children })] }), addition] }), subHeadline && _jsx("div", { className: styles.subHeadline, children: subHeadline })] }));
 }

package/dist/components/headline/Headline.module.css

@@ -3,6 +3,7 @@
   align-items: center;
   gap: var(--spacing-lg);
   flex-wrap: wrap;
+  max-width: 100%;
 }
 
 /* Base headline: inherit colour from parent surface */
@@ -18,8 +19,6 @@
   transition: color var(--transition-fast) var(--ease-standard);
 }
 
-/* Optional tone overrides for special cases (hero sections, etc.) */
-
 .tone-dark .headline {
   color: var(--color-fg-default);
 }
@@ -58,3 +57,63 @@
   margin-block-start: calc(var(--spacing-2xs) * -1);
   line-height: var(--line-height-normal);
 }
+
+.headline {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  font-weight: var(--font-weight, var(--font-weight-bold));
+  letter-spacing: var(--letter-spacing-tight);
+  color: inherit;
+  line-height: var(--line-height-tight);
+  transition: color var(--transition-fast) var(--ease-standard);
+
+  /* Needed so truncation works inside flex parents */
+  min-width: 0;
+}
+
+/* Truncated variant (single line with ellipsis) */
+.truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.headline {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  font-weight: var(--font-weight, var(--font-weight-bold));
+  letter-spacing: var(--letter-spacing-tight);
+  color: inherit;
+  line-height: var(--line-height-tight);
+  transition: color var(--transition-fast) var(--ease-standard);
+
+  /* helps inside flex parents */
+  min-width: 0;
+}
+
+.icon {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+}
+
+/* text wrapper must be the shrinkable element */
+.text {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.truncate {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.wrap {
+  white-space: normal;
+  overflow: visible;
+}

package/dist/components/hyperlink/Hyperlink.d.ts

@@ -4,6 +4,7 @@ interface HyperlinkProps {
     className?: string;
     icon?: React.ReactNode;
     disableIcon?: boolean;
+    onClick?: (e: React.MouseEvent) => void;
 }
 export declare function Hyperlink({ component, icon }: HyperlinkProps): React.ReactElement;
 export {};

package/dist/components/hyperlink/Hyperlink.js

@@ -6,6 +6,10 @@ export function Hyperlink({ component, icon }) {
     return React.cloneElement(component, {
         ...originalProps,
         className: styles.link,
-        onClick: (e) => e.stopPropagation(),
+        onClick: (e) => {
+            var _a;
+            e.stopPropagation();
+            (_a = originalProps === null || originalProps === void 0 ? void 0 : originalProps.onClick) === null || _a === void 0 ? void 0 : _a.call(originalProps, e);
+        },
     }, _jsxs(_Fragment, { children: [_jsx("span", { className: styles.content, children: originalProps.children }), icon && _jsx("span", { className: styles.icon, children: icon })] }));
 }

package/dist/components/icon/Icon.module.css

@@ -4,6 +4,7 @@
   vertical-align: middle;
   gap: var(--spacing-xxs);
   color: var(--color-fg-subtle);
+  font-size: var(--font-size-sm);
 }
 
 .icon {

package/dist/components/interval-select/IntervalSelect.js

@@ -10,7 +10,7 @@ import { useTooltipTrigger } from '../../components/overlay/tooltip/useTooltipTr
 import { Popover } from '../../components/popover/Popover';
 export function IntervalSelect({ 
 // InputContainer props
-label, error, helpText, orientation = 'vertical', labelWidth = '120px', fullWidth = true, required, 
+label, error, helpText, orientation = 'vertical', labelWidth = '160px', fullWidth = true, required, 
 // tooltip
 tooltip, tooltipPlacement = 'right', 
 // IntervalSelect props

package/dist/components/nav-bar/NavBar.d.ts

@@ -1,18 +1,36 @@
 import type { ElementType, ReactNode, JSX } from 'react';
-export type NavBarItem = {
-    component?: ElementType<any>;
+export type NavBarItem = NavBarLinkItem | NavBarExpandableItem | NavBarGroupItem;
+type NavBarBase = {
     label: string;
     icon?: ReactNode;
+    enabled?: boolean;
+    tags?: string[];
+};
+/** Simple clickable item */
+export type NavBarLinkItem = NavBarBase & {
+    type?: 'item';
+    href: string;
+    component?: ElementType<any>;
     active?: boolean;
     external?: boolean;
-    enabled?: boolean;
+};
+/** Clickable + expandable item (has href AND children) */
+export type NavBarExpandableItem = NavBarBase & {
+    type: 'expandable';
     href: string;
-    tags?: string[];
-    children?: NavBarItem[];
+    component?: ElementType<any>;
+    active?: boolean;
+    external?: boolean;
+    children: NavBarItem[];
+};
+/** Non-clickable group header */
+export type NavBarGroupItem = NavBarBase & {
+    type: 'group';
+    children: NavBarItem[];
 };
 interface NavBarProps {
     logo?: ReactNode;
-    items: NavBarItem[];
+    items: NavBarLinkItem[];
     productName?: string;
     addition?: ReactNode;
 }

package/dist/components/overlay/modal/provider/ModalProvider.d.ts

@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
-import { ModalProps } from '../Modal';
+import React, { type ReactNode } from 'react';
+import { type ModalProps } from '../Modal';
 type ModalConfig = Omit<ModalProps, 'isOpen' | 'onRequestClose'> & {
     onRequestClose?: () => void;
 };

package/dist/components/overlay/modal/provider/ModalProvider.js

@@ -1,11 +1,14 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useState, useRef } from 'react';
+import { createContext, useCallback, useContext, useEffect, useRef, useState, } from 'react';
+import { createPortal } from 'react-dom';
 import { Modal } from '../Modal';
 const ModalContext = createContext(undefined);
 export function ModalProvider({ children }) {
     const [isOpen, setIsOpen] = useState(false);
     const [config, setConfig] = useState(null);
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => setMounted(true), []);
     // Holds the resolver for the current "confirm" call, if any
     const pendingResolverRef = useRef(null);
     const resolvePending = useCallback((value) => {
@@ -24,47 +27,43 @@ export function ModalProvider({ children }) {
         setIsOpen(true);
     }, [resolvePending]);
     const handleRequestClose = useCallback(() => {
-        if (config === null || config === void 0 ? void 0 : config.onRequestClose) {
-            config.onRequestClose();
-        }
-        // Any non-explicit confirm click counts as "false"
+        var _a;
+        (_a = config === null || config === void 0 ? void 0 : config.onRequestClose) === null || _a === void 0 ? void 0 : _a.call(config);
         resolvePending(false);
         closeModal();
     }, [config, closeModal, resolvePending]);
     const confirm = useCallback((confirmConfig) => {
         return new Promise(resolve => {
-            // cancel any previous pending confirm
             resolvePending(false);
             pendingResolverRef.current = resolve;
             const { confirmLabel = 'Ok', cancelLabel = 'Annuller', ...rest } = confirmConfig;
-            const primaryAction = {
-                label: confirmLabel,
-                onClick: () => {
-                    resolvePending(true);
-                    closeModal();
-                },
-            };
-            const secondaryAction = {
-                label: cancelLabel,
-                onClick: () => {
-                    resolvePending(false);
-                    closeModal();
-                },
-            };
             setConfig({
                 ...rest,
-                primaryAction,
-                secondaryAction,
+                primaryAction: {
+                    label: confirmLabel,
+                    onClick: () => {
+                        resolvePending(true);
+                        closeModal();
+                    },
+                },
+                secondaryAction: {
+                    label: cancelLabel,
+                    onClick: () => {
+                        resolvePending(false);
+                        closeModal();
+                    },
+                },
             });
             setIsOpen(true);
         });
     }, [closeModal, resolvePending]);
-    return (_jsxs(ModalContext.Provider, { value: { openModal, closeModal, confirm }, children: [children, _jsx(Modal, { ...(config !== null && config !== void 0 ? config : {}), isOpen: isOpen, onRequestClose: handleRequestClose, children: config === null || config === void 0 ? void 0 : config.children })] }));
+    const modalNode = (_jsxs(ModalContext.Provider, { value: { openModal, closeModal, confirm }, children: [children, mounted &&
+                createPortal(_jsx(Modal, { ...(config !== null && config !== void 0 ? config : {}), isOpen: isOpen, onRequestClose: handleRequestClose, children: config === null || config === void 0 ? void 0 : config.children }), document.body)] }));
+    return modalNode;
 }
 export function useModal() {
     const ctx = useContext(ModalContext);
-    if (!ctx) {
+    if (!ctx)
         throw new Error('useModal must be used within a ModalProvider');
-    }
     return ctx;
 }

package/dist/components/overlay/side-panel/SidePanel.d.ts

@@ -1,16 +1,24 @@
-import type { HTMLAttributes, ReactNode } from 'react';
+import React, { type HTMLAttributes, type ReactNode } from 'react';
 import { Severity } from '../../../constants/severity.types';
 interface SidePanelProps {
     children?: ReactNode;
     header: ReactNode;
     headerAddition?: ReactNode;
-    actions: ReactNode;
-    onClose: () => void;
+    actions?: ReactNode;
+    onClose: (event?: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<HTMLDivElement>) => void;
     isOpen: boolean;
     showBackdrop?: boolean;
     severity?: Severity;
     showHeaderMarker?: boolean;
     width?: number | string;
+    /**
+     * Optional details pane (separate column).
+     */
+    details?: ReactNode;
+    detailsHeader?: ReactNode;
+    detailsWidth?: number | string;
+    onCloseDetails?: () => void;
+    detailsHeaderAddition?: ReactNode;
 }
-export declare function SidePanel({ isOpen, onClose, children, header, headerAddition, actions, showBackdrop, severity, showHeaderMarker, width, ...props }: SidePanelProps & HTMLAttributes<HTMLElement>): ReactNode;
+export declare function SidePanel({ isOpen, onClose, children, header, headerAddition, actions, showBackdrop, severity, showHeaderMarker, width, details, detailsHeader, detailsWidth, onCloseDetails, detailsHeaderAddition, ...props }: SidePanelProps & HTMLAttributes<HTMLElement>): ReactNode;
 export {};