@dbcdk/react-components 0.0.133 → 0.0.135

package/dist/client.cjs

@@ -19,6 +19,7 @@ var Footer = require('./components/page-layout/components/footer/Footer');
 var Input = require('./components/forms/input/Input');
 var SearchBox = require('./components/search-box/SearchBox');
 var useTheme = require('./hooks/useTheme');
+var usePersistentState = require('./hooks/usePersistentState');
 var Chip = require('./components/chip/Chip');
 var Panel = require('./components/panel/Panel');
 var Card = require('./components/card/Card');
@@ -199,6 +200,12 @@ Object.keys(useTheme).forEach(function (k) {
 		get: function () { return useTheme[k]; }
 	});
 });
+Object.keys(usePersistentState).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return usePersistentState[k]; }
+	});
+});
 Object.keys(Chip).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,

package/dist/client.d.ts

@@ -16,6 +16,7 @@ export * from './components/page-layout/components/footer/Footer';
 export * from './components/forms/input/Input';
 export * from './components/search-box/SearchBox';
 export * from './hooks/useTheme';
+export * from './hooks/usePersistentState';
 export * from './components/chip/Chip';
 export * from './components/panel/Panel';
 export * from './components/card/Card';

package/dist/client.js

@@ -17,6 +17,7 @@ export * from './components/page-layout/components/footer/Footer';
 export * from './components/forms/input/Input';
 export * from './components/search-box/SearchBox';
 export * from './hooks/useTheme';
+export * from './hooks/usePersistentState';
 export * from './components/chip/Chip';
 export * from './components/panel/Panel';
 export * from './components/card/Card';

package/dist/components/headline/CollapsibleHeadline.cjs

@@ -4,6 +4,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var lucideReact = require('lucide-react');
 var react = require('react');
+var usePersistentState = require('../../hooks/usePersistentState');
 var Headline = require('./Headline');
 var styles = require('./Headline.module.css');
 var Button = require('../button/Button');
