@dbcdk/react-components 0.0.78 → 0.0.79

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/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.78",
+  "version": "0.0.79",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",