pne-ui 4.0.8 → 4.0.9

package/esm/src/component/table/useTable.d.ts

@@ -0,0 +1,41 @@
+import { Dispatch, SetStateAction } from 'react';
+import { PaginatorProps, RowsPerPageOption } from './AbstractTable';
+import { SxProps } from '@mui/material';
+import { Order } from "../../common/pne/type";
+import { TableDisplayOptions } from "./type";
+type FetchDataArgs = {
+    page: number;
+    pageSize: number;
+    order: Order;
+    sortIndex: number;
+    extraDeps?: unknown[];
+};
+export type UseTableParams<D> = {
+    displayOptions?: Partial<TableDisplayOptions>;
+    onDisplayOptionsChange?: (options: TableDisplayOptions) => void;
+    paginatorActiveActionSx?: SxProps;
+    duplicatePagination?: boolean;
+    rowsPerPageOptions?: RowsPerPageOption[];
+    settingsContextName?: string;
+    dataUseState?: [D[], Dispatch<SetStateAction<D[]>>];
+    fetchData?: (args: FetchDataArgs) => Promise<D[]>;
+    fetchDataExtraDeps?: unknown[];
+};
+interface IUseTableResult<D> {
+    page: number;
+    pageSize: number;
+    loading: boolean;
+    setHasNext: Dispatch<SetStateAction<boolean>>;
+    paginator: PaginatorProps;
+    data: D[];
+    setData: Dispatch<SetStateAction<D[]>>;
+    setSortIndex: Dispatch<SetStateAction<number>>;
+    sortIndex: number;
+    setOrder: Dispatch<SetStateAction<Order>>;
+    order: Order;
+    onSortChange: (sortIndex: number, sortOrder: Order) => void;
+    useSimpleFetch: (dataGetter: () => Promise<D[]>) => void;
+}
+declare const useTable: <D>(params?: UseTableParams<D>) => IUseTableResult<D>;
+export default useTable;
+export declare const useIsFirstRender: () => boolean;

package/esm/src/component/table/useTable.js