@@ -29,26 +30,17 @@ function CollapsibleHeadline({
   const generatedId = react.useId();
   const panelId = controls != null ? controls : generatedId;
   const isControlled = expanded !== void 0;
-  const [internalExpanded, setInternalExpanded] = react.useState(defaultExpanded);
-  const [hasToggled, setHasToggled] = react.useState(false);
-  const persistedExpanded = react.useSyncExternalStore(
-    () => () => void 0,
-    () => {
-      if (isControlled || !storageKey) return defaultExpanded;
-      const stored = localStorage.getItem(storageKey);
-      return stored !== null ? stored === "true" : defaultExpanded;
-    },
-    () => defaultExpanded
-  );
-  const isExpanded = isControlled ? expanded : hasToggled ? internalExpanded : persistedExpanded;
+  const { value: internalExpanded, setValue: setInternalExpanded } = usePersistentState.usePersistentState({
+    initialValue: defaultExpanded,
+    storageKey,
+    isControlled,
+    validate: (stored) => typeof stored === "boolean"
+  });
+  const isExpanded = isControlled ? expanded : internalExpanded;
   const handleToggle = () => {
     const next = !isExpanded;
     if (!isControlled) {
-      setHasToggled(true);
       setInternalExpanded(next);
-      if (storageKey) {
-        localStorage.setItem(storageKey, String(next));
-      }
     }
     onToggle == null ? void 0 : onToggle();
   };

package/dist/components/headline/CollapsibleHeadline.js

@@ -1,7 +1,8 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { ChevronDown } from 'lucide-react';
-import { useId, useState, useSyncExternalStore } from 'react';
+import { useId } from 'react';
+import { usePersistentState } from '../../hooks/usePersistentState';
 import { Headline } from './Headline';
 import styles from './Headline.module.css';
 import { Button } from '../button/Button';
@@ -23,26 +24,17 @@ function CollapsibleHeadline({
   const generatedId = useId();
   const panelId = controls != null ? controls : generatedId;
   const isControlled = expanded !== void 0;
-  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
-  const [hasToggled, setHasToggled] = useState(false);
-  const persistedExpanded = useSyncExternalStore(
-    () => () => void 0,
-    () => {
-      if (isControlled || !storageKey) return defaultExpanded;
-      const stored = localStorage.getItem(storageKey);
-      return stored !== null ? stored === "true" : defaultExpanded;
-    },
-    () => defaultExpanded
-  );
-  const isExpanded = isControlled ? expanded : hasToggled ? internalExpanded : persistedExpanded;
+  const { value: internalExpanded, setValue: setInternalExpanded } = usePersistentState({
+    initialValue: defaultExpanded,
+    storageKey,
+    isControlled,
+    validate: (stored) => typeof stored === "boolean"
+  });
+  const isExpanded = isControlled ? expanded : internalExpanded;
   const handleToggle = () => {
     const next = !isExpanded;
     if (!isControlled) {
-      setHasToggled(true);
       setInternalExpanded(next);
-      if (storageKey) {
-        localStorage.setItem(storageKey, String(next));
-      }
     }
     onToggle == null ? void 0 : onToggle();
   };

package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.cjs

@@ -36,19 +36,24 @@ function ExpandableSidebarItem({
     isExpanded
   } = SidebarProvider.useSidebar();
   const [closing, setClosing] = react.useState(false);
-  const ready = true;
   const expanded = react.useMemo(() => isExpanded(href), [href, isExpanded]);
   react.useEffect(() => {
     if (defaultExpanded === null) return;
     if (defaultExpanded) expandItem(href);
     else collapseItem(href);
   }, [defaultExpanded, expandItem, collapseItem, href]);
+  const commitCollapse = react.useCallback(() => {
+    collapseItem(href);
+    setClosing(false);
+  }, [collapseItem, href]);
   const handleAnimationEnd = react.useCallback(() => {
-    if (closing) {
-      collapseItem(href);
-      setClosing(false);
-    }
-  }, [closing, ready, collapseItem, href]);
+    if (closing) commitCollapse();
+  }, [closing, commitCollapse]);
+  react.useEffect(() => {
+    if (!closing) return;
+    const timer = setTimeout(commitCollapse, 250);
+    return () => clearTimeout(timer);
+  }, [closing, commitCollapse]);
   const toggleAccordion = react.useCallback(
     (e, onlyExpand = false) => {
       e == null ? void 0 : e.preventDefault();
@@ -101,29 +106,42 @@ function ExpandableSidebarItem({
     );
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.container}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Component, { onClick: () => toggleAccordion(void 0, true), children: /* @__PURE__ */ jsxRuntime.jsx(
-      SidebarItemContent.SidebarItemContent,
-      {
-        headerStyle: expanded,
-        icon,
-        iconWidth,
-        label,
-        href,
-        disableActiveStyles: expanded,
-        truncateLabel,
-        suffixIcon: isSidebarCollapsed ? null : /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "outlined", onClick: toggleAccordion, children: /* @__PURE__ */ jsxRuntime.jsx(
-          lucideReact.ChevronDown,
-          {
-            className: `${styles__default.default.chevron} ${expanded ? styles__default.default.chevronExpanded : ""}`
-          }
-        ) })
-      }
-    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.itemRow, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Component, { onClick: () => toggleAccordion(void 0, true), children: /* @__PURE__ */ jsxRuntime.jsx(
+        SidebarItemContent.SidebarItemContent,
+        {
+          headerStyle: expanded,
+          icon,
+          iconWidth,
+          label,
+          href,
+          disableActiveStyles: expanded,
+          truncateLabel
+        }
+      ) }),
+      !isSidebarCollapsed && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.toggleButton, children: /* @__PURE__ */ jsxRuntime.jsx(
+        Button.Button,
+        {
+          variant: "outlined",
+          "aria-label": expanded ? `Collapse ${label}` : `Expand ${label}`,
+          "aria-expanded": expanded,
+          "aria-controls": `${href}-children`,
+          onClick: toggleAccordion,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.ChevronDown,
+            {
+              className: `${styles__default.default.chevron} ${expanded ? styles__default.default.chevronExpanded : ""}`
+            }
+          )
+        }
+      ) })
+    ] }),
     expanded && !isSidebarCollapsed && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
+        id: `${href}-children`,
         onAnimationEnd: handleAnimationEnd,
-        className: `${styles__default.default.childrenContainer} ${closing ? "animate--collapse" : ""} ${expanded ? "animate--expand" : "visually-hidden"}`,
+        className: `${styles__default.default.childrenContainer} ${closing ? "animate--collapse" : expanded ? "animate--expand" : "visually-hidden"}`,
         children: items.map((item, idx) => renderNavItem(item, `${href}-${idx}`))
       }
     )

package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.js

