@dbcdk/react-components 0.0.191 → 0.0.193

package/dist/components/xml-viewer/XmlViewer.cjs

@@ -10,6 +10,7 @@ var usePersistentState = require('../../hooks/usePersistentState');
 var tokenizeXml = require('./tokenizeXml');
 var styles = require('./XmlViewer.module.css');
 var Button = require('../button/Button');
+var Icon = require('../icon/Icon');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -88,7 +89,7 @@ function XmlViewer({
                     "aria-haspopup": "menu",
                     "aria-expanded": isOpen ? true : false,
                     onClick: toggle,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreVertical, { "aria-hidden": "true" })
+                    children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { customIcon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings2, { "aria-hidden": "true" }) })
                   }
                 ),
                 children: (close) => /* @__PURE__ */ jsxRuntime.jsxs(Menu.Menu, { children: [

package/dist/components/xml-viewer/XmlViewer.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { TextWrap, ListTree, Code2, Sun, Moon, ClipboardCopy, MoreVertical } from 'lucide-react';
+import { TextWrap, ListTree, Code2, Sun, Moon, ClipboardCopy, Settings2 } from 'lucide-react';
 import { useMemo, useRef } from 'react';
 import { Menu } from '../../components/menu/Menu';
 import { Popover } from '../../components/popover/Popover';
@@ -8,6 +8,7 @@ import { usePersistentState } from '../../hooks/usePersistentState';
 import { tokenizeXml } from './tokenizeXml';
 import styles from './XmlViewer.module.css';
 import { Button } from '../button/Button';
+import { Icon } from '../icon/Icon';
 
 const TOKEN_CLASS = {
   tagName: styles.tagName,
@@ -82,7 +83,7 @@ function XmlViewer({
                     "aria-haspopup": "menu",
                     "aria-expanded": isOpen ? true : false,
                     onClick: toggle,
-                    children: /* @__PURE__ */ jsx(MoreVertical, { "aria-hidden": "true" })
+                    children: /* @__PURE__ */ jsx(Icon, { customIcon: /* @__PURE__ */ jsx(Settings2, { "aria-hidden": "true" }) })
                   }
                 ),
                 children: (close) => /* @__PURE__ */ jsxs(Menu, { children: [

package/dist/hooks/useTreeViewSettings.cjs

@@ -0,0 +1,87 @@
+'use client';
+'use strict';
+
+var react = require('react');
+var useTreeExpansion = require('../components/tree-view/useTreeExpansion');
+var utils = require('../components/tree-view/utils');
+var localStorage_utils = require('../utils/localStorage.utils');
+
+function isTreeViewSettingsState(value) {
+  return typeof value === "object" && value !== null && typeof value.wrapLabels === "boolean";
+}
+const localStorageTreeViewSettingsStorage = {
+  get: (key) => {
+    const stored = localStorage_utils.readLocalStorage(key);
+    return isTreeViewSettingsState(stored) ? stored : void 0;
+  },
+  set: (key, next) => {
+    localStorage_utils.writeLocalStorage(key, next);
+  }
+};
+function useTreeViewSettings({
+  data = [],
+  defaultExpandedIds = [],
+  expandedIds: controlledExpandedIds,
+  onExpandedIdsChange,
+  defaultWrapLabels = true,
+  wrapLabels: controlledWrapLabels,
+  onWrapLabelsChange,
+  storageKey,
+  storage = localStorageTreeViewSettingsStorage
+}) {
+  const [uncontrolledWrapLabels, setUncontrolledWrapLabels] = react.useState(defaultWrapLabels);
+  const isWrapControlled = controlledWrapLabels !== void 0;
+  const wrapLabels = isWrapControlled ? controlledWrapLabels : uncontrolledWrapLabels;
+  react.useEffect(() => {
+    if (!storageKey || isWrapControlled) return;
+    const stored = storage.get(storageKey);
+    if (stored) {
+      setUncontrolledWrapLabels(stored.wrapLabels);
+    }
+  }, [isWrapControlled, storage, storageKey]);
+  const setWrapLabels = react.useCallback(
+    (value) => {
+      if (wrapLabels === value) return;
+      if (!isWrapControlled) {
+        setUncontrolledWrapLabels(value);
+        if (storageKey) {
+          storage.set(storageKey, { wrapLabels: value });
+        }
+      }
+      onWrapLabelsChange == null ? void 0 : onWrapLabelsChange(value);
+    },
+    [isWrapControlled, onWrapLabelsChange, storage, storageKey, wrapLabels]
+  );
+  const toggleWrapLabels = react.useCallback(() => {
+    setWrapLabels(!wrapLabels);
+  }, [setWrapLabels, wrapLabels]);
+  const expansion = useTreeExpansion.useTreeExpansion(defaultExpandedIds, controlledExpandedIds, onExpandedIdsChange);
+  const expandedIds = react.useMemo(() => Array.from(expansion.expandedIds), [expansion.expandedIds]);
+  const expandAll = react.useCallback(() => {
+    expansion.setExpandedIds(utils.collectExpandableIds(data));
+  }, [data, expansion]);
+  const treeViewProps = react.useMemo(
+    () => ({
+      expandedIds,
+      onExpandedIdsChange: expansion.setExpandedIds,
+      wrapLabels
+    }),
+    [expandedIds, expansion.setExpandedIds, wrapLabels]
+  );
+  return {
+    wrapLabels,
+    setWrapLabels,
+    toggleWrapLabels,
+    expandedIds,
+    setExpandedIds: expansion.setExpandedIds,
+    expand: expansion.expand,
+    collapse: expansion.collapse,
+    toggle: expansion.toggle,
+    expandAll,
+    collapseAll: expansion.collapseAll,
+    treeViewProps
+  };
+}
+
+exports.localStorageTreeViewSettingsStorage = localStorageTreeViewSettingsStorage;
+exports.useTreeViewSettings = useTreeViewSettings;

package/dist/hooks/useTreeViewSettings.d.ts

@@ -0,0 +1,35 @@
+import type { TreeNode, TreeViewProps } from '../components/tree-view/types';
+type TreeViewSettingsState = {
+    wrapLabels: boolean;
+};
+export type TreeViewSettingsStorage = {
+    get: (key: string) => TreeViewSettingsState | undefined;
+    set: (key: string, next: TreeViewSettingsState) => void;
+};
+export declare const localStorageTreeViewSettingsStorage: TreeViewSettingsStorage;
+export interface UseTreeViewSettingsOptions<T = unknown> {
+    data?: TreeNode<T>[];
+    defaultExpandedIds?: string[];
+    expandedIds?: string[];
+    onExpandedIdsChange?: (ids: string[]) => void;
+    defaultWrapLabels?: boolean;
+    wrapLabels?: boolean;
+    onWrapLabelsChange?: (value: boolean) => void;
+    storageKey?: string;
+    storage?: TreeViewSettingsStorage;
+}
+export interface UseTreeViewSettingsResult<T = unknown> {
+    wrapLabels: boolean;
+    setWrapLabels: (value: boolean) => void;
+    toggleWrapLabels: () => void;
+    expandedIds: string[];
+    setExpandedIds: (ids: string[]) => void;
+    expand: (id: string) => void;
+    collapse: (id: string) => void;
+    toggle: (id: string) => void;
+    expandAll: () => void;
+    collapseAll: () => void;
+    treeViewProps: Pick<TreeViewProps<T>, 'expandedIds' | 'onExpandedIdsChange' | 'wrapLabels'>;
+}
+export declare function useTreeViewSettings<T = unknown>({ data, defaultExpandedIds, expandedIds: controlledExpandedIds, onExpandedIdsChange, defaultWrapLabels, wrapLabels: controlledWrapLabels, onWrapLabelsChange, storageKey, storage, }: UseTreeViewSettingsOptions<T>): UseTreeViewSettingsResult<T>;
+export {};

package/dist/hooks/useTreeViewSettings.js

@@ -0,0 +1,84 @@
+'use client';
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useTreeExpansion } from '../components/tree-view/useTreeExpansion';
+import { collectExpandableIds } from '../components/tree-view/utils';
+import { writeLocalStorage, readLocalStorage } from '../utils/localStorage.utils';
+
+function isTreeViewSettingsState(value) {
+  return typeof value === "object" && value !== null && typeof value.wrapLabels === "boolean";
+}
+const localStorageTreeViewSettingsStorage = {
+  get: (key) => {
+    const stored = readLocalStorage(key);
+    return isTreeViewSettingsState(stored) ? stored : void 0;
+  },
+  set: (key, next) => {
+    writeLocalStorage(key, next);
+  }
+};
+function useTreeViewSettings({
+  data = [],
+  defaultExpandedIds = [],
+  expandedIds: controlledExpandedIds,
+  onExpandedIdsChange,
+  defaultWrapLabels = true,
+  wrapLabels: controlledWrapLabels,
+  onWrapLabelsChange,
+  storageKey,
+  storage = localStorageTreeViewSettingsStorage
+}) {
+  const [uncontrolledWrapLabels, setUncontrolledWrapLabels] = useState(defaultWrapLabels);
+  const isWrapControlled = controlledWrapLabels !== void 0;
+  const wrapLabels = isWrapControlled ? controlledWrapLabels : uncontrolledWrapLabels;
+  useEffect(() => {
+    if (!storageKey || isWrapControlled) return;
+    const stored = storage.get(storageKey);
+    if (stored) {
+      setUncontrolledWrapLabels(stored.wrapLabels);
+    }
+  }, [isWrapControlled, storage, storageKey]);
+  const setWrapLabels = useCallback(
+    (value) => {
+      if (wrapLabels === value) return;
+      if (!isWrapControlled) {
+        setUncontrolledWrapLabels(value);
+        if (storageKey) {
+          storage.set(storageKey, { wrapLabels: value });
+        }
+      }
+      onWrapLabelsChange == null ? void 0 : onWrapLabelsChange(value);
+    },
+    [isWrapControlled, onWrapLabelsChange, storage, storageKey, wrapLabels]
+  );
+  const toggleWrapLabels = useCallback(() => {
+    setWrapLabels(!wrapLabels);
+  }, [setWrapLabels, wrapLabels]);
+  const expansion = useTreeExpansion(defaultExpandedIds, controlledExpandedIds, onExpandedIdsChange);
+  const expandedIds = useMemo(() => Array.from(expansion.expandedIds), [expansion.expandedIds]);
+  const expandAll = useCallback(() => {
+    expansion.setExpandedIds(collectExpandableIds(data));
+  }, [data, expansion]);
+  const treeViewProps = useMemo(
+    () => ({
+      expandedIds,
+      onExpandedIdsChange: expansion.setExpandedIds,
+      wrapLabels
+    }),
+    [expandedIds, expansion.setExpandedIds, wrapLabels]
+  );
+  return {
+    wrapLabels,
+    setWrapLabels,
+    toggleWrapLabels,
+    expandedIds,
+    setExpandedIds: expansion.setExpandedIds,
+    expand: expansion.expand,
+    collapse: expansion.collapse,
+    toggle: expansion.toggle,
+    expandAll,
+    collapseAll: expansion.collapseAll,
+    treeViewProps
+  };
+}
+
+export { localStorageTreeViewSettingsStorage, useTreeViewSettings };

package/package.json

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