@@ -0,0 +1,242 @@
+import { useEffect, useRef, useState } from 'react';
+import { ensure } from "../../common/pne/type";
+import { usePneTableStore } from "./state/store";
+const PAGE_SIZE_SETTING_NAME = 'page_size';
+const PAGE_NUMBER_SETTING_NAME = 'page_number';
+const SORT_INDEX_SETTING_NAME = 'sort_index';
+const SORT_ORDER_ASC_SETTING_NAME = 'sort_asc';
+const useTable = (params = {}) => {
+    const { displayOptions, onDisplayOptionsChange, paginatorActiveActionSx = {}, rowsPerPageOptions = [10, 25, 50 /*, {label: '∞', value: -1}*/], settingsContextName, dataUseState, fetchData, fetchDataExtraDeps, duplicatePagination, } = params;
+    const { needToScrollToPagination, setNeedToScrollToPagination, } = usePneTableStore((store) => ({
+        needToScrollToPagination: store.needToScrollToPagination,
+        setNeedToScrollToPagination: store.setNeedToScrollToPagination,
+    }));
+    // const [initialDisplayOptions, setInitialDisplayOptions] = useState<TableDisplayOptions>({
+    //     pageSize: 10,
+    //     sortColumnIndex: 1,
+    //     sortAsc: true
+    // })
+    let initialPageSize = rowsPerPageOptions[rowsPerPageOptions.length - 1];
+    if (displayOptions?.pageSize && rowsPerPageOptions.includes(displayOptions?.pageSize)) {
+        initialPageSize = displayOptions?.pageSize;
+    }
+    let initialSortIndex = displayOptions?.sortColumnIndex || 1;
+    let initialSortOrder = 'asc';
+    if (typeof displayOptions?.sortAsc !== 'undefined') {
+        initialSortOrder = displayOptions.sortAsc ? 'asc' : 'desc';
+    }
+    let initialPageNumber = 0;
+    if (settingsContextName) {
+        if (sessionStorage.hasOwnProperty(settingsContextName + PAGE_SIZE_SETTING_NAME)) {
+            initialPageSize = +ensure(sessionStorage.getItem(settingsContextName + PAGE_SIZE_SETTING_NAME));
+        }
+        if (sessionStorage.hasOwnProperty(settingsContextName + PAGE_NUMBER_SETTING_NAME)) {
+            initialPageNumber = +ensure(sessionStorage.getItem(settingsContextName + PAGE_NUMBER_SETTING_NAME));
+        }
+        if (sessionStorage.hasOwnProperty(settingsContextName + SORT_INDEX_SETTING_NAME)) {
+            initialSortIndex = +ensure(sessionStorage.getItem(settingsContextName + SORT_INDEX_SETTING_NAME));
+        }
+        if (sessionStorage.hasOwnProperty(settingsContextName + SORT_ORDER_ASC_SETTING_NAME)) {
+            initialSortOrder = ensure(sessionStorage.getItem(settingsContextName + SORT_ORDER_ASC_SETTING_NAME));
+        }
+    }
+    const [pageNumber, setPageNumber] = useState(initialPageNumber);
+    const [pageSize, setPageSize] = useState(initialPageSize);
+    const [hasNext, setHasNext] = useState(false);
+    const [disableActions, setDisableActions] = useState(false);
+    const [loading, setLoading] = useState(!!fetchData);
+    const [data, setData] = useState([]);
+    const [sortIndex, setSortIndex] = useState(initialSortIndex);
+    const [order, setOrder] = useState(initialSortOrder);
+    const getData = () => {
+        return dataUseState ? dataUseState[0] : data;
+    };
+    const getSetData = () => {
+        return dataUseState ? dataUseState[1] : setData;
+    };
+    useEffect(() => {
+        setPageSize(initialPageSize);
+    }, [initialPageSize]);
+    useEffect(() => {
+        setPageNumber(initialPageNumber);
+    }, [initialPageNumber]);
+    const isFirstRender = useIsFirstRender();
+    useEffect(() => {
+        if (!isFirstRender) {
+            if (getData().length === 0 && pageNumber !== 0) {
+                setPageNumber(0);
+            }
+        }
+    }, [getData().length]);
+    const displayedRowsLabel = () => {
+        if (getData().length === 0) {
+            if (pageNumber === 0) {
+                return 'Ø';
+            }
+            else {
+                return (pageNumber * pageSize + 1) + ' - ' + (pageNumber * pageSize + pageSize);
+            }
+        }
+        return (pageNumber * pageSize + 1) + ' - ' + (pageNumber * pageSize + getData().length);
+    };
+    const onSortChange = (sortIndex, sortOrder) => {
+        if (settingsContextName) {
+            sessionStorage.setItem(settingsContextName + SORT_INDEX_SETTING_NAME, sortIndex.toString());
+        }
+        if (settingsContextName) {
+            sessionStorage.setItem(settingsContextName + SORT_ORDER_ASC_SETTING_NAME, sortOrder);
+        }
+    };
+    const wrapSetHasNext = (hasNext) => {
+        setHasNext(hasNext);
+        setDisableActions(false);
+    };
+    const paginationRef = useRef(null);
+    const scrollToPagination = () => {
+        if (needToScrollToPagination) {
+            setTimeout(() => {
+                if (paginationRef.current) {
+                    paginationRef.current.scrollIntoView({ behavior: "smooth", block: "end" });
+                }
+            }, 100);
+            setNeedToScrollToPagination(false);
+        }
+    };
+    const paginator = {
+        rowsPerPageOptions: rowsPerPageOptions,
+        rowsPerPage: pageSize,
+        page: pageNumber,
+        disableActions: disableActions,
+        onPageChange: (event, newPage) => {
+            setDisableActions(true);
+            setPageNumber(newPage);
+            if (settingsContextName) {
+                sessionStorage.setItem(settingsContextName + PAGE_NUMBER_SETTING_NAME, newPage.toString());
+            }
+        },
+        onPageSizeChange: (pageSize) => {
+            //infinity case
+            if (pageSize < 0) {
+                setPageSize(999);
+                sessionStorage.setItem(settingsContextName + PAGE_SIZE_SETTING_NAME, '999');
+            }
+            else {
+                setPageSize(pageSize);
+                sessionStorage.setItem(settingsContextName + PAGE_SIZE_SETTING_NAME, pageSize.toString());
+            }
+            setPageNumber(0);
+            sessionStorage.setItem(settingsContextName + PAGE_NUMBER_SETTING_NAME, '0');
+            if (onDisplayOptionsChange) {
+                onDisplayOptionsChange({
+                    pageSize: pageSize,
+                    sortColumnIndex: sortIndex,
+                    sortAsc: order === 'asc'
+                });
+            }
+        },
+        hasNext,
+        displayedRowsLabel: displayedRowsLabel(),
+        activeActionSx: paginatorActiveActionSx,
+        duplicatePagination: duplicatePagination,
+        paginationRef: paginationRef,
+    };
+    const afterDataFetch = (dataList) => {
+        getSetData()(dataList.slice(0, pageSize));
+        wrapSetHasNext(dataList.length === pageSize + 1);
+        setLoading(false);
+        scrollToPagination();
+    };
+    const fetchDataDeps = [pageNumber, pageSize, order, sortIndex];
+    if (fetchDataExtraDeps) {
+        fetchDataDeps.push(...fetchDataExtraDeps);
+    }
+    const shouldSkipFetchDate = useRef(false);
+    useEffect(() => {
+        let mounted = true;
+        if (shouldSkipFetchDate.current) {
+            shouldSkipFetchDate.current = false;
+            return;
+        }
+        setLoading(true);
+        const asyncFetchData = async (args) => {
+            if (fetchData) {
+                try {
+                    let data = await fetchData(args);
+                    /**
+                     * Если получаем пустой массив, то проверим, первая ли это страница. Если нет, то, вероятно,
+                     * с новыми параметрами поиска сервер отдает меньший массив данных, и нам нужно сбросить страницу
+                     * на первую
+                     * Это нужно только для того, чтобы не было промежуточного отображения 'no rows' между этими
+                     * двумя запросами, в случае, когда первый раз получили пустой массив
+                     */
+                    if (data.length === 0 && args.page > 0) {
+                        // пробуем получить первую страницу данных с новыми параметрами поиска
+                        data = await fetchData({ ...args, page: 0 });
+                        // надо предотвратить следующую перерисовку из-за измененного pageNumber
+                        if (mounted) {
+                            shouldSkipFetchDate.current = true;
+                            setPageNumber(0);
+                        }
+                    }
+                    if (mounted) {
+                        afterDataFetch(data);
+                    }
+                }
+                catch (err) {
+                    console.error(err);
+                    if (mounted) {
+                        setLoading(false);
+                    }
+                }
+            }
+        };
+        asyncFetchData({
+            page: pageNumber,
+            pageSize,
+            order,
+            sortIndex,
+            extraDeps: fetchDataExtraDeps,
+        });
+        return () => {
+            mounted = false;
+        };
+    }, fetchDataDeps);
+    const useSimpleFetch = (getter) => {
+        if (fetchData) {
+            throw new Error('useTable: Do not use useSimpleFetch hook and dataGetter param together! It makes no sense');
+        }
+        useEffect(() => {
+            setLoading(true);
+            getter()
+                .then(afterDataFetch)
+                .catch((err) => {
+                console.error(err);
+                setLoading(false);
+            });
+        }, fetchDataDeps);
+    };
+    return {
+        page: pageNumber,
+        pageSize,
+        loading,
+        setHasNext: wrapSetHasNext,
+        paginator,
+        data: getData(),
+        setData: getSetData(),
+        sortIndex,
+        setSortIndex,
+        order,
+        setOrder,
+        onSortChange,
+        useSimpleFetch,
+    };
+};
+export default useTable;
+export const useIsFirstRender = () => {
+    const isMountRef = useRef(true);
+    useEffect(() => {
+        isMountRef.current = false;
+    }, []);
+    return isMountRef.current;
+};
+//# sourceMappingURL=useTable.js.map