@@ -30,19 +30,24 @@ function ExpandableSidebarItem({
     isExpanded
   } = useSidebar();
   const [closing, setClosing] = useState(false);
-  const ready = true;
   const expanded = useMemo(() => isExpanded(href), [href, isExpanded]);
   useEffect(() => {
     if (defaultExpanded === null) return;
     if (defaultExpanded) expandItem(href);
     else collapseItem(href);
   }, [defaultExpanded, expandItem, collapseItem, href]);
+  const commitCollapse = useCallback(() => {
+    collapseItem(href);
+    setClosing(false);
+  }, [collapseItem, href]);
   const handleAnimationEnd = useCallback(() => {
-    if (closing) {
-      collapseItem(href);
-      setClosing(false);
-    }
-  }, [closing, ready, collapseItem, href]);
+    if (closing) commitCollapse();
+  }, [closing, commitCollapse]);
+  useEffect(() => {
+    if (!closing) return;
+    const timer = setTimeout(commitCollapse, 250);
+    return () => clearTimeout(timer);
+  }, [closing, commitCollapse]);
   const toggleAccordion = useCallback(
     (e, onlyExpand = false) => {
       e == null ? void 0 : e.preventDefault();
@@ -95,29 +100,42 @@ function ExpandableSidebarItem({
     );
   };
   return /* @__PURE__ */ jsxs("div", { className: `${styles.container}`, children: [
-    /* @__PURE__ */ jsx(Component, { onClick: () => toggleAccordion(void 0, true), children: /* @__PURE__ */ jsx(
-      SidebarItemContent,
-      {
-        headerStyle: expanded,
-        icon,
-        iconWidth,
-        label,
-        href,
-        disableActiveStyles: expanded,
-        truncateLabel,
-        suffixIcon: isSidebarCollapsed ? null : /* @__PURE__ */ jsx(Button, { variant: "outlined", onClick: toggleAccordion, children: /* @__PURE__ */ jsx(
-          ChevronDown,
-          {
-            className: `${styles.chevron} ${expanded ? styles.chevronExpanded : ""}`
-          }
-        ) })
-      }
-    ) }),
+    /* @__PURE__ */ jsxs("div", { className: styles.itemRow, children: [
+      /* @__PURE__ */ jsx(Component, { onClick: () => toggleAccordion(void 0, true), children: /* @__PURE__ */ jsx(
+        SidebarItemContent,
+        {
+          headerStyle: expanded,
+          icon,
+          iconWidth,
+          label,
+          href,
+          disableActiveStyles: expanded,
+          truncateLabel
+        }
+      ) }),
+      !isSidebarCollapsed && /* @__PURE__ */ jsx("div", { className: styles.toggleButton, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outlined",
+          "aria-label": expanded ? `Collapse ${label}` : `Expand ${label}`,
+          "aria-expanded": expanded,
+          "aria-controls": `${href}-children`,
+          onClick: toggleAccordion,
+          children: /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              className: `${styles.chevron} ${expanded ? styles.chevronExpanded : ""}`
+            }
+          )
+        }
+      ) })
+    ] }),
     expanded && !isSidebarCollapsed && /* @__PURE__ */ jsx(
       "div",
       {
+        id: `${href}-children`,
         onAnimationEnd: handleAnimationEnd,
-        className: `${styles.childrenContainer} ${closing ? "animate--collapse" : ""} ${expanded ? "animate--expand" : "visually-hidden"}`,
+        className: `${styles.childrenContainer} ${closing ? "animate--collapse" : expanded ? "animate--expand" : "visually-hidden"}`,
         children: items.map((item, idx) => renderNavItem(item, `${href}-${idx}`))
       }
     )

package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.module.css

@@ -5,6 +5,20 @@
   border-radius: var(--border-radius-default);
 }
 
