@dbcdk/react-components 0.0.77 → 0.0.79

package/dist/components/menu/Menu.js

@@ -149,7 +149,7 @@ const MenuRadioItem = React.forwardRef(({ name, value, checked, disabled, label,
                 if ((_a = target.closest('label')) !== null && _a !== void 0 ? _a : target.closest('input'))
                     return;
                 onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(value);
-            }, children: _jsx(RadioButton, { noContainer: true, name: name, value: value, checked: checked, disabled: disabled, label: label, onChange: (v, _e) => onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(v) }) }) }));
+            }, children: _jsx(RadioButton, { noContainer: true, name: name, size: "sm", value: value, checked: checked, disabled: disabled, label: label, onChange: (v, _e) => onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(v) }) }) }));
 });
 MenuRadioItem.displayName = 'Menu.RadioItem';
 const MenuSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx("li", { ref: ref, role: "separator", className: [styles.separator, className].filter(Boolean).join(' '), ...props })));

package/dist/components/menu/Menu.module.css

@@ -22,21 +22,18 @@
   inline-size: 100%;
   text-align: start;
   text-decoration: none;
-
-  padding-block: var(--spacing-xs);
+  padding-block: var(--spacing-xxs);
   padding-inline: var(--spacing-md);
-
+  margin-block: var(--spacing-2xs);
+  min-block-size: var(--component-size-sm);
   background: transparent;
   border: none;
-
   font-family: var(--font-family);
   font-size: var(--font-size-sm);
   line-height: var(--line-height-normal);
   color: var(--color-fg-default);
   cursor: pointer;
-
-  border-radius: var(--border-radius-sm);
-
+  border-radius: var(--border-radius-md);
   transition:
     background-color var(--transition-fast) var(--ease-standard),
     color var(--transition-fast) var(--ease-standard);
@@ -56,17 +53,19 @@
 .interactiveChild {
   display: block;
   inline-size: 100%;
-  border-radius: var(--border-radius-sm);
+  border-radius: var(--border-radius-md);
 }
 
 /* NEW: make wrapper-children (Checkbox/Radio) look/space like menu rows */
 .row > .interactiveChild {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   inline-size: 100%;
-  padding-block: var(--spacing-xs);
+  padding-block: var(--spacing-xxs);
   padding-inline: var(--spacing-md);
-  border-radius: var(--border-radius-sm);
+  margin-block: var(--spacing-2xs);
+  min-block-size: var(--component-size-sm);
+  border-radius: var(--border-radius-md);
   cursor: pointer;
 }
 
