@dbcdk/react-components 0.0.116 → 0.0.118

package/dist/components/datetime-picker/DateTimePicker.cjs

@@ -356,7 +356,11 @@ const DateTimePicker = react.forwardRef(function DateTimePicker2({
         return /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            onClick: toggle,
+            onClick: (e) => {
+              const target = e.target;
+              if (target == null ? void 0 : target.closest('[data-input-container-label-action="true"]')) return;
+              toggle(e);
+            },
             className: [styles__default.default.triggerWrap, fullWidth ? styles__default.default.triggerWrapFullWidth : ""].filter(Boolean).join(" "),
             children: /* @__PURE__ */ jsxRuntime.jsx(
               Input.Input,

package/dist/components/datetime-picker/DateTimePicker.js

@@ -350,7 +350,11 @@ const DateTimePicker = forwardRef(function DateTimePicker2({
         return /* @__PURE__ */ jsx(
           "div",
           {
-            onClick: toggle,
+            onClick: (e) => {
+              const target = e.target;
+              if (target == null ? void 0 : target.closest('[data-input-container-label-action="true"]')) return;
+              toggle(e);
+            },
             className: [styles.triggerWrap, fullWidth ? styles.triggerWrapFullWidth : ""].filter(Boolean).join(" "),
             children: /* @__PURE__ */ jsx(
               Input,

package/dist/components/datetime-picker/dateTimeHelpers.cjs

@@ -42,7 +42,13 @@ function maskSingle(text, enableTime) {
   const t = normalizeSpaces(text);
   if (!enableTime) return maskDateEU(t);
   const m = /^(.*?)[ T](.*)$/.exec(t);
-  if (!m) return maskDateEU(t);
+  if (!m) {
+    const d = digits(t);
+    if (d.length <= 8) return maskDateEU(t);
+    const datePart2 = maskDateEU(d.slice(0, 8));
+    const timePart2 = maskTimeHM(d.slice(8));
+    return timePart2 ? `${datePart2} ${timePart2}` : datePart2;
+  }
   const datePart = maskDateEU(m[1]);
   const timePart = maskTimeHM(m[2]);
   return timePart ? `${datePart} ${timePart}` : datePart;

package/dist/components/datetime-picker/dateTimeHelpers.js

@@ -40,7 +40,13 @@ function maskSingle(text, enableTime) {
   const t = normalizeSpaces(text);
   if (!enableTime) return maskDateEU(t);
   const m = /^(.*?)[ T](.*)$/.exec(t);
-  if (!m) return maskDateEU(t);
+  if (!m) {
+    const d = digits(t);
+    if (d.length <= 8) return maskDateEU(t);
+    const datePart2 = maskDateEU(d.slice(0, 8));
+    const timePart2 = maskTimeHM(d.slice(8));
+    return timePart2 ? `${datePart2} ${timePart2}` : datePart2;
+  }
   const datePart = maskDateEU(m[1]);
   const timePart = maskTimeHM(m[2]);
   return timePart ? `${datePart} ${timePart}` : datePart;

package/dist/components/forms/input-container/InputContainer.cjs

@@ -28,7 +28,7 @@ function InputContainer({
       label,
       required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.required, children: " *" })
     ] }),
-    labelAction && labelAction
+    labelAction && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-input-container-label-action": "true", children: labelAction })
   ] });
   const renderMessageRow = (error || helpText || helpTextAddition) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${error ? styles__default.default.errorText : styles__default.default.helpText} ${styles__default.default.messageRow}`, children: error ? /* @__PURE__ */ jsxRuntime.jsx(InlineStatus.InlineStatus, { severity: "error", disableIcon: true, children: error }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { children: helpText }),

package/dist/components/forms/input-container/InputContainer.js

@@ -22,7 +22,7 @@ function InputContainer({
       label,
       required && /* @__PURE__ */ jsx("span", { className: styles.required, children: " *" })
     ] }),
-    labelAction && labelAction
+    labelAction && /* @__PURE__ */ jsx("span", { "data-input-container-label-action": "true", children: labelAction })
   ] });
   const renderMessageRow = (error || helpText || helpTextAddition) && /* @__PURE__ */ jsx("div", { className: `${error ? styles.errorText : styles.helpText} ${styles.messageRow}`, children: error ? /* @__PURE__ */ jsx(InlineStatus, { severity: "error", disableIcon: true, children: error }) : /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("span", { children: helpText }),

package/dist/components/headline/CollapsibleHeadline.cjs

@@ -19,6 +19,7 @@ function CollapsibleHeadline({
   controls,
   addition,
   storageKey,
+  defaultExpanded = false,
   children,
   size = 2,
   variant = "muted",
@@ -28,15 +29,16 @@ function CollapsibleHeadline({
   const generatedId = react.useId();
   const panelId = controls != null ? controls : generatedId;
   const isControlled = expanded !== void 0;
-  const [internalExpanded, setInternalExpanded] = react.useState(false);
+  const [internalExpanded, setInternalExpanded] = react.useState(defaultExpanded);
   const [hasToggled, setHasToggled] = react.useState(false);
   const persistedExpanded = react.useSyncExternalStore(
     () => () => void 0,
     () => {
-      if (isControlled || !storageKey) return false;
-      return localStorage.getItem(storageKey) === "true";
+      if (isControlled || !storageKey) return defaultExpanded;
+      const stored = localStorage.getItem(storageKey);
+      return stored !== null ? stored === "true" : defaultExpanded;
     },
-    () => false
+    () => defaultExpanded
   );
   const isExpanded = isControlled ? expanded : hasToggled ? internalExpanded : persistedExpanded;
   const handleToggle = () => {

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

@@ -17,5 +17,10 @@ export interface CollapsibleHeadlineProps extends Omit<HeadlineProps, 'addition'
      * collapsed to stay hydration-safe.
      */
     storageKey?: string;
+    /**
+     * Initial expanded state when uncontrolled and no persisted storageKey
+     * value exists yet. Defaults to false.
+     */
+    defaultExpanded?: boolean;
 }
-export declare function CollapsibleHeadline({ header, expanded, onToggle, controls, addition, storageKey, children, size, variant, weight, ...headlineProps }: PropsWithChildren<CollapsibleHeadlineProps>): import("react/jsx-runtime").JSX.Element;
+export declare function CollapsibleHeadline({ header, expanded, onToggle, controls, addition, storageKey, defaultExpanded, children, size, variant, weight, ...headlineProps }: PropsWithChildren<CollapsibleHeadlineProps>): import("react/jsx-runtime").JSX.Element;

package/dist/components/headline/CollapsibleHeadline.js

@@ -13,6 +13,7 @@ function CollapsibleHeadline({
   controls,
   addition,
   storageKey,
+  defaultExpanded = false,
   children,
   size = 2,
   variant = "muted",
@@ -22,15 +23,16 @@ function CollapsibleHeadline({
   const generatedId = useId();
   const panelId = controls != null ? controls : generatedId;
   const isControlled = expanded !== void 0;
-  const [internalExpanded, setInternalExpanded] = useState(false);
+  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
   const [hasToggled, setHasToggled] = useState(false);
   const persistedExpanded = useSyncExternalStore(
     () => () => void 0,
     () => {
-      if (isControlled || !storageKey) return false;
-      return localStorage.getItem(storageKey) === "true";
+      if (isControlled || !storageKey) return defaultExpanded;
+      const stored = localStorage.getItem(storageKey);
+      return stored !== null ? stored === "true" : defaultExpanded;
     },
-    () => false
+    () => defaultExpanded
   );
   const isExpanded = isControlled ? expanded : hasToggled ? internalExpanded : persistedExpanded;
   const handleToggle = () => {

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

@@ -2,7 +2,7 @@
   display: flex;
   flex: 1 1 auto;
   align-items: flex-start;
-  gap: var(--spacing-lg);
+  gap: var(--spacing-md);
   max-width: 100%;
   min-width: 0;
 }
@@ -18,7 +18,7 @@
 .headlineRow {
   display: flex;
   align-items: center;
-  gap: var(--spacing-lg);
+  gap: var(--spacing-md);
   min-width: 0;
 }
 
@@ -26,7 +26,7 @@
 .headline {
   position: relative;
   display: inline-flex;
-  flex: 1 1 auto;
+  flex: 0 1 auto;
   align-items: center;
   gap: var(--spacing-xs);
   margin-block: var(--spacing-xs);
@@ -133,7 +133,7 @@
 
 .addition {
   display: flex;
-  flex: 0 0 auto;
+  flex: 1 1 auto;
   min-width: 0;
   align-items: center;
 }
@@ -147,7 +147,7 @@
 
 /* Text wrapper (allows shrinking inside flex layouts) */
 .text {
-  flex: 1 1 auto;
+  flex: 0 1 auto;
   min-width: 0;
 }
 

package/package.json

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