+.itemRow {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  column-gap: var(--spacing-xs);
+}
+
+.toggleButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+}
+
 .container button {
   color: var(--color-text);
   min-block-size: 20px !important;

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

@@ -91,7 +91,6 @@
   font-size: var(--font-size-xs);
   text-transform: uppercase;
   letter-spacing: 0.04em;
-  transition: 0.15s ease-in-out;
 }
 
 .label {

package/dist/components/tabs/Tabs.cjs

@@ -2,6 +2,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
+var usePersistentState = require('../../hooks/usePersistentState');
 var styles = require('./Tabs.module.css');
 var Chip = require('../chip/Chip');
 var Headline = require('../headline/Headline');
@@ -19,6 +20,9 @@ function getFirstEnabledId(items) {
   var _a;
   return (_a = items.find((t) => !t.hidden && !t.disabled)) == null ? void 0 : _a.id;
 }
+function isTabId(value) {
+  return typeof value === "string" || typeof value === "number";
+}
 function normalizeFromChildren(children) {
   const items = [];
   react.Children.forEach(children, (child) => {
@@ -46,6 +50,7 @@ function Tabs({
   tabs,
   value,
   defaultValue,
+  storageKey,
   onValueChange,
   addition,
   disableTopPadding,
@@ -59,8 +64,16 @@ function Tabs({
   }, [tabs, children]);
   const visibleTabs = react.useMemo(() => sourceTabs.filter((t) => !t.hidden), [sourceTabs]);
   const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = react.useState(() => {
-    return defaultValue != null ? defaultValue : getFirstEnabledId(visibleTabs);
+  const fallbackValue = defaultValue != null ? defaultValue : getFirstEnabledId(visibleTabs);
+  const validateStoredTabId = react.useCallback(
+    (stored) => isTabId(stored) && visibleTabs.some((t) => t.id === stored && !t.disabled),
+    [visibleTabs]
+  );
+  const { value: internalValue, setValue: setInternalValue } = usePersistentState.usePersistentState({
+    initialValue: fallbackValue,
+    storageKey,
+    isControlled,
+    validate: validateStoredTabId
   });
   const currentValue = isControlled ? value : internalValue;
   const activeIndex = react.useMemo(() => {
@@ -77,7 +90,7 @@ function Tabs({
       if (!isControlled) setInternalValue(nextId);
       onValueChange == null ? void 0 : onValueChange(nextId, tab, idx);
     },
-    [visibleTabs, isControlled, onValueChange]
+    [visibleTabs, isControlled, onValueChange, setInternalValue]
   );
   react.useEffect(() => {
     if (!visibleTabs.length) return;

package/dist/components/tabs/Tabs.d.ts

@@ -21,6 +21,11 @@ export interface TabsProps {
     value?: TabId;
     /** Uncontrolled initial */
     defaultValue?: TabId;
+    /**
+     * Persist the active tab id in localStorage when used uncontrolled.
+     * Ignored in controlled mode.
+     */
+    storageKey?: string;
     onValueChange?: (id: TabId, tab: TabItem, index: number) => void;
     addition?: ReactNode;
     disableTopPadding?: boolean;
@@ -41,7 +46,7 @@ type SlotName = 'Item';
 type TabsItemComponent = ((props: TabsItemProps) => JSX.Element) & {
     __TABS_SLOT__?: SlotName;
 };
-export declare function Tabs({ header, subheader, variant, panelStyle, tabs, value, defaultValue, onValueChange, addition, disableTopPadding, loading, children, }: TabsProps): JSX.Element;
+export declare function Tabs({ header, subheader, variant, panelStyle, tabs, value, defaultValue, storageKey, onValueChange, addition, disableTopPadding, loading, children, }: TabsProps): JSX.Element;
 export declare namespace Tabs {
     var Item: TabsItemComponent;
 }

package/dist/components/tabs/Tabs.js

@@ -1,5 +1,6 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useId, useMemo, useState, useCallback, useEffect, Children, isValidElement } from 'react';
+import { useId, useMemo, useCallback, useEffect, Children, isValidElement } from 'react';
+import { usePersistentState } from '../../hooks/usePersistentState';
 import styles from './Tabs.module.css';
 import { Chip } from '../chip/Chip';
 import { Headline } from '../headline/Headline';
@@ -13,6 +14,9 @@ function getFirstEnabledId(items) {
   var _a;
   return (_a = items.find((t) => !t.hidden && !t.disabled)) == null ? void 0 : _a.id;
 }
+function isTabId(value) {
+  return typeof value === "string" || typeof value === "number";
+}
 function normalizeFromChildren(children) {
   const items = [];
   Children.forEach(children, (child) => {
@@ -40,6 +44,7 @@ function Tabs({
   tabs,
   value,
   defaultValue,
+  storageKey,
   onValueChange,
   addition,
   disableTopPadding,
@@ -53,8 +58,16 @@ function Tabs({
   }, [tabs, children]);
   const visibleTabs = useMemo(() => sourceTabs.filter((t) => !t.hidden), [sourceTabs]);
   const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = useState(() => {
-    return defaultValue != null ? defaultValue : getFirstEnabledId(visibleTabs);
+  const fallbackValue = defaultValue != null ? defaultValue : getFirstEnabledId(visibleTabs);
+  const validateStoredTabId = useCallback(
+    (stored) => isTabId(stored) && visibleTabs.some((t) => t.id === stored && !t.disabled),
+    [visibleTabs]
+  );
+  const { value: internalValue, setValue: setInternalValue } = usePersistentState({
+    initialValue: fallbackValue,
+    storageKey,
+    isControlled,
+    validate: validateStoredTabId
   });
   const currentValue = isControlled ? value : internalValue;
   const activeIndex = useMemo(() => {
@@ -71,7 +84,7 @@ function Tabs({
       if (!isControlled) setInternalValue(nextId);
       onValueChange == null ? void 0 : onValueChange(nextId, tab, idx);
     },
-    [visibleTabs, isControlled, onValueChange]
+    [visibleTabs, isControlled, onValueChange, setInternalValue]
   );
   useEffect(() => {
     if (!visibleTabs.length) return;

package/dist/hooks/usePersistentState.cjs

@@ -0,0 +1,41 @@
+'use client';
+'use strict';
+
+var react = require('react');
+var localStorage_utils = require('../utils/localStorage.utils');
+
+function usePersistentState({
+  initialValue,
+  storageKey,
+  isControlled = false,
+  validate
+}) {
+  const shouldHydrate = !isControlled && Boolean(storageKey);
+  const [didHydrate, setDidHydrate] = react.useState(() => !shouldHydrate);
+  const [value, setValue] = react.useState(initialValue);
+  const hydrated = !shouldHydrate || didHydrate;
+  const validateRef = react.useRef(validate);
+  react.useEffect(() => {
+    validateRef.current = validate;
+  }, [validate]);
+  react.useEffect(() => {
+    if (!storageKey || !shouldHydrate) return;
+    const stored = localStorage_utils.readLocalStorage(storageKey);
+    const currentValidate = validateRef.current;
+    const nextValue = currentValidate == null || currentValidate(stored) ? stored : initialValue;
+    setValue(nextValue);
+    setDidHydrate(true);
+  }, [initialValue, shouldHydrate, storageKey]);
+  react.useEffect(() => {
+    if (isControlled || !storageKey) return;
+    if (!hydrated) return;
+    localStorage_utils.writeLocalStorage(storageKey, value);
+  }, [hydrated, isControlled, storageKey, value]);
+  return {
+    value,
+    setValue,
+    hydrated
+  };
+}
+
+exports.usePersistentState = usePersistentState;

package/dist/hooks/usePersistentState.d.ts

@@ -0,0 +1,13 @@
+import { Dispatch, SetStateAction } from 'react';
+export interface UsePersistentStateOptions<T> {
+    initialValue: T;
+    storageKey?: string;
+    isControlled?: boolean;
+    validate?: (value: unknown) => value is T;
+}
+export interface UsePersistentStateResult<T> {
+    value: T;
+    setValue: Dispatch<SetStateAction<T>>;
+    hydrated: boolean;
+}
+export declare function usePersistentState<T>({ initialValue, storageKey, isControlled, validate, }: UsePersistentStateOptions<T>): UsePersistentStateResult<T>;

package/dist/hooks/usePersistentState.js

@@ -0,0 +1,39 @@
+'use client';
+import { useState, useRef, useEffect } from 'react';
+import { readLocalStorage, writeLocalStorage } from '../utils/localStorage.utils';
+
+function usePersistentState({
+  initialValue,
+  storageKey,
+  isControlled = false,
+  validate
+}) {
+  const shouldHydrate = !isControlled && Boolean(storageKey);
+  const [didHydrate, setDidHydrate] = useState(() => !shouldHydrate);
+  const [value, setValue] = useState(initialValue);
+  const hydrated = !shouldHydrate || didHydrate;
+  const validateRef = useRef(validate);
+  useEffect(() => {
+    validateRef.current = validate;
+  }, [validate]);
+  useEffect(() => {
+    if (!storageKey || !shouldHydrate) return;
+    const stored = readLocalStorage(storageKey);
+    const currentValidate = validateRef.current;
+    const nextValue = currentValidate == null || currentValidate(stored) ? stored : initialValue;
+    setValue(nextValue);
+    setDidHydrate(true);
+  }, [initialValue, shouldHydrate, storageKey]);
+  useEffect(() => {
+    if (isControlled || !storageKey) return;
+    if (!hydrated) return;
+    writeLocalStorage(storageKey, value);
+  }, [hydrated, isControlled, storageKey, value]);
+  return {
+    value,
+    setValue,
+    hydrated
+  };
+}
+
+export { usePersistentState };

package/package.json

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