@@ -174,7 +173,7 @@
 /* Visual separator row (used by <Menu.Separator />) */
 .separator {
   block-size: 1px;
-  margin-block: var(--spacing-2xs);
+  margin-block: var(--spacing-xxs);
   background: var(--color-border-subtle);
   opacity: 0.8;
   border-radius: 999px;
@@ -201,7 +200,7 @@
 /* Bordered item variant */
 .rowBordered {
   border: 1px solid var(--color-border-default);
-  border-radius: var(--border-radius-default);
+  border-radius: var(--border-radius-md);
   overflow: hidden;
 }
 

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

@@ -13,6 +13,7 @@ type ModalContextValue = {
     openModal: (config: ModalConfig) => void;
     closeModal: () => void;
     confirm: (config: ConfirmModalConfig) => Promise<boolean>;
+    markAsLoading: (loading?: boolean) => void;
 };
 type ModalProviderProps = {
     children: ReactNode;

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

@@ -8,7 +8,11 @@ export function ModalProvider({ children }) {
     const [isOpen, setIsOpen] = useState(false);
     const [config, setConfig] = useState(null);
     const [mounted, setMounted] = useState(false);
-    useEffect(() => setMounted(true), []);
+    useEffect(() => {
+        setMounted(true); // eslint-disable-line react-hooks/set-state-in-effect -- intentional: SSR portal guard, runs once after hydration
+    }, []);
+    const [isLoading, setIsLoading] = useState(false);
+    const markAsLoading = useCallback((loading = true) => setIsLoading(loading), []);
     const pendingResolverRef = useRef(null);
     const resolvePending = useCallback((value) => {
         if (pendingResolverRef.current) {
@@ -18,6 +22,7 @@ export function ModalProvider({ children }) {
     }, []);
     const closeModal = useCallback(() => {
         setIsOpen(false);
+        setIsLoading(false);
     }, []);
     const openModal = useCallback((newConfig) => {
         resolvePending(false);
@@ -54,8 +59,8 @@ export function ModalProvider({ children }) {
             setIsOpen(true);
         });
     }, [resolvePending]);
-    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)] }));
+    const modalNode = (_jsxs(ModalContext.Provider, { value: { openModal, closeModal, confirm, markAsLoading }, children: [children, mounted &&
+                createPortal(_jsx(Modal, { ...(config !== null && config !== void 0 ? config : {}), isOpen: isOpen, isLoading: isLoading, onRequestClose: handleRequestClose, children: config === null || config === void 0 ? void 0 : config.children }), document.body)] }));
     return modalNode;
 }
 export function useModal() {

package/dist/components/panel/Panel.d.ts

@@ -1,11 +1,12 @@
 import type { ReactNode, JSX } from 'react';
 interface PanelProps {
-    header: string;
+    header: ReactNode;
     headerIcon?: ReactNode;
+    headerAddition?: ReactNode;
     severity?: Severity;
     children: ReactNode;
     size?: 'sm' | 'md' | 'lg';
 }
 import { Severity } from '../../constants/severity.types';
-export declare function Panel({ header, headerIcon, children, severity, size }: PanelProps): JSX.Element;
+export declare function Panel({ header, headerIcon, headerAddition, children, severity, size, }: PanelProps): JSX.Element;
 export {};

package/dist/components/panel/Panel.js

@@ -2,6 +2,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './Panel.module.css';
 import { Headline } from '../headline/Headline';
-export function Panel({ header, headerIcon, children, severity, size }) {
-    return (_jsxs("section", { className: `${styles.container} ${size ? styles[size] : ''}`, children: [_jsx("div", { className: styles.header, children: _jsx(Headline, { disableMargin: true, size: 3, icon: headerIcon, severity: severity, children: header }) }), _jsx("div", { className: styles.content, children: children })] }));
+export function Panel({ header, headerIcon, headerAddition, children, severity, size, }) {
+    return (_jsxs("section", { className: `${styles.container} ${size ? styles[size] : ''}`, children: [_jsx("div", { className: styles.header, children: _jsx(Headline, { disableMargin: true, size: size === 'sm' ? 4 : 3, icon: headerIcon, addition: headerAddition, severity: severity, children: header }) }), _jsx("div", { className: styles.content, children: children })] }));
 }

package/dist/components/panel/Panel.module.css

@@ -1,6 +1,6 @@
 .container {
-  border: var(--border-width-thin) solid var(--color-border-default);
-  border-radius: var(--border-radius-default);
+  border: var(--border-width-thin) solid var(--color-border-subtle);
+  border-radius: var(--border-radius-md);
   background-color: var(--color-bg-surface);
   box-sizing: border-box;
   display: flex;
@@ -8,7 +8,8 @@
 }
 
 .header {
-  border-bottom: var(--border-width-thin) solid var(--color-border-default);
+  border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
+  border-bottom: var(--border-width-thin) solid var(--color-border-subtle);
 }
 
 .content {
@@ -17,11 +18,12 @@
 
 .header {
   padding: var(--spacing-sm) var(--spacing-md);
+  background-color: var(--table-header-bg);
 }
 
 .container.sm {
   .header,
   .content {
-    padding: var(--spacing-sm) var(--spacing-md);
+    padding: var(--spacing-xs) var(--spacing-md);
   }
 }

package/dist/components/popover/Popover.module.css

@@ -41,7 +41,7 @@
   border: 1px solid var(--color-border-subtle);
   background-color: var(--color-bg-surface);
   border-radius: var(--border-radius-lg);
-  padding-block: var(--spacing-xxs);
+  padding: var(--spacing-xxs);
   z-index: var(--z-popover);
   overflow: auto;
   box-shadow:
@@ -52,8 +52,3 @@
 .content[hidden] {
   display: none;
 }
-
-.content svg {
-  height: 20px;
-  width: 20px;
-}

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.module.css

@@ -47,7 +47,7 @@
 }
 
 .container:not(.active):hover {
-  background-color: var(--color-bg-contextual);
+  background-color: var(--color-bg-toolbar-hover);
 
   color: var(--color-fg-default);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.77",
+  "version": "0.0.79",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",