@dbcdk/react-components 0.0.176 → 0.0.178

package/dist/components/copy-button/CopyButton.cjs

@@ -5,6 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var lucideReact = require('lucide-react');
 var react = require('react');
 var styles = require('./CopyButton.module.css');
+var clipboard_utils = require('../../utils/clipboard.utils');
 var Button = require('../button/Button');
 var Input = require('../forms/input/Input');
 var Hyperlink = require('../hyperlink/Hyperlink');
@@ -48,30 +49,9 @@ function CopyButton(props) {
     }
   };
   const handleCopy = async () => {
-    try {
-      if (!window.isSecureContext || !navigator.clipboard) {
-        throw new Error("Clipboard API unavailable");
-      }
-      await navigator.clipboard.writeText(text);
+    const success = await clipboard_utils.copyToClipboard(text);
+    if (success) {
       handleCopySuccess();
-    } catch (err) {
-      console.error("Failed to copy:", err);
-      try {
-        const textarea = document.createElement("textarea");
-        textarea.value = text;
-        textarea.setAttribute("readonly", "");
-        textarea.style.position = "fixed";
-        textarea.style.left = "-9999px";
-        document.body.appendChild(textarea);
-        textarea.select();
-        const success = document.execCommand("copy");
-        document.body.removeChild(textarea);
-        if (success) {
-          handleCopySuccess();
-        }
-      } catch (fallbackErr) {
-        console.error("Fallback copy failed:", fallbackErr);
-      }
     }
   };
   if (displayStyle === "link") {

package/dist/components/copy-button/CopyButton.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { Check, Copy } from 'lucide-react';
 import { useState } from 'react';
 import styles from './CopyButton.module.css';
+import { copyToClipboard } from '../../utils/clipboard.utils';
 import { Button } from '../button/Button';
 import { Input } from '../forms/input/Input';
 import { Hyperlink } from '../hyperlink/Hyperlink';
@@ -42,30 +43,9 @@ function CopyButton(props) {
     }
   };
   const handleCopy = async () => {
-    try {
-      if (!window.isSecureContext || !navigator.clipboard) {
-        throw new Error("Clipboard API unavailable");
-      }
-      await navigator.clipboard.writeText(text);
+    const success = await copyToClipboard(text);
+    if (success) {
       handleCopySuccess();
-    } catch (err) {
-      console.error("Failed to copy:", err);
-      try {
-        const textarea = document.createElement("textarea");
-        textarea.value = text;
-        textarea.setAttribute("readonly", "");
-        textarea.style.position = "fixed";
-        textarea.style.left = "-9999px";
-        document.body.appendChild(textarea);
-        textarea.select();
-        const success = document.execCommand("copy");
-        document.body.removeChild(textarea);
-        if (success) {
-          handleCopySuccess();
-        }
-      } catch (fallbackErr) {
-        console.error("Fallback copy failed:", fallbackErr);
-      }
     }
   };
   if (displayStyle === "link") {

package/dist/components/headline/Headline.cjs

@@ -22,10 +22,15 @@ function Headline({
   tone,
   variant,
   allowWrap = true,
+  grow = true,
   id
 }) {
   const Tag = `h${size}`;
-  const containerClassName = [styles__default.default.headlineContainer, tone ? styles__default.default[`tone-${tone}`] : ""].filter(Boolean).join(" ");
+  const containerClassName = [
+    styles__default.default.headlineContainer,
+    tone ? styles__default.default[`tone-${tone}`] : "",
+    grow ? "" : styles__default.default.noGrow
+  ].filter(Boolean).join(" ");
   const headlineClassName = [
     styles__default.default.headline,
     disableMargin ? styles__default.default.noMargin : "",

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

@@ -15,6 +15,7 @@ export interface HeadlineProps extends React.AriaAttributes {
     allowWrap?: boolean;
     tone?: HeadlineTone;
     variant?: HeadlineVariant;
+    grow?: boolean;
 }
-export declare function Headline({ size, marker, disableMargin, children, severity, weight, subheader, addition, icon, tone, variant, allowWrap, id, }: PropsWithChildren<HeadlineProps>): React.JSX.Element;
+export declare function Headline({ size, marker, disableMargin, children, severity, weight, subheader, addition, icon, tone, variant, allowWrap, grow, id, }: PropsWithChildren<HeadlineProps>): React.JSX.Element;
 export {};

package/dist/components/headline/Headline.js

@@ -16,10 +16,15 @@ function Headline({
   tone,
   variant,
   allowWrap = true,
+  grow = true,
   id
 }) {
   const Tag = `h${size}`;
-  const containerClassName = [styles.headlineContainer, tone ? styles[`tone-${tone}`] : ""].filter(Boolean).join(" ");
+  const containerClassName = [
+    styles.headlineContainer,
+    tone ? styles[`tone-${tone}`] : "",
+    grow ? "" : styles.noGrow
+  ].filter(Boolean).join(" ");
   const headlineClassName = [
     styles.headline,
     disableMargin ? styles.noMargin : "",

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

@@ -7,6 +7,10 @@
   min-width: 0;
 }
 
+.noGrow {
+  flex: 0 1 auto;
+}
+
 .headlineBlock {
   display: flex;
   flex-direction: column;

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

@@ -22,9 +22,8 @@
   inline-size: 100%;
   text-align: start;
   text-decoration: none;
-  padding-block: var(--spacing-xxs);
+  padding-block: var(--spacing-xs);
   padding-inline: var(--spacing-md);
-  margin-block: var(--spacing-2xs);
   min-block-size: var(--component-size-sm);
   background: transparent;
   border: none;
@@ -99,9 +98,8 @@
   display: flex;
   align-items: center;
   inline-size: 100%;
-  padding-block: var(--spacing-xxs);
+  padding-block: var(--spacing-xs);
   padding-inline: var(--spacing-md);
-  margin-block: var(--spacing-2xs);
   min-block-size: var(--component-size-sm);
   border-radius: var(--border-radius-md);
   cursor: pointer;

package/dist/index.cjs

@@ -23,6 +23,7 @@ var severity_types = require('./constants/severity.types');
 var AppHeader = require('./components/app-header/AppHeader');
 var nestedFiltering = require('./utils/arrays/nested-filtering');
 var formatDate = require('./utils/date/formatDate');
+var clipboard_utils = require('./utils/clipboard.utils');
 var AttributeChip = require('./components/attribute-chip/AttributeChip');
 var MetaBar = require('./components/meta-bar/MetaBar');
 var FadeOverlay = require('./components/overlay/fade-overlay/FadeOverlay');
@@ -186,6 +187,12 @@ Object.keys(formatDate).forEach(function (k) {
 		get: function () { return formatDate[k]; }
 	});
 });
+Object.keys(clipboard_utils).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return clipboard_utils[k]; }
+	});
+});
 Object.keys(AttributeChip).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,