package/esm/src/component/table/useTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTable.js","sourceRoot":"","sources":["../../../../src/component/table/useTable.ts"],"names":[],"mappings":"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"}

package/esm/src/component/useModal.d.ts

@@ -0,0 +1,8 @@
+import { Dispatch, SetStateAction } from "react";
+declare const useModal: () => {
+    open: boolean;
+    setOpen: Dispatch<SetStateAction<boolean>>;
+    handleOpen: () => void;
+    handleClose: () => void;
+};
+export default useModal;

package/esm/src/component/useModal.js

@@ -0,0 +1,14 @@
+import React from "react";
+const useModal = () => {
+    const [open, setOpen] = React.useState(false);
+    const handleOpen = () => setOpen(true);
+    const handleClose = () => setOpen(false);
+    return {
+        open,
+        setOpen,
+        handleOpen,
+        handleClose,
+    };
+};
+export default useModal;
+//# sourceMappingURL=useModal.js.map

package/esm/src/component/useModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useModal.js","sourceRoot":"","sources":["../../../src/component/useModal.ts"],"names":[],"mappings":"AAAA,OAAO,KAAiC,MAAM,OAAO,CAAC;AAEtD,MAAM,QAAQ,GAAG,GAKf,EAAE;IACA,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC7C,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;IACtC,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;IAExC,OAAO;QACH,IAAI;QACJ,OAAO;QACP,UAAU;QACV,WAAW;KACd,CAAA;AACL,CAAC,CAAA;AAED,eAAe,QAAQ,CAAA"}

