@dbcdk/react-components 0.0.194 → 0.0.196

package/dist/components/theme-button/ThemeButton.cjs

@@ -9,8 +9,8 @@ var Popover = require('../../components/popover/Popover');
 var useTheme = require('../../hooks/useTheme');
 var types = require('../../styles/themes/types');
 
-function ThemeMenuSection({ themes }) {
-  const { theme, switchTheme } = useTheme.useTheme({ defaultTheme: themes[0] });
+function ThemeMenuSection({ themes, storageKey }) {
+  const { theme, switchTheme } = useTheme.useTheme({ defaultTheme: themes[0], storageKey });
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Header, { children: "Tema" }),
     themes.map((id) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -26,8 +26,13 @@ function ThemeMenuSection({ themes }) {
     ))
   ] });
 }
-function ThemeButton({ themes, size, variant = "outlined" }) {
-  const { theme, switchTheme } = useTheme.useTheme({ defaultTheme: themes[0] });
+function ThemeButton({
+  themes,
+  size,
+  variant = "outlined",
+  storageKey
+}) {
+  const { theme, switchTheme } = useTheme.useTheme({ defaultTheme: themes[0], storageKey });
   return /* @__PURE__ */ jsxRuntime.jsx(
     Popover.Popover,
     {

package/dist/components/theme-button/ThemeButton.d.ts

@@ -4,10 +4,12 @@ import type { ThemeId } from '../../hooks/useTheme';
 export interface ThemeMenuSectionProps {
     /** Every theme to offer as an option. The first entry is treated as the default. */
     themes: readonly ThemeId[];
+    /** Passed through to `useTheme` — see its docs for when to set this. */
+    storageKey?: string;
 }
 export interface ThemeButtonProps extends ThemeMenuSectionProps {
     size?: ButtonSize;
     variant?: ButtonVariant;
 }
-export declare function ThemeMenuSection({ themes }: ThemeMenuSectionProps): JSX.Element;
-export declare function ThemeButton({ themes, size, variant }: ThemeButtonProps): JSX.Element;
+export declare function ThemeMenuSection({ themes, storageKey }: ThemeMenuSectionProps): JSX.Element;
+export declare function ThemeButton({ themes, size, variant, storageKey, }: ThemeButtonProps): JSX.Element;

package/dist/components/theme-button/ThemeButton.js

@@ -7,8 +7,8 @@ import { Popover } from '../../components/popover/Popover';
 import { useTheme } from '../../hooks/useTheme';
 import { THEME_LABELS } from '../../styles/themes/types';
 
-function ThemeMenuSection({ themes }) {
-  const { theme, switchTheme } = useTheme({ defaultTheme: themes[0] });
+function ThemeMenuSection({ themes, storageKey }) {
+  const { theme, switchTheme } = useTheme({ defaultTheme: themes[0], storageKey });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Menu.Header, { children: "Tema" }),
     themes.map((id) => /* @__PURE__ */ jsx(
@@ -24,8 +24,13 @@ function ThemeMenuSection({ themes }) {
     ))
   ] });
 }
-function ThemeButton({ themes, size, variant = "outlined" }) {
-  const { theme, switchTheme } = useTheme({ defaultTheme: themes[0] });
+function ThemeButton({
+  themes,
+  size,
+  variant = "outlined",
+  storageKey
+}) {
+  const { theme, switchTheme } = useTheme({ defaultTheme: themes[0], storageKey });
   return /* @__PURE__ */ jsx(
     Popover,
     {

package/dist/components/theme-script/ThemeScript.cjs

@@ -5,7 +5,7 @@ var productThemes = require('../../styles/themes/product-themes');
 var colorScheme_constants = require('../../utils/color-scheme.constants');
 var theme_constants = require('../../utils/theme.constants');
 
-function buildInitScript(defaultColorScheme, defaultTheme, storageKey) {
+function buildInitScript(defaultColorScheme, defaultTheme, storageKey, colorSchemeStorageKey) {
   const productThemes$1 = JSON.stringify(productThemes.PRODUCT_THEMES);
   const themeBlock = defaultTheme === void 0 ? "" : `try{
   var THEME_KEY=${JSON.stringify(storageKey)};
@@ -38,7 +38,7 @@ function buildInitScript(defaultColorScheme, defaultTheme, storageKey) {
   return `(function(){
   function getCookie(name){var m=document.cookie.match(new RegExp('(?:^|; )'+name+'=([^;]*)'));return m?decodeURIComponent(m[1]):null}
   try{
-  var SCHEME_KEY=${JSON.stringify(colorScheme_constants.COLOR_SCHEME_STORAGE_KEY)};
+  var SCHEME_KEY=${JSON.stringify(colorSchemeStorageKey)};
   var SCHEMES=${JSON.stringify(colorScheme_constants.COLOR_SCHEMES)};
   function isScheme(x){return !!x && SCHEMES.indexOf(x)!==-1}
   var resolvedScheme=${JSON.stringify(defaultColorScheme)};
@@ -52,13 +52,19 @@ function buildInitScript(defaultColorScheme, defaultTheme, storageKey) {
 function ThemeScript({
   defaultColorScheme = "system",
   defaultTheme,
-  storageKey = theme_constants.THEME_STORAGE_KEY
+  storageKey = theme_constants.THEME_STORAGE_KEY,
+  colorSchemeStorageKey = colorScheme_constants.COLOR_SCHEME_STORAGE_KEY
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "script",
     {
       dangerouslySetInnerHTML: {
-        __html: buildInitScript(defaultColorScheme, defaultTheme, storageKey)
+        __html: buildInitScript(
+          defaultColorScheme,
+          defaultTheme,
+          storageKey,
+          colorSchemeStorageKey
+        )
       }
     }
   );

package/dist/components/theme-script/ThemeScript.d.ts

@@ -9,7 +9,15 @@ export interface ThemeScriptProps {
      * `data-product-theme` handling happens at all in that case.
      */
     defaultTheme?: ThemeId;
+    /**
+     * Storage key for the product theme axis. Apps sharing an origin with
+     * another app built on this library should each pass their own value here
+     * to keep their persisted theme independent — see `colorSchemeStorageKey`
+     * for the same concern on the color-scheme axis.
+     */
     storageKey?: string;
+    /** Storage key for the color-scheme axis. See `storageKey`. */
+    colorSchemeStorageKey?: string;
 }
 /**
  * Renders a blocking inline <script> that restores both the persisted color
@@ -41,4 +49,4 @@ export interface ThemeScriptProps {
  * </Head>
  * ```
  */
-export declare function ThemeScript({ defaultColorScheme, defaultTheme, storageKey, }: ThemeScriptProps): import("react/jsx-runtime").JSX.Element;
+export declare function ThemeScript({ defaultColorScheme, defaultTheme, storageKey, colorSchemeStorageKey, }: ThemeScriptProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/theme-script/ThemeScript.js

@@ -3,7 +3,7 @@ import { PRODUCT_THEMES } from '../../styles/themes/product-themes';
 import { COLOR_SCHEME_STORAGE_KEY, COLOR_SCHEMES } from '../../utils/color-scheme.constants';
 import { THEME_STORAGE_KEY } from '../../utils/theme.constants';
 
-function buildInitScript(defaultColorScheme, defaultTheme, storageKey) {
+function buildInitScript(defaultColorScheme, defaultTheme, storageKey, colorSchemeStorageKey) {
   const productThemes = JSON.stringify(PRODUCT_THEMES);
   const themeBlock = defaultTheme === void 0 ? "" : `try{
   var THEME_KEY=${JSON.stringify(storageKey)};
@@ -36,7 +36,7 @@ function buildInitScript(defaultColorScheme, defaultTheme, storageKey) {
   return `(function(){
   function getCookie(name){var m=document.cookie.match(new RegExp('(?:^|; )'+name+'=([^;]*)'));return m?decodeURIComponent(m[1]):null}
   try{
-  var SCHEME_KEY=${JSON.stringify(COLOR_SCHEME_STORAGE_KEY)};
+  var SCHEME_KEY=${JSON.stringify(colorSchemeStorageKey)};
   var SCHEMES=${JSON.stringify(COLOR_SCHEMES)};
   function isScheme(x){return !!x && SCHEMES.indexOf(x)!==-1}
   var resolvedScheme=${JSON.stringify(defaultColorScheme)};
@@ -50,13 +50,19 @@ function buildInitScript(defaultColorScheme, defaultTheme, storageKey) {
 function ThemeScript({
   defaultColorScheme = "system",
   defaultTheme,
-  storageKey = THEME_STORAGE_KEY
+  storageKey = THEME_STORAGE_KEY,
+  colorSchemeStorageKey = COLOR_SCHEME_STORAGE_KEY
 }) {
   return /* @__PURE__ */ jsx(
     "script",
     {
       dangerouslySetInnerHTML: {
-        __html: buildInitScript(defaultColorScheme, defaultTheme, storageKey)
+        __html: buildInitScript(
+          defaultColorScheme,
+          defaultTheme,
+          storageKey,
+          colorSchemeStorageKey
+        )
       }
     }
   );

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

@@ -9,6 +9,7 @@ var Popover = require('../../components/popover/Popover');
 var usePersistentState = require('../../hooks/usePersistentState');
 var tokenizeXml = require('./tokenizeXml');
 var styles = require('./XmlViewer.module.css');
+var clipboard_utils = require('../../utils/clipboard.utils');
 var Button = require('../button/Button');
 var Icon = require('../icon/Icon');
 
@@ -54,9 +55,7 @@ function XmlViewer({
     validate: (stored) => typeof stored === "boolean"
   });
   const handleCopy = () => {
-    var _a;
-    (_a = navigator.clipboard) == null ? void 0 : _a.writeText(xml).catch(() => {
-    });
+    void clipboard_utils.copyToClipboard(xml);
   };
   const handleDoubleClick = () => {
     const el = codeRef.current;

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

@@ -7,6 +7,7 @@ import { Popover } from '../../components/popover/Popover';
 import { usePersistentState } from '../../hooks/usePersistentState';
 import { tokenizeXml } from './tokenizeXml';
 import styles from './XmlViewer.module.css';
+import { copyToClipboard } from '../../utils/clipboard.utils';
 import { Button } from '../button/Button';
 import { Icon } from '../icon/Icon';
 
@@ -48,9 +49,7 @@ function XmlViewer({
     validate: (stored) => typeof stored === "boolean"
   });
   const handleCopy = () => {
-    var _a;
-    (_a = navigator.clipboard) == null ? void 0 : _a.writeText(xml).catch(() => {
-    });
+    void copyToClipboard(xml);
   };
   const handleDoubleClick = () => {
     const el = codeRef.current;

package/dist/hooks/useColorScheme.cjs

@@ -6,9 +6,9 @@ var colorScheme_constants = require('../utils/color-scheme.constants');
 var cookie_utils = require('../utils/cookie.utils');
 var localStorage_utils = require('../utils/localStorage.utils');
 
-function persistColorScheme(id) {
-  localStorage_utils.writeLocalStorage(colorScheme_constants.COLOR_SCHEME_STORAGE_KEY, id);
-  cookie_utils.writeCookie(colorScheme_constants.COLOR_SCHEME_STORAGE_KEY, id);
+function persistColorScheme(storageKey, id) {
+  localStorage_utils.writeLocalStorage(storageKey, id);
+  cookie_utils.writeCookie(storageKey, id);
 }
 function getDomColorScheme() {
   return document.documentElement.dataset.theme;
@@ -34,40 +34,44 @@ function getSnapshot() {
 function getServerSnapshot() {
   return null;
 }
-function resolveInitialColorScheme(initialColorScheme) {
+function resolveInitialColorScheme(storageKey, initialColorScheme) {
   const fromDomAttribute = getDomColorScheme();
   let resolvedColorScheme = colorScheme_constants.isColorScheme(fromDomAttribute) ? fromDomAttribute : initialColorScheme;
-  const fromCookie = cookie_utils.readCookie(colorScheme_constants.COLOR_SCHEME_STORAGE_KEY);
+  const fromCookie = cookie_utils.readCookie(storageKey);
   if (colorScheme_constants.isColorScheme(fromCookie)) {
     resolvedColorScheme = fromCookie;
   } else {
-    const fromStorage = localStorage_utils.readLocalStorage(colorScheme_constants.COLOR_SCHEME_STORAGE_KEY);
+    const fromStorage = localStorage_utils.readLocalStorage(storageKey);
     if (colorScheme_constants.isColorScheme(fromStorage)) resolvedColorScheme = fromStorage;
   }
   return resolvedColorScheme;
 }
-function ensureResolved(initialColorScheme) {
+function ensureResolved(initialColorScheme, storageKey) {
   if (resolved) return;
   resolved = true;
-  const value = resolveInitialColorScheme(initialColorScheme);
+  const value = resolveInitialColorScheme(storageKey, initialColorScheme);
   applyColorScheme(value);
-  persistColorScheme(value);
+  persistColorScheme(storageKey, value);
   currentColorScheme = value;
   notify();
 }
-function switchColorScheme(id) {
+function switchColorSchemeInternal(storageKey, id) {
   applyColorScheme(id);
-  persistColorScheme(id);
+  persistColorScheme(storageKey, id);
   currentColorScheme = id;
   resolved = true;
   notify();
   return id;
 }
-function useColorScheme(initialColorScheme = "system") {
+function useColorScheme(initialColorScheme = "system", options = {}) {
+  const { storageKey = colorScheme_constants.COLOR_SCHEME_STORAGE_KEY } = options;
   react.useEffect(() => {
-    ensureResolved(initialColorScheme);
-  }, [initialColorScheme]);
+    ensureResolved(initialColorScheme, storageKey);
+  }, [initialColorScheme, storageKey]);
   const colorScheme = react.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  function switchColorScheme(id) {
+    return switchColorSchemeInternal(storageKey, id);
+  }
   return { colorScheme, switchColorScheme };
 }
 

package/dist/hooks/useColorScheme.d.ts

@@ -1,6 +1,16 @@
 import type { ColorScheme } from '../utils/color-scheme.constants';
 export type { ColorScheme };
-export declare function useColorScheme(initialColorScheme?: ColorScheme): {
+export interface UseColorSchemeOptions {
+    /**
+     * Storage key used for the cookie + localStorage entry. Defaults to a
+     * shared key, so apps that run on the same origin (e.g. multiple products
+     * under one domain) should each pass their own value here — otherwise
+     * they'll unintentionally read and overwrite each other's persisted color
+     * scheme.
+     */
+    storageKey?: string;
+}
+export declare function useColorScheme(initialColorScheme?: ColorScheme, options?: UseColorSchemeOptions): {
     colorScheme: ColorScheme | null;
     switchColorScheme: (id: ColorScheme) => ColorScheme;
 };

package/dist/hooks/useColorScheme.js

@@ -1,12 +1,12 @@
 'use client';
 import { useEffect, useSyncExternalStore } from 'react';
-import { isColorScheme, COLOR_SCHEME_STORAGE_KEY } from '../utils/color-scheme.constants';
+import { COLOR_SCHEME_STORAGE_KEY, isColorScheme } from '../utils/color-scheme.constants';
 import { readCookie, writeCookie } from '../utils/cookie.utils';
 import { readLocalStorage, writeLocalStorage } from '../utils/localStorage.utils';
 
-function persistColorScheme(id) {
-  writeLocalStorage(COLOR_SCHEME_STORAGE_KEY, id);
-  writeCookie(COLOR_SCHEME_STORAGE_KEY, id);
+function persistColorScheme(storageKey, id) {
+  writeLocalStorage(storageKey, id);
+  writeCookie(storageKey, id);
 }
 function getDomColorScheme() {
   return document.documentElement.dataset.theme;
@@ -32,40 +32,44 @@ function getSnapshot() {
 function getServerSnapshot() {
   return null;
 }
-function resolveInitialColorScheme(initialColorScheme) {
+function resolveInitialColorScheme(storageKey, initialColorScheme) {
   const fromDomAttribute = getDomColorScheme();
   let resolvedColorScheme = isColorScheme(fromDomAttribute) ? fromDomAttribute : initialColorScheme;
-  const fromCookie = readCookie(COLOR_SCHEME_STORAGE_KEY);
+  const fromCookie = readCookie(storageKey);
   if (isColorScheme(fromCookie)) {
     resolvedColorScheme = fromCookie;
   } else {
-    const fromStorage = readLocalStorage(COLOR_SCHEME_STORAGE_KEY);
+    const fromStorage = readLocalStorage(storageKey);
     if (isColorScheme(fromStorage)) resolvedColorScheme = fromStorage;
   }
   return resolvedColorScheme;
 }
-function ensureResolved(initialColorScheme) {
+function ensureResolved(initialColorScheme, storageKey) {
   if (resolved) return;
   resolved = true;
-  const value = resolveInitialColorScheme(initialColorScheme);
+  const value = resolveInitialColorScheme(storageKey, initialColorScheme);
   applyColorScheme(value);
-  persistColorScheme(value);
+  persistColorScheme(storageKey, value);
   currentColorScheme = value;
   notify();
 }
-function switchColorScheme(id) {
+function switchColorSchemeInternal(storageKey, id) {
   applyColorScheme(id);
-  persistColorScheme(id);
+  persistColorScheme(storageKey, id);
   currentColorScheme = id;
   resolved = true;
   notify();
   return id;
 }
-function useColorScheme(initialColorScheme = "system") {
+function useColorScheme(initialColorScheme = "system", options = {}) {
+  const { storageKey = COLOR_SCHEME_STORAGE_KEY } = options;
   useEffect(() => {
-    ensureResolved(initialColorScheme);
-  }, [initialColorScheme]);
+    ensureResolved(initialColorScheme, storageKey);
+  }, [initialColorScheme, storageKey]);
   const colorScheme = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  function switchColorScheme(id) {
+    return switchColorSchemeInternal(storageKey, id);
+  }
   return { colorScheme, switchColorScheme };
 }
 

package/dist/hooks/useGetActiveTheme.cjs

@@ -4,9 +4,10 @@
 var useColorScheme = require('../hooks/useColorScheme');
 var useTheme = require('./useTheme');
 
-function useGetActiveTheme() {
-  const { theme } = useTheme.useTheme();
-  const { colorScheme } = useColorScheme.useColorScheme();
+function useGetActiveTheme(options = {}) {
+  const { storageKey, colorSchemeStorageKey } = options;
+  const { theme } = useTheme.useTheme({ storageKey });
+  const { colorScheme } = useColorScheme.useColorScheme("system", { storageKey: colorSchemeStorageKey });
   const themeKey = theme && colorScheme ? `${theme}-${colorScheme}` : null;
   return { theme, colorScheme, themeKey };
 }

package/dist/hooks/useGetActiveTheme.d.ts

@@ -1,9 +1,15 @@
 import type { ColorScheme } from '../utils/color-scheme.constants';
 import type { ThemeId } from './useTheme';
 export type { ColorScheme, ThemeId };
+export interface UseGetActiveThemeOptions {
+    /** Passed through to `useTheme` — must match the key used elsewhere in the app. */
+    storageKey?: string;
+    /** Passed through to `useColorScheme` — must match the key used elsewhere in the app. */
+    colorSchemeStorageKey?: string;
+}
 export interface UseGetActiveThemeResult {
     theme: ThemeId | null;
     colorScheme: ColorScheme | null;
     themeKey: string | null;
 }
-export declare function useGetActiveTheme(): UseGetActiveThemeResult;
+export declare function useGetActiveTheme(options?: UseGetActiveThemeOptions): UseGetActiveThemeResult;

package/dist/hooks/useGetActiveTheme.js

@@ -2,9 +2,10 @@
 import { useColorScheme } from '../hooks/useColorScheme';
 import { useTheme } from './useTheme';
 
-function useGetActiveTheme() {
-  const { theme } = useTheme();
-  const { colorScheme } = useColorScheme();
+function useGetActiveTheme(options = {}) {
+  const { storageKey, colorSchemeStorageKey } = options;
+  const { theme } = useTheme({ storageKey });
+  const { colorScheme } = useColorScheme("system", { storageKey: colorSchemeStorageKey });
   const themeKey = theme && colorScheme ? `${theme}-${colorScheme}` : null;
   return { theme, colorScheme, themeKey };
 }

package/dist/hooks/useTableData.cjs

@@ -15,17 +15,21 @@ function useTableData({
   const hasPagination = pagination != null;
   const nullsMode = (_a = sorting == null ? void 0 : sorting.nulls) != null ? _a : "last";
   const mergedComparators = react.useMemo(() => {
-    var _a2, _b2;
+    var _a2, _b2, _c2;
     const derived = {};
     for (const col of (_a2 = sorting == null ? void 0 : sorting.columns) != null ? _a2 : []) {
-      const colId = (_b2 = col.id) != null ? _b2 : col.accessorKey;
+      const accessorKey = "accessorKey" in col ? col.accessorKey : void 0;
+      const colId = (_b2 = col.id) != null ? _b2 : typeof accessorKey === "string" || typeof accessorKey === "number" ? String(accessorKey) : void 0;
       if (!colId) continue;
-      const accessorFn = col.accessorFn;
-      const accessorKey = col.accessorKey;
-      if (accessorFn) {
+      const accessorFn = "accessorFn" in col ? col.accessorFn : void 0;
+      const accessor = (_c2 = col.accessor) != null ? _c2 : accessorKey;
+      const sortFunction = col.sortFunction;
+      if (sortFunction) {
+        derived[colId] = (a, b, dir) => dir === "asc" ? sortFunction(a, b) : -sortFunction(a, b);
+      } else if (accessorFn) {
         derived[colId] = (a, b, dir) => useSorting.defaultCompare(accessorFn(a, 0), accessorFn(b, 0), dir, nullsMode);
-      } else if (accessorKey) {
-        derived[colId] = (a, b, dir) => useSorting.defaultCompare(a[accessorKey], b[accessorKey], dir, nullsMode);
+      } else if (accessor != null) {
+        derived[colId] = (a, b, dir) => useSorting.defaultCompare(a[accessor], b[accessor], dir, nullsMode);
       }
     }
     return { ...derived, ...sorting == null ? void 0 : sorting.columnComparators };

package/dist/hooks/useTableData.d.ts

@@ -1,7 +1,12 @@
-import type { ColumnDef } from '@tanstack/react-table';
 import type { PageChangeEvent } from '../components/pagination/Pagination';
+import type { ColumnItem } from '../components/table/Table.types';
 import { type PaginationState } from './usePagination';
 import { type SortDirection, type SortState, type ColumnComparators } from './useSorting';
+/** Sorting fields from Table, with support for existing accessor-shaped columns. */
+export interface UseTableDataColumn<T> extends Partial<Pick<ColumnItem<T>, 'id' | 'accessor' | 'sortFunction'>> {
+    accessorKey?: keyof T | string;
+    accessorFn?: (row: T, index: number) => unknown;
+}
 export interface UseTableDataProps<T> {
     data?: readonly T[];
     pagination?: {
@@ -18,7 +23,8 @@ export interface UseTableDataProps<T> {
         columnComparators?: ColumnComparators<T>;
         nulls?: 'first' | 'last';
         allowUnsort?: boolean;
-        columns?: ReadonlyArray<ColumnDef<T, any>>;
+        /** Reuse Table's columns. Explicit columnComparators override derived sorting. */
+        columns?: ReadonlyArray<ColumnItem<T> | UseTableDataColumn<T>>;
     };
     /**
      * Resets to page 1 whenever sorting changes (typical UX).

package/dist/hooks/useTableData.js

@@ -13,17 +13,21 @@ function useTableData({
   const hasPagination = pagination != null;
   const nullsMode = (_a = sorting == null ? void 0 : sorting.nulls) != null ? _a : "last";
   const mergedComparators = useMemo(() => {
-    var _a2, _b2;
+    var _a2, _b2, _c2;
     const derived = {};
     for (const col of (_a2 = sorting == null ? void 0 : sorting.columns) != null ? _a2 : []) {
-      const colId = (_b2 = col.id) != null ? _b2 : col.accessorKey;
+      const accessorKey = "accessorKey" in col ? col.accessorKey : void 0;
+      const colId = (_b2 = col.id) != null ? _b2 : typeof accessorKey === "string" || typeof accessorKey === "number" ? String(accessorKey) : void 0;
       if (!colId) continue;
-      const accessorFn = col.accessorFn;
-      const accessorKey = col.accessorKey;
-      if (accessorFn) {
+      const accessorFn = "accessorFn" in col ? col.accessorFn : void 0;
+      const accessor = (_c2 = col.accessor) != null ? _c2 : accessorKey;
+      const sortFunction = col.sortFunction;
+      if (sortFunction) {
+        derived[colId] = (a, b, dir) => dir === "asc" ? sortFunction(a, b) : -sortFunction(a, b);
+      } else if (accessorFn) {
         derived[colId] = (a, b, dir) => defaultCompare(accessorFn(a, 0), accessorFn(b, 0), dir, nullsMode);
-      } else if (accessorKey) {
-        derived[colId] = (a, b, dir) => defaultCompare(a[accessorKey], b[accessorKey], dir, nullsMode);
+      } else if (accessor != null) {
+        derived[colId] = (a, b, dir) => defaultCompare(a[accessor], b[accessor], dir, nullsMode);
       }
     }
     return { ...derived, ...sorting == null ? void 0 : sorting.columnComparators };

package/dist/hooks/useTableSettings.cjs

@@ -2,19 +2,18 @@
 'use strict';
 
 var react = require('react');
+var tableSettings_utils = require('../components/table/tableSettings.utils');
 var localStorage_utils = require('../utils/localStorage.utils');
 
 function getDefaultVisibleIds(tableColumns) {
   var _a;
-  return (_a = tableColumns == null ? void 0 : tableColumns.filter((c) => {
-    var _a2;
-    return !((_a2 = c.meta) == null ? void 0 : _a2.hidden);
-  }).map((c) => c.id).filter(Boolean)) != null ? _a : [];
+  return (_a = tableColumns == null ? void 0 : tableColumns.filter((c) => !tableSettings_utils.isSettingsColumnHidden(c)).map(tableSettings_utils.getSettingsColumnId).filter((id) => typeof id === "string" && id.length > 0)) != null ? _a : [];
 }
 function mergeDefaults(stored, defaults) {
   const viewMode = (stored == null ? void 0 : stored.viewMode) === "compact" || (stored == null ? void 0 : stored.viewMode) === "wrapped" ? stored.viewMode : defaults.viewMode;
   const visibleColumnIds = Array.isArray(stored == null ? void 0 : stored.visibleColumnIds) && stored.visibleColumnIds.length > 0 ? stored.visibleColumnIds : defaults.visibleColumnIds;
-  return { viewMode, visibleColumnIds };
+  const striped = typeof (stored == null ? void 0 : stored.striped) === "boolean" ? stored.striped : defaults.striped;
+  return { viewMode, visibleColumnIds, striped };
 }
 const localStorageTableSettingsStorage = {
   get: (key) => {
@@ -30,19 +29,23 @@ function useTableSettings({
   tableColumns,
   defaultViewMode = "compact",
   defaultVisibleColumnIds,
+  defaultStriped = false,
   storage = localStorageTableSettingsStorage
 }) {
   const defaults = react.useMemo(() => {
     return {
       viewMode: defaultViewMode,
-      visibleColumnIds: defaultVisibleColumnIds != null ? defaultVisibleColumnIds : getDefaultVisibleIds(tableColumns)
+      visibleColumnIds: defaultVisibleColumnIds != null ? defaultVisibleColumnIds : getDefaultVisibleIds(tableColumns),
+      striped: defaultStriped
     };
-  }, [defaultViewMode, defaultVisibleColumnIds, tableColumns]);
+  }, [defaultViewMode, defaultVisibleColumnIds, defaultStriped, tableColumns]);
   const [state, setState] = react.useState(defaults);
   react.useEffect(() => {
     const stored = storage.get(storageKey);
     const next = mergeDefaults(stored, defaults);
-    setState(next);
+    setState(
+      (prev) => prev.viewMode === next.viewMode && prev.striped === next.striped && prev.visibleColumnIds.length === next.visibleColumnIds.length && prev.visibleColumnIds.every((id, index) => id === next.visibleColumnIds[index]) ? prev : next
+    );
   }, [storageKey, storage, defaults]);
   const persist = react.useCallback(
     (next) => storage.set(storageKey, next),
@@ -77,12 +80,25 @@ function useTableSettings({
     },
     [persist]
   );
+  const setStriped = react.useCallback(
+    (nextStriped) => {
+      setState((prev) => {
+        if (prev.striped === nextStriped) return prev;
+        const next = { ...prev, striped: nextStriped };
+        persist(next);
+        return next;
+      });
+    },
+    [persist]
+  );
   return {
     viewMode: state.viewMode,
     toggleViewMode,
     setViewMode,
     visibleColumnIds: state.visibleColumnIds,
-    setVisibleColumnIds
+    setVisibleColumnIds,
+    striped: state.striped,
+    setStriped
   };
 }
 

package/dist/hooks/useTableSettings.d.ts

@@ -1,26 +1,29 @@
-import { ColumnDef } from '@tanstack/react-table';
-export type ViewMode = 'compact' | 'wrapped';
+import type { ColumnItem, TableSettingsColumn, ViewMode } from '../components/table/Table.types';
+export type { ViewMode } from '../components/table/Table.types';
 export type TableSettingsState = {
     viewMode: ViewMode;
     visibleColumnIds: string[];
+    striped: boolean;
 };
 export type TableSettingsStorage = {
     get: (key: string) => TableSettingsState | undefined;
     set: (key: string, next: TableSettingsState) => void;
 };
 export declare const localStorageTableSettingsStorage: TableSettingsStorage;
-interface UseTableSettingsOptions {
+export interface UseTableSettingsOptions<T = unknown> {
     storageKey: string;
-    tableColumns?: ColumnDef<any>[];
+    tableColumns?: ReadonlyArray<ColumnItem<T> | TableSettingsColumn>;
     defaultViewMode?: ViewMode;
     defaultVisibleColumnIds?: string[];
+    defaultStriped?: boolean;
     storage?: TableSettingsStorage;
 }
-export declare function useTableSettings({ storageKey, tableColumns, defaultViewMode, defaultVisibleColumnIds, storage, }: UseTableSettingsOptions): {
+export declare function useTableSettings<T = unknown>({ storageKey, tableColumns, defaultViewMode, defaultVisibleColumnIds, defaultStriped, storage, }: UseTableSettingsOptions<T>): {
     viewMode: ViewMode;
     toggleViewMode: () => void;
     setViewMode: (mode: ViewMode) => void;
     visibleColumnIds: string[];
     setVisibleColumnIds: (ids: string[]) => void;
+    striped: boolean;
+    setStriped: (nextStriped: boolean) => void;
 };
-export {};