package/dist/index.d.ts

@@ -21,6 +21,7 @@ export * from './constants/severity.types';
 export * from './components/app-header/AppHeader';
 export * from './utils/arrays/nested-filtering';
 export * from './utils/date/formatDate';
+export * from './utils/clipboard.utils';
 export * from './components/attribute-chip/AttributeChip';
 export * from './components/meta-bar/MetaBar';
 export * from './components/overlay/fade-overlay/FadeOverlay';

package/dist/index.js

@@ -21,6 +21,7 @@ export * from './constants/severity.types';
 export * from './components/app-header/AppHeader';
 export * from './utils/arrays/nested-filtering';
 export * from './utils/date/formatDate';
+export * from './utils/clipboard.utils';
 export * from './components/attribute-chip/AttributeChip';
 export * from './components/meta-bar/MetaBar';
 export * from './components/overlay/fade-overlay/FadeOverlay';

package/dist/styles/styles.css

@@ -252,6 +252,10 @@ tr.dbc-table--hover:hover td:last-child {
   font-weight: var(--font-weight-bold);
 }
 
+.dbc-center-text {
+  text-align: center;
+}
+
 /* ==========================================================================
    Layout utilities
    ========================================================================== */

package/dist/styles.css

@@ -252,6 +252,10 @@ tr.dbc-table--hover:hover td:last-child {
   font-weight: var(--font-weight-bold);
 }
 
+.dbc-center-text {
+  text-align: center;
+}
+
 /* ==========================================================================
    Layout utilities
    ========================================================================== */

package/dist/utils/clipboard.utils.cjs

@@ -0,0 +1,32 @@
+'use strict';
+
+function isBrowser() {
+  return typeof window !== "undefined" && typeof document !== "undefined";
+}
+async function copyToClipboard(text) {
+  if (!isBrowser()) return false;
+  try {
+    if (!window.isSecureContext || !navigator.clipboard) {
+      throw new Error("Clipboard API unavailable");
+    }
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    try {
+      const textarea = document.createElement("textarea");
+      textarea.value = text;
+      textarea.setAttribute("readonly", "");
+      textarea.style.position = "fixed";
+      textarea.style.left = "-9999px";
+      document.body.appendChild(textarea);
+      textarea.select();
+      const success = document.execCommand("copy");
+      document.body.removeChild(textarea);
+      return success;
+    } catch {
+      return false;
+    }
+  }
+}
+
+exports.copyToClipboard = copyToClipboard;

package/dist/utils/clipboard.utils.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copy text to the clipboard.
+ * - Uses the async Clipboard API when available (requires a secure context)
+ * - Falls back to `document.execCommand('copy')` otherwise, so copying still
+ *   works over plain HTTP (e.g. internal test environments)
+ * - Never throws; resolves to whether the copy succeeded
+ */
+export declare function copyToClipboard(text: string): Promise<boolean>;

package/dist/utils/clipboard.utils.js

@@ -0,0 +1,30 @@
+function isBrowser() {
+  return typeof window !== "undefined" && typeof document !== "undefined";
+}
+async function copyToClipboard(text) {
+  if (!isBrowser()) return false;
+  try {
+    if (!window.isSecureContext || !navigator.clipboard) {
+      throw new Error("Clipboard API unavailable");
+    }
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    try {
+      const textarea = document.createElement("textarea");
+      textarea.value = text;
+      textarea.setAttribute("readonly", "");
+      textarea.style.position = "fixed";
+      textarea.style.left = "-9999px";
+      document.body.appendChild(textarea);
+      textarea.select();
+      const success = document.execCommand("copy");
+      document.body.removeChild(textarea);
+      return success;
+    } catch {
+      return false;
+    }
+  }
+}
+
+export { copyToClipboard };

package/package.json

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