package/esm/src/component/widget-board/WidgetBoard.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { WidgetBoardActionsState, WidgetBoardProps } from './types';
+export type WidgetBoardHandle = {
+    resetLayout: () => void;
+    restoreHidden: () => void;
+    getActionsState: () => WidgetBoardActionsState;
+};
+export type WidgetBoardInteractionState = {
+    isInteractionLocked: boolean;
+};
+export declare const WidgetBoardInteractionContext: React.Context<WidgetBoardInteractionState>;
+export declare const useWidgetBoardInteraction: () => WidgetBoardInteractionState;
+export declare const WidgetBoard: React.ForwardRefExoticComponent<WidgetBoardProps & React.RefAttributes<WidgetBoardHandle>>;

package/esm/src/component/widget-board/WidgetBoard.js

@@ -0,0 +1,326 @@
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useState } from 'react';
+import Board from '@cloudscape-design/board-components/board';
+import { Box } from '@mui/material';
+import { CloudscapeBoardStyles } from '../cloudscape/CloudscapeBoardStyles';
+import { CloudscapeThemeProvider } from '../cloudscape/CloudscapeThemeProvider';
+import { createBoardI18nStrings } from '../cloudscape/boardI18n';
+import { buildPresetFromState } from './layoutPersistence';
+import { useWidgetBoardAutosize } from './useWidgetBoardAutosize';
+import { useWidgetBoardInteractionLock } from './useWidgetBoardInteractionLock';
+import { useWidgetBoardLayoutActions } from './useWidgetBoardLayoutActions';
+import { useWidgetBoardLayoutSource } from './useWidgetBoardLayoutSource';
+import { useWidgetBoardScopeStore } from './WidgetBoardScope';
+import { useWidgetBoardStateActions } from './useWidgetBoardStateActions';
+import { WidgetBoardItem } from './WidgetBoardItem';
+import { WidgetBoardSkeleton } from './WidgetBoardSkeleton';
+import { buildDefaultState, buildLayoutOptions, getLayoutConfigForWidth, layoutOptionsEqual, withLayout, } from './widgetBoardLayoutUtils';
+const resolveLayoutForBreakpoint = (layoutByBreakpoint, breakpointKey) => layoutByBreakpoint[breakpointKey] ??
+    layoutByBreakpoint[String(breakpointKey)] ??
+    layoutByBreakpoint[Number(breakpointKey)] ??
+    Object.values(layoutByBreakpoint)[0];
+const normalizeHeightMode = (value) => value ?? 'auto';
+const stringifyColumnOffset = (value) => JSON.stringify(value ?? null);
+const getFixedHeightModeLocks = (layoutByBreakpoint, breakpointKey) => {
+    const layout = resolveLayoutForBreakpoint(layoutByBreakpoint, breakpointKey);
+    if (!layout)
+        return {};
+    return Object.fromEntries(Object.entries(layout.widgets)
+        .filter(([, widget]) => normalizeHeightMode(widget.heightMode) === 'fixed')
+        .map(([id]) => [id, true]));
+};
+const isSameWidgetLayout = (current, base, { ignoreHiddenState = false } = {}) => {
+    if (!current || !base)
+        return false;
+    const currentSize = current.defaultSize;
+    const baseSize = base.defaultSize;
+    const currentHeightMode = normalizeHeightMode(current.heightMode);
+    const baseHeightMode = normalizeHeightMode(base.heightMode);
+    if (currentHeightMode !== baseHeightMode)
+        return false;
+    if (currentSize.columnSpan !== baseSize.columnSpan ||
+        stringifyColumnOffset(currentSize.columnOffset) !== stringifyColumnOffset(baseSize.columnOffset)) {
+        return false;
+    }
+    // For auto-height widgets rowSpan is runtime-derived by autosize and should not mark layout as user-modified.
+    if (currentHeightMode === 'fixed' && currentSize.rowSpan !== baseSize.rowSpan) {
+        return false;
+    }
+    if (!ignoreHiddenState && Boolean(current.initialState?.isHidden) !== Boolean(base.initialState?.isHidden))
+        return false;
+    if (Boolean(current.initialState?.isCollapsed) !== Boolean(base.initialState?.isCollapsed))
+        return false;
+    return true;
+};
+const differsFromBaseLayout = (current, base, { hiddenWidgetIds, ignoreHiddenState = false } = {}) => {
+    if (!current || !base)
+        return false;
+    const hiddenSet = hiddenWidgetIds ? new Set(hiddenWidgetIds) : null;
+    const widgetIds = new Set([...Object.keys(current.widgets), ...Object.keys(base.widgets)]);
+    for (const widgetId of widgetIds) {
+        if (hiddenSet?.has(widgetId))
+            continue;
+        if (!isSameWidgetLayout(current.widgets[widgetId], base.widgets[widgetId], { ignoreHiddenState })) {
+            return true;
+        }
+    }
+    return false;
+};
+export const WidgetBoardInteractionContext = React.createContext({
+    isInteractionLocked: false,
+});
+export const useWidgetBoardInteraction = () => React.useContext(WidgetBoardInteractionContext);
+export const WidgetBoard = forwardRef(function WidgetBoard({ widgets, layoutByBreakpoint, loadLayouts, saveLayouts, onActionsStateChange, autoHeightEnabled = true, }, ref) {
+    const [isLoadingLayouts, setIsLoadingLayouts] = useState(true);
+    const scopeFabStore = useWidgetBoardScopeStore();
+    const { breakpoints, currentBreakpointKey, defaultOption, layoutOptions, layoutOptionsMap, layoutPreset, layoutSource, layoutSourceOwnerIdRef, loadRequestIdRef, lockedLayoutIdRef, selectedLayoutId, selectedLayoutRef, setLayoutOptions, setLayoutPreset, setLayoutSource, setSelectedLayoutId, } = useWidgetBoardLayoutSource({ layoutByBreakpoint });
+    useEffect(() => {
+        let cancelled = false;
+        const requestId = ++loadRequestIdRef.current;
+        setIsLoadingLayouts(true);
+        loadLayouts()
+            .then(result => {
+            if (cancelled || loadRequestIdRef.current !== requestId || !result?.options)
+                return;
+            const nextOptions = buildLayoutOptions(result.options, defaultOption);
+            setLayoutOptions(prev => (layoutOptionsEqual(prev, nextOptions) ? prev : nextOptions));
+            lockedLayoutIdRef.current = defaultOption.id;
+            const currentSelected = selectedLayoutRef.current;
+            let nextSelected = currentSelected && nextOptions.some(option => option.id === currentSelected) ? currentSelected : undefined;
+            if (result.selectedId && nextOptions.some(option => option.id === result.selectedId)) {
+                nextSelected = result.selectedId;
+            }
+            else if (!nextSelected) {
+                nextSelected = nextOptions[0]?.id;
+            }
+            const nextOptionsMap = new Map(nextOptions.map(option => [option.id, option]));
+            const nextLayoutSource = nextOptionsMap.get(nextSelected ?? '')?.layoutByBreakpoint ?? defaultOption.layoutByBreakpoint;
+            const nextBreakpoints = Object.keys(nextLayoutSource)
+                .map(Number)
+                .sort((a, b) => a - b);
+            const nextPreset = getLayoutConfigForWidth(typeof window !== 'undefined' ? window.innerWidth : undefined, nextLayoutSource, nextBreakpoints);
+            const nextBreakpointKey = String(nextPreset.breakpoint ?? nextBreakpoints[0]);
+            const fallbackForNext = nextLayoutSource[nextBreakpoints[0]] ?? Object.values(nextLayoutSource)[0] ?? { widgets: {} };
+            const nextDefinitions = withLayout(widgets, nextPreset.layout ?? fallbackForNext);
+            layoutSourceOwnerIdRef.current = nextSelected ?? defaultOption.id;
+            setLayoutSource(prev => (prev === nextLayoutSource ? prev : nextLayoutSource));
+            setLayoutPreset(nextPreset);
+            setLayoutState(buildDefaultState(nextDefinitions, nextBreakpointKey));
+            if (nextSelected && nextSelected !== currentSelected) {
+                setSelectedLayoutId(nextSelected);
+            }
+            else if (!currentSelected && nextSelected) {
+                setSelectedLayoutId(nextSelected);
+            }
+        })
+            .catch(error => {
+            console.warn('Failed to load widget layouts', error);
+        })
+            .finally(() => {
+            if (cancelled || loadRequestIdRef.current !== requestId)
+                return;
+            setIsLoadingLayouts(false);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [
+        defaultOption,
+        layoutSourceOwnerIdRef,
+        loadLayouts,
+        loadRequestIdRef,
+        lockedLayoutIdRef,
+        selectedLayoutRef,
+        setLayoutOptions,
+        setLayoutPreset,
+        setLayoutSource,
+        setSelectedLayoutId,
+        widgets,
+    ]);
+    const lockedHeightModeByWidgetId = useMemo(() => getFixedHeightModeLocks(layoutByBreakpoint, currentBreakpointKey), [currentBreakpointKey, layoutByBreakpoint]);
+    const fallbackLayoutConfig = useMemo(() => {
+        const firstKey = breakpoints[0];
+        return layoutSource[firstKey] ?? Object.values(layoutSource)[0];
+    }, [breakpoints, layoutSource]);
+    const definitionsWithLayout = useMemo(() => withLayout(widgets, layoutPreset.layout ?? fallbackLayoutConfig ?? { widgets: {} }), [fallbackLayoutConfig, layoutPreset.layout, widgets]);
+    const definitionsMap = useMemo(() => new Map(definitionsWithLayout.map(def => [def.id, def])), [definitionsWithLayout]);
+    const defaultBreakpointLayout = useMemo(() => resolveLayoutForBreakpoint(defaultOption.layoutByBreakpoint, currentBreakpointKey) ?? Object.values(defaultOption.layoutByBreakpoint)[0] ?? { widgets: {} }, [currentBreakpointKey, defaultOption.layoutByBreakpoint]);
+    const defaultDefinitionsWithLayout = useMemo(() => withLayout(widgets, defaultBreakpointLayout), [defaultBreakpointLayout, widgets]);
+    const defaultDefinitionsMap = useMemo(() => new Map(defaultDefinitionsWithLayout.map(def => [def.id, def])), [defaultDefinitionsWithLayout]);
+    const effectiveSelectedLayoutId = selectedLayoutId ?? defaultOption.id;
+    const [layoutState, setLayoutState] = useState(() => buildDefaultState(definitionsWithLayout, currentBreakpointKey));
+    const isInteractionLocked = useWidgetBoardInteractionLock();
+    const interactionState = useMemo(() => ({ isInteractionLocked }), [isInteractionLocked]);
+    const { boardRootRef, handleContentRef, measuredRowsRef, remeasureAll } = useWidgetBoardAutosize({
+        autoHeightEnabled,
+        lockedHeightModeByWidgetId,
+        definitionsMap,
+        currentBreakpointKey,
+        isInteractionLocked,
+        layoutPresetBreakpoint: layoutPreset.breakpoint,
+        setLayoutState,
+    });
+    useEffect(() => {
+        measuredRowsRef.current = {};
+        setLayoutState(buildDefaultState(definitionsWithLayout, currentBreakpointKey));
+    }, [currentBreakpointKey, definitionsWithLayout, measuredRowsRef]);
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        let frameId = null;
+        const run = () => {
+            frameId = null;
+            remeasureAll();
+            setLayoutPreset(getLayoutConfigForWidth(window.innerWidth, layoutSource, breakpoints));
+        };
+        const handleResize = () => {
+            if (frameId !== null)
+                return;
+            frameId = window.requestAnimationFrame(run);
+        };
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+            if (frameId !== null) {
+                window.cancelAnimationFrame(frameId);
+            }
+        };
+    }, [breakpoints, layoutSource, remeasureAll, setLayoutPreset]);
+    const buildCurrentPreset = useCallback(() => buildPresetFromState(layoutState, layoutSource, breakpoints, currentBreakpointKey), [breakpoints, currentBreakpointKey, layoutSource, layoutState]);
+    const { handleItemsChange, hideItem, setWidgetVisibility, resetLayout, restoreHidden, toggleCollapse } = useWidgetBoardStateActions({
+        currentBreakpointKey,
+        defaultDefinitionsMap,
+        definitionsMap,
+        definitionsWithLayout,
+        isDefaultLayoutSelected: effectiveSelectedLayoutId === defaultOption.id,
+        lockedHeightModeByWidgetId,
+        measuredRowsRef,
+        setLayoutState,
+    });
+    const actionsState = useMemo(() => {
+        const currentPreset = buildCurrentPreset();
+        const currentBreakpointLayout = resolveLayoutForBreakpoint(currentPreset, currentBreakpointKey);
+        let canResetLayout;
+        if (effectiveSelectedLayoutId === defaultOption.id) {
+            canResetLayout = differsFromBaseLayout(currentBreakpointLayout, defaultBreakpointLayout);
+        }
+        else {
+            const hiddenSet = new Set(layoutState.hidden);
+            const hasHiddenWidgets = hiddenSet.size > 0;
+            const visibleItems = layoutState.items.filter(item => {
+                const widgetId = item.id;
+                return definitionsMap.has(widgetId) && !hiddenSet.has(widgetId);
+            });
+            const visibleItemIdSet = new Set(visibleItems.map(item => item.id));
+            const defaultVisibleIds = defaultDefinitionsWithLayout
+                .filter(definition => definitionsMap.has(definition.id) && !hiddenSet.has(definition.id))
+                .map(definition => definition.id);
+            const hasDifferentVisibleWidgets = visibleItems.length !== defaultVisibleIds.length || defaultVisibleIds.some(id => !visibleItemIdSet.has(id));
+            const hasDifferentOrder = !hasHiddenWidgets && defaultVisibleIds.some((id, index) => visibleItems[index]?.id !== id);
+            if (hasDifferentVisibleWidgets || hasDifferentOrder) {
+                canResetLayout = true;
+            }
+            else {
+                const visibleItemsMap = new Map(visibleItems.map(item => [item.id, item]));
+                const collapsedSet = new Set(layoutState.collapsed);
+                const heightModeById = layoutState.heightModeMemory[currentBreakpointKey] ?? {};
+                canResetLayout = defaultVisibleIds.some(id => {
+                    const item = visibleItemsMap.get(id);
+                    const currentDefinition = definitionsMap.get(id);
+                    const defaultDefinition = defaultDefinitionsMap.get(id);
+                    if (!item || !currentDefinition || !defaultDefinition)
+                        return true;
+                    const defaultSize = defaultDefinition.layout.defaultSize;
+                    if (item.columnSpan !== defaultSize.columnSpan)
+                        return true;
+                    if (!hasHiddenWidgets && stringifyColumnOffset(item.columnOffset) !== stringifyColumnOffset(defaultSize.columnOffset))
+                        return true;
+                    const currentHeightMode = normalizeHeightMode(heightModeById[id] ?? currentDefinition.layout.heightMode);
+                    const defaultHeightMode = normalizeHeightMode(defaultDefinition.layout.heightMode);
+                    if (currentHeightMode !== defaultHeightMode)
+                        return true;
+                    if (currentHeightMode === 'fixed' && item.rowSpan !== defaultSize.rowSpan)
+                        return true;
+                    const isCollapsed = collapsedSet.has(id);
+                    const defaultIsCollapsed = Boolean(defaultDefinition.layout.initialState?.isCollapsed);
+                    if (isCollapsed !== defaultIsCollapsed)
+                        return true;
+                    return false;
+                });
+            }
+        }
+        return {
+            hasHiddenWidgets: layoutState.hidden.some(widgetId => definitionsMap.has(widgetId)),
+            canResetLayout,
+            isDefaultLayoutSelected: effectiveSelectedLayoutId === defaultOption.id,
+            selectedLayoutId: effectiveSelectedLayoutId,
+            defaultLayoutId: defaultOption.id,
+        };
+    }, [
+        buildCurrentPreset,
+        currentBreakpointKey,
+        defaultBreakpointLayout,
+        defaultDefinitionsMap,
+        defaultDefinitionsWithLayout,
+        defaultOption.id,
+        definitionsMap,
+        effectiveSelectedLayoutId,
+        layoutState.collapsed,
+        layoutState.heightModeMemory,
+        layoutState.hidden,
+        layoutState.items,
+    ]);
+    const visibilityItems = useMemo(() => {
+        const hiddenSet = new Set(layoutState.hidden);
+        return definitionsWithLayout.map(definition => ({
+            id: definition.id,
+            title: definition.title,
+            visible: !hiddenSet.has(definition.id),
+        }));
+    }, [definitionsWithLayout, layoutState.hidden]);
+    useWidgetBoardLayoutActions({
+        buildCurrentPreset,
+        defaultLayoutId: defaultOption.id,
+        isLoadingLayouts,
+        layoutOptions,
+        layoutOptionsMap,
+        layoutSourceOwnerIdRef,
+        lockedLayoutIdRef,
+        saveLayouts,
+        fabStore: scopeFabStore,
+        actionsState,
+        visibilityItems,
+        onSetWidgetVisibility: setWidgetVisibility,
+        onResetLayout: resetLayout,
+        onRestoreHidden: restoreHidden,
+        selectedLayoutId,
+        setLayoutOptions,
+        setSelectedLayoutId,
+    });
+    useEffect(() => {
+        onActionsStateChange?.(actionsState);
+    }, [actionsState, onActionsStateChange]);
+    useImperativeHandle(ref, () => ({
+        resetLayout,
+        restoreHidden,
+        getActionsState: () => actionsState,
+    }), [actionsState, resetLayout, restoreHidden]);
+    const visibleItems = useMemo(() => layoutState.items.filter(item => definitionsMap.has(item.id)), [layoutState.items, definitionsMap]);
+    const boardI18nStrings = useMemo(() => createBoardI18nStrings(item => item.data.title), []);
+    const renderItem = (item) => {
+        const widgetId = item.id;
+        const definition = definitionsMap.get(widgetId);
+        if (!definition)
+            return React.createElement(React.Fragment, null);
+        const isCollapsed = layoutState.collapsed.includes(widgetId);
+        const isHeightModeLocked = Boolean(lockedHeightModeByWidgetId[widgetId]);
+        const baseHeightMode = isHeightModeLocked ? 'fixed' : layoutState.heightModeMemory[currentBreakpointKey]?.[widgetId] ?? definition.layout.heightMode ?? 'auto';
+        const heightMode = autoHeightEnabled ? baseHeightMode : 'fixed';
+        return (React.createElement(WidgetBoardItem, { item: item, definition: definition, heightMode: heightMode, isCollapsed: isCollapsed, isInteractionLocked: isInteractionLocked, onContentRef: handleContentRef, onHide: hideItem, onToggleCollapse: toggleCollapse }));
+    };
+    const boardElement = (React.createElement(Board, { items: visibleItems, renderItem: renderItem, i18nStrings: boardI18nStrings, onItemsChange: handleItemsChange, empty: React.createElement(Box, { sx: { p: 2, color: 'text.secondary' } }, "No widgets available") }));
+    return (React.createElement(CloudscapeThemeProvider, null,
+        React.createElement(CloudscapeBoardStyles, { hideNavigationArrows: true }),
+        React.createElement(WidgetBoardInteractionContext.Provider, { value: interactionState },
+            React.createElement(Box, { "data-pne-widget-board": 'true', ref: boardRootRef, sx: { position: 'relative', display: 'flex', flexDirection: 'column', gap: 2 } }, isLoadingLayouts ? React.createElement(WidgetBoardSkeleton, null) : boardElement))));
+});
+//# sourceMappingURL=WidgetBoard.js.map