@neovici/cosmoz-omnitable 14.14.3 → 14.15.0

package/{lib → dist/lib}/settings/cosmoz-omnitable-settings.js

@@ -9,34 +9,19 @@ import useSettingsUi from './use-settings-ui';
 import { close, pull, arrow } from '../icons';
 import { when } from 'lit-html/directives/when.js';
 import { sheet } from '@neovici/cosmoz-utils';
-
 const middleware = [
-	size({
-		apply({ availableHeight, elements }) {
-			Object.assign(elements.floating.style, {
-				maxHeight: `${Math.max(0, availableHeight)}px`,
-			});
-		},
-	}),
-	...defaultMiddleware,
+    size({
+        apply({ availableHeight, elements }) {
+            Object.assign(elements.floating.style, {
+                maxHeight: `${Math.max(0, availableHeight)}px`,
+            });
+        },
+    }),
+    ...defaultMiddleware,
 ];
-
-const renderItem =
-	({
-		onDragStart,
-		onDragEnter,
-		onDragOver,
-		onDragLeave,
-		onDrop,
-		onDown,
-		onToggle,
-		collapsed,
-		filters,
-	}) =>
-	(column, i) => {
-		const indeterminate = !!collapsed?.find((c) => c.name === column.name),
-			checked = !column.disabled && !indeterminate;
-		return html` <div
+const renderItem = ({ onDragStart, onDragEnter, onDragOver, onDragLeave, onDrop, onDown, onToggle, collapsed, filters, }) => (column, i) => {
+    const indeterminate = !!collapsed?.find((c) => c.name === column.name), checked = !column.disabled && !indeterminate;
+    return html ` <div
 			class="item"
 			data-index=${i}
 			@mousedown=${onDown}
@@ -59,28 +44,18 @@ const renderItem =
 				.indeterminate=${indeterminate}
 			/>
 		</div>`;
-	};
-
+};
 const SettingsUI = (host) => {
-	const {
-		settings,
-		settingsId,
-		onSave,
-		onReset,
-		hasChanges,
-		opened,
-		setOpened,
-		...thru
-	} = useSettingsUi(host);
-	return html` <div class="headline">
+    const { settings, settingsId, onSave, onReset, hasChanges, opened, setOpened, ...thru } = useSettingsUi(host);
+    return html ` <div class="headline">
 			${_('Sort and filter')}
 			<button
 				class="close"
 				@click=${(e) => {
-					const tg = e.currentTarget;
-					tg?.focus();
-					tg?.blur();
-				}}
+        const tg = e.currentTarget;
+        tg?.focus();
+        tg?.blur();
+    }}
 			>
 				${close}
 			</button>
@@ -124,10 +99,7 @@ const SettingsUI = (host) => {
 			>
 		</div>
 
-		${when(
-			settingsId,
-			() =>
-				html`<div class="buttons">
+		${when(settingsId, () => html `<div class="buttons">
 					<button
 						class="button reset"
 						@click=${onReset}
@@ -138,25 +110,15 @@ const SettingsUI = (host) => {
 					<button class="button" @click=${onSave} ?disabled=${!hasChanges}>
 						${_('Save')}
 					</button>
-				</div>`,
-		)}`;
+				</div>`)}`;
 };
-
-customElements.define(
-	'cosmoz-omnitable-settings-ui',
-	component(SettingsUI, { styleSheets: [sheet(style)] }),
-);
-
-const Settings = ({ config, newLayout }) => html`
+customElements.define('cosmoz-omnitable-settings-ui', component(SettingsUI, { styleSheets: [sheet(style)] }));
+const Settings = ({ config, newLayout }) => html `
 	<cosmoz-dropdown
 		.placement="${newLayout ? 'bottom-start' : 'bottom-end'}"
 		.middleware="${middleware}"
 	>
-		${when(
-			newLayout,
-			() => html`<div class="headerDots" slot="button">...</div>`,
-			() =>
-				html` <svg
+		${when(newLayout, () => html `<div class="headerDots" slot="button">...</div>`, () => html ` <svg
 					viewBox="0 0 24 24"
 					width="24"
 					slot="button"
@@ -165,17 +127,13 @@ const Settings = ({ config, newLayout }) => html`
 					<circle cx="10" cy="18" r="2"></circle>
 					<circle cx="10" cy="12" r="2"></circle>
 					<circle cx="10" cy="6" r="2"></circle>
-				</svg>`,
-		)}
-		${when(config?.badge, () => html`<div class="badge" slot="button"></div>`)}
+				</svg>`)}
+		${when(config?.badge, () => html `<div class="badge" slot="button"></div>`)}
 		<cosmoz-omnitable-settings-ui
 			exportparts="columns, groups"
 			.config=${config}
 		></cosmoz-omnitable-settings-ui>
 	</cosmoz-dropdown>
 `;
-
-customElements.define(
-	'cosmoz-omnitable-settings',
-	component(Settings, { styleSheets: [sheet(dropdownStyle)] }),
-);
+customElements.define('cosmoz-omnitable-settings', component(Settings, { styleSheets: [sheet(dropdownStyle)] }));
+//# sourceMappingURL=cosmoz-omnitable-settings.js.map

package/dist/lib/settings/cosmoz-omnitable-sort-group.d.ts

@@ -0,0 +1,14 @@
+export function render({ column, on, descending, setOn, setDescending }: {
+    column: any;
+    on: any;
+    descending: any;
+    setOn: any;
+    setDescending: any;
+}): import("lit-html").TemplateResult<1>;
+export function renderAll({ columns, ...thru }: {
+    [x: string]: any;
+    columns: any;
+}): any;
+export function group(): import("lit-html").TemplateResult<1>;
+export function sort(): import("lit-html").TemplateResult<1>;
+//# sourceMappingURL=cosmoz-omnitable-sort-group.d.ts.map

package/dist/lib/settings/cosmoz-omnitable-sort-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cosmoz-omnitable-sort-group.d.ts","sourceRoot":"","sources":["../../../src/lib/settings/cosmoz-omnitable-sort-group.js"],"names":[],"mappings":"AAIO;;;;;;yCAwBN;AAEM;;;QAC+C;AAE/C,8DAmBN;AAEM,6DAmBN"}

package/dist/lib/settings/cosmoz-omnitable-sort-group.js

@@ -0,0 +1,55 @@
+import { html } from '@pionjs/pion';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { triangle } from '../icons';
+export const render = ({ column, on, descending, setOn, setDescending }) => {
+    const { name, title } = column ?? {};
+    return html `<button
+		class="sg"
+		title=${title}
+		data-on=${ifDefined((name === on && (descending ? 'desc' : 'asc')) || undefined)}
+		@click=${(e) => {
+        const on = e.currentTarget?.dataset.on;
+        if (!on) {
+            setOn(name);
+            setDescending(false);
+        }
+        if (on === 'asc') {
+            setDescending(true);
+        }
+        else if (on === 'desc') {
+            setOn();
+            setDescending(false);
+        }
+    }}
+	>
+		<span>${title}</span> ${triangle}
+	</button>`;
+};
+export const renderAll = ({ columns, ...thru }) => columns?.map((column) => render({ column, ...thru }));
+export const group = () => html `
+	<sort-and-group-consumer
+		class="sgs"
+		.render=${({ columns, groupOn: on, setGroupOn: setOn, groupOnDescending: descending, setGroupOnDescending: setDescending, } = {}) => renderAll({
+    columns: columns?.filter?.((c) => c['groupOn']),
+    on,
+    setOn,
+    descending,
+    setDescending,
+})}
+	>
+	</sort-and-group-consumer>
+`;
+export const sort = () => html `
+	<sort-and-group-consumer
+		class="sgs"
+		.render=${({ columns, sortOn: on, setSortOn: setOn, descending, setDescending, } = {}) => renderAll({
+    columns: columns?.filter?.((c) => c['sortOn']),
+    on,
+    setOn,
+    descending,
+    setDescending,
+})}
+	>
+	</sort-and-group-consumer>
+`;
+//# sourceMappingURL=cosmoz-omnitable-sort-group.js.map

package/dist/lib/settings/drivers/context.d.ts

@@ -0,0 +1,12 @@
+export const DriverContext: import("@pionjs/pion/lib/create-context").Context<({ prefix }?: {
+    prefix?: string | undefined;
+}) => {
+    write: (settingsId: any, settings: any) => Promise<void>;
+    read: (settingsId: any) => Promise<any>;
+}>;
+export function useDriver(): {
+    write: (settingsId: any, settings: any) => Promise<void>;
+    read: (settingsId: any) => Promise<any>;
+};
+export function registerProvider(): void;
+//# sourceMappingURL=context.d.ts.map

package/dist/lib/settings/drivers/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/lib/settings/drivers/context.js"],"names":[],"mappings":"AAGa;;;;;GAAoC;AAA1C;;;EAYL;AAZK,yCAYL"}

package/dist/lib/settings/drivers/context.js

@@ -0,0 +1,11 @@
+import { createContext, useContext, useMemo } from '@pionjs/pion';
+import local from './local';
+export const DriverContext = createContext(local), useDriver = () => {
+    const driver = useContext(DriverContext);
+    return useMemo(() => driver(), [driver]);
+}, registerProvider = () => {
+    if (customElements.get('omnitable-settings-driver-provider'))
+        return;
+    customElements.define('omnitable-settings-driver-provider', DriverContext.Provider);
+};
+//# sourceMappingURL=context.js.map

package/dist/lib/settings/drivers/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./context";
+export { default as local } from "./local";
+export { default as remote } from "./remote";
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/settings/drivers/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/settings/drivers/index.js"],"names":[],"mappings":""}

package/{lib → dist/lib}/settings/drivers/index.js

@@ -1,3 +1,4 @@
 export * from './context';
 export { default as local } from './local';
 export { default as remote } from './remote';
+//# sourceMappingURL=index.js.map

package/dist/lib/settings/drivers/local.d.ts

@@ -0,0 +1,8 @@
+declare function _default({ prefix }?: {
+    prefix?: string | undefined;
+}): {
+    write: (settingsId: any, settings: any) => Promise<void>;
+    read: (settingsId: any) => Promise<any>;
+};
+export default _default;
+//# sourceMappingURL=local.d.ts.map

package/dist/lib/settings/drivers/local.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"local.d.ts","sourceRoot":"","sources":["../../../../src/lib/settings/drivers/local.js"],"names":[],"mappings":"AAAe;;;;;EA4Bd"}

package/dist/lib/settings/drivers/local.js

@@ -0,0 +1,33 @@
+export default ({ prefix = 'omnitable-' } = {}) => {
+    const read = async (settingsId) => {
+        if (!settingsId) {
+            return;
+        }
+        try {
+            return JSON.parse(localStorage.getItem(prefix + settingsId));
+        }
+        catch (e) {
+            // eslint-disable-next-line no-console
+            console.error(e);
+        }
+    };
+    return {
+        write: async (settingsId, settings) => {
+            const key = prefix + settingsId;
+            try {
+                if (settings) {
+                    localStorage.setItem(key, JSON.stringify(settings));
+                }
+                else {
+                    localStorage.removeItem(key);
+                }
+            }
+            catch (e) {
+                // eslint-disable-next-line no-console
+                console.error(e);
+            }
+        },
+        read,
+    };
+};
+//# sourceMappingURL=local.js.map

package/dist/lib/settings/drivers/remote.d.ts

@@ -0,0 +1,8 @@
+declare function _default({ prefix, get$, post$ }?: {
+    prefix?: string | undefined;
+}): {
+    write: (settingsId: any, settings?: {}) => Promise<void>;
+    read: (settingsId: any) => Promise<any>;
+};
+export default _default;
+//# sourceMappingURL=remote.d.ts.map

package/dist/lib/settings/drivers/remote.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"remote.d.ts","sourceRoot":"","sources":["../../../../src/lib/settings/drivers/remote.js"],"names":[],"mappings":"AAAe;;;;;EAqBd"}

package/dist/lib/settings/drivers/remote.js

@@ -0,0 +1,25 @@
+export default ({ prefix = '', get$, post$ } = {}) => {
+    const read = async (settingsId) => {
+        try {
+            return await get$(prefix + settingsId);
+        }
+        catch (e) {
+            // eslint-disable-next-line no-console
+            console.error(e);
+        }
+    };
+    return {
+        write: async (settingsId, settings = {}) => {
+            const key = prefix + settingsId;
+            try {
+                await post$(key, settings);
+            }
+            catch (e) {
+                // eslint-disable-next-line no-console
+                console.error(e);
+            }
+        },
+        read,
+    };
+};
+//# sourceMappingURL=remote.js.map

package/dist/lib/settings/index.d.ts

@@ -0,0 +1,2 @@
+export { default as useSettings } from "./use-settings";
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/settings/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/settings/index.js"],"names":[],"mappings":""}

package/{lib → dist/lib}/settings/index.js

@@ -1,3 +1,3 @@
 import './cosmoz-omnitable-settings';
-
 export { default as useSettings } from './use-settings';
+//# sourceMappingURL=index.js.map

package/dist/lib/settings/normalize.d.ts

@@ -0,0 +1,11 @@
+export const sgProps: string[];
+export function normalizeColumns(columns?: any[], settings?: any[], savedSettings?: any[]): any[];
+export function normalizeStore(settings: any, current: any): any;
+declare function _default({ columns, settings, savedSettings, initial }: {
+    columns: any;
+    settings: any;
+    savedSettings: any;
+    initial: any;
+}): any;
+export default _default;
+//# sourceMappingURL=normalize.d.ts.map

package/dist/lib/settings/normalize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"normalize.d.ts","sourceRoot":"","sources":["../../../src/lib/settings/normalize.js"],"names":[],"mappings":"AAEA,+BAAgF;AAIzE,kGA4CN;AAEM,iEAML;AAEa;;;;;QAed"}

package/dist/lib/settings/normalize.js

@@ -0,0 +1,47 @@
+import { props } from '@neovici/cosmoz-utils/object';
+export const sgProps = ['sortOn', 'descending', 'groupOn', 'groupOnDescending'];
+const byName = (name) => (item) => item.name === name;
+export const normalizeColumns = (columns = [], settings = [], savedSettings = []) => {
+    const _settings = settings.filter((setting) => columns.some(byName(setting.name))), cols = columns.filter((column) => !settings.some(byName(column.name)) &&
+        !savedSettings.some(byName(column.name))), _savedSettings = savedSettings.filter((column) => !settings.some(byName(column.name)));
+    return [
+        ..._settings,
+        ..._savedSettings.flatMap((setting) => {
+            const column = columns.find((c) => c.name === setting.name);
+            if (!column) {
+                return [];
+            }
+            return {
+                ...setting,
+                title: column.title,
+                minWidth: parseInt(column.minWidth, 10),
+            };
+        }),
+        ...cols.map((column) => {
+            const { name, title, priority, minWidth, width, flex } = column;
+            return {
+                name,
+                title,
+                priority,
+                minWidth: parseInt(minWidth, 10),
+                width: parseInt(width, 10),
+                flex: parseInt(flex, 10),
+            };
+        }),
+    ];
+};
+export const normalizeStore = (settings, current) => ({
+    ...current,
+    ...props(sgProps)(settings),
+    columns: settings.columns?.map(props(['name', 'priority', 'width', 'flex', 'disabled'])),
+});
+export default ({ columns, settings, savedSettings, initial }) => {
+    const init = Object.fromEntries(sgProps.flatMap((k) => (initial[k] != null ? [[k, initial[k]]] : [])));
+    return {
+        ...init,
+        ...props(sgProps)(savedSettings),
+        ...settings,
+        columns: normalizeColumns(columns, settings?.columns, savedSettings?.columns),
+    };
+};
+//# sourceMappingURL=normalize.js.map

package/dist/lib/settings/style.css.d.ts

@@ -0,0 +1,4 @@
+declare const _default: string;
+export default _default;
+export const dropdown: string;
+//# sourceMappingURL=style.css.d.ts.map

package/dist/lib/settings/style.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.css.d.ts","sourceRoot":"","sources":["../../../src/lib/settings/style.css.js"],"names":[],"mappings":";;AAoNA,8BAgDE"}

package/{lib → dist/lib}/settings/style.css.js

@@ -1,7 +1,6 @@
 import { tagged as css } from '@neovici/cosmoz-utils';
 import { checkbox } from '../../cosmoz-omnitable-styles';
-
-export default css`
+export default css `
 	:host {
 		box-sizing: border-box;
 		display: flex;
@@ -209,8 +208,7 @@ export default css`
 		transform: scaleY(-1);
 	}
 `;
-
-export const dropdown = css`
+export const dropdown = css `
 	:host {
 		display: contents;
 		color: var(
@@ -259,3 +257,4 @@ export const dropdown = css`
 		display: flex;
 	}
 `;
+//# sourceMappingURL=style.css.js.map

package/dist/lib/settings/use-saved-settings.d.ts

@@ -0,0 +1,9 @@
+declare function _default(settingsId: any, settings: any, setSettings: any, onReset: any): {
+    settingsId: any;
+    savedSettings: any;
+    onSave: () => Promise<void>;
+    onReset: (e: any) => Promise<void>;
+    hasChanges: boolean;
+};
+export default _default;
+//# sourceMappingURL=use-saved-settings.d.ts.map

package/dist/lib/settings/use-saved-settings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-saved-settings.d.ts","sourceRoot":"","sources":["../../../src/lib/settings/use-saved-settings.js"],"names":[],"mappings":"AAIe;;;;;;EAsCd"}

package/dist/lib/settings/use-saved-settings.js

@@ -0,0 +1,35 @@
+import { useCallback, useEffect, useState } from '@pionjs/pion';
+import { normalizeStore } from './normalize';
+import { useDriver } from './drivers';
+export default (settingsId, settings, setSettings, onReset) => {
+    const [savedSettings, setSavedSettings] = useState(), { read, write } = useDriver();
+    useEffect(async () => {
+        if (!settingsId) {
+            return;
+        }
+        setSavedSettings(await read(settingsId));
+    }, [settingsId, read]);
+    return {
+        settingsId,
+        savedSettings,
+        onSave: useCallback(async () => {
+            if (!settingsId) {
+                return;
+            }
+            const newSettings = normalizeStore(settings, savedSettings);
+            await write(settingsId, newSettings);
+            setSettings();
+            setSavedSettings(newSettings);
+        }, [settings, savedSettings]),
+        onReset: useCallback(async (e) => {
+            setSettings();
+            if (e.shiftKey) {
+                await write(settingsId);
+                setSavedSettings();
+            }
+            onReset?.();
+        }, [onReset]),
+        hasChanges: settings != null,
+    };
+};
+//# sourceMappingURL=use-saved-settings.js.map

package/dist/lib/settings/use-settings-ui.d.ts

@@ -0,0 +1,3 @@
+declare function _default(host: any): any;
+export default _default;
+//# sourceMappingURL=use-settings-ui.d.ts.map

package/dist/lib/settings/use-settings-ui.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-settings-ui.d.ts","sourceRoot":"","sources":["../../../src/lib/settings/use-settings-ui.js"],"names":[],"mappings":"AAQe,0CAoHd"}

package/dist/lib/settings/use-settings-ui.js

@@ -0,0 +1,78 @@
+import { useCallback } from '@pionjs/pion';
+import { useMeta } from '@neovici/cosmoz-utils/hooks/use-meta';
+const parseIndex = (str) => {
+    const idx = parseInt(str, 10);
+    return isFinite(idx) ? idx : undefined;
+};
+export default (host) => {
+    const { config } = host, { settings, setSettings, collapsed } = config, meta = useMeta({
+        collapsed,
+        settings: settings.columns,
+        setSettings: useCallback((columns) => setSettings((cfg) => ({ ...cfg, columns })), [setSettings]),
+    });
+    return {
+        ...config,
+        onDown: useCallback((e) => {
+            if (!e.target.closest('.pull')) {
+                return;
+            }
+            meta.handle = e.currentTarget;
+        }, [meta]),
+        onDragStart: useCallback((e) => {
+            const { target } = e, index = parseIndex(target.dataset.index);
+            if (!meta.handle?.contains(target) || index == null) {
+                return e.preventDefault();
+            }
+            meta.handle = null;
+            e.dataTransfer.effectAllowed = 'move';
+            e.dataTransfer.setData('omnitable/sort-index', index);
+            e.dataTransfer.setData('text/plain', index);
+            setTimeout(() => target.classList.add('drag'), 0);
+            target.addEventListener('dragend', (e) => e.target.classList.remove('drag'), { once: true });
+        }, [meta]),
+        onDragEnter: useCallback((e) => {
+            const ctg = e.currentTarget;
+            if (ctg !== e.target) {
+                return;
+            }
+            e.preventDefault();
+            e.dataTransfer.dropEffect = 'move';
+            ctg.classList.add('dragover');
+        }, []),
+        onDragOver: useCallback((e) => {
+            e.preventDefault();
+            e.currentTarget.classList.add('dragover');
+        }, []),
+        onDragLeave: useCallback((e) => {
+            const ctg = e.currentTarget;
+            if (ctg.contains(e.relatedTarget)) {
+                return;
+            }
+            ctg.classList.remove('dragover');
+        }, []),
+        onDrop: useCallback((e) => {
+            const from = parseIndex(e.dataTransfer.getData('omnitable/sort-index')), to = parseIndex(e.currentTarget.dataset.index), { settings, setSettings } = meta;
+            e.currentTarget.classList.remove('dragover');
+            e.preventDefault();
+            const newSettings = settings.slice();
+            newSettings.splice(to + (from >= to ? 0 : -1), 0, newSettings.splice(from, 1)[0]);
+            setSettings(newSettings);
+        }, [meta]),
+        onToggle: useCallback((e) => {
+            const { settings, setSettings } = meta, newSettings = settings.map((column) => ({
+                ...column,
+                disabled: column.disabled ||
+                    meta.collapsed?.some((c) => c.name === column.name),
+            })), idx = parseIndex(e.target.closest('[data-index]')?.dataset.index);
+            newSettings.splice(idx, 1, {
+                ...settings[idx],
+                disabled: !e.target.checked,
+                priority: e.target.checked
+                    ? settings.reduce((acc, s) => Math.max(acc, s.priority), 0) + 1
+                    : settings[idx].priority,
+            });
+            setSettings(newSettings);
+        }, [meta]),
+    };
+};
+//# sourceMappingURL=use-settings-ui.js.map

package/dist/lib/settings/use-settings.d.ts

@@ -0,0 +1,23 @@
+declare function _default({ settingsId, host }: {
+    settingsId: any;
+    host: any;
+}): {
+    opened: {
+        columns: boolean;
+        sort: boolean;
+    };
+    setOpened: import("@pionjs/pion").StateUpdater<{
+        columns: boolean;
+        sort: boolean;
+    }>;
+    settings: any;
+    columns: any;
+    setSettings: import("@pionjs/pion").StateUpdater<any>;
+    resetRef: import("@pionjs/pion").Ref<any>;
+    settingsId: any;
+    onSave: () => Promise<void>;
+    onReset: (e: any) => Promise<void>;
+    hasChanges: boolean;
+};
+export default _default;
+//# sourceMappingURL=use-settings.d.ts.map

package/dist/lib/settings/use-settings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-settings.d.ts","sourceRoot":"","sources":["../../../src/lib/settings/use-settings.js"],"names":[],"mappings":"AAMe;;;;;;;;;;;;;;;;;;;;EA8Cd"}

package/dist/lib/settings/use-settings.js

@@ -0,0 +1,26 @@
+import { useMemo, useState, useRef, useCallback } from '@pionjs/pion';
+import useSavedSettings from './use-saved-settings';
+import normalize, { sgProps } from './normalize';
+import { useDOMColumns } from '../use-dom-columns';
+export default ({ settingsId, host }) => {
+    const initial = useMemo(() => Object.fromEntries(sgProps.map((k) => [k, host[k]])), []), resetRef = useRef(), onReset = useCallback(() => {
+        resetRef.current?.(initial);
+    }, [initial]), [settings, setSettings] = useState(), [opened, setOpened] = useState({ columns: true, sort: true }), { savedSettings, ...rest } = useSavedSettings(settingsId, settings, setSettings, onReset), { enabledColumns } = host, columns = useDOMColumns(host, { enabledColumns }), normalizedSettings = useMemo(() => normalize({
+        columns,
+        settings,
+        savedSettings,
+        initial,
+    }), [columns, settings, savedSettings]), normalizedColumns = useMemo(() => normalizedSettings.columns
+        .map((s) => columns.find((c) => c.name === s.name))
+        .filter(Boolean), [columns, ...normalizedSettings.columns.map((s) => s.name)]);
+    return {
+        ...rest,
+        opened,
+        setOpened,
+        settings: normalizedSettings,
+        columns: normalizedColumns,
+        setSettings,
+        resetRef,
+    };
+};
+//# sourceMappingURL=use-settings.js.map

package/dist/lib/use-canvas-width.d.ts

@@ -0,0 +1,2 @@
+export function useCanvasWidth(host: any): any;
+//# sourceMappingURL=use-canvas-width.d.ts.map