@open-pioneer/toc 1.0.0-dev.20251021074813 → 1.0.0

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @open-pioneer/toc
 
-## 1.0.0-dev.20251021074813
+## 1.0.0
 
 ### Minor Changes
 
@@ -41,17 +41,19 @@
 
 - cb5368f: Introduce Toc API for programmatic control of toc items, see [PR](https://github.com/open-pioneer/trails-openlayers-base-packages/pull/420).
 - 2732052: Icons have been changed to unify the appearance of the components. Preferably, Lucide react-icons are used.
-- 2abcaaf: Update to chakra-ui 3.27.1
+- 2abcaaf: Update to chakra-ui 3.28.0
 
 ### Patch Changes
 
 - 10d2fe7: Update dependencies
-- 9e9bc6e: Use new option `includeInternalLayers === true` for layer retrieval because internal layers are already handled by the Toc itself.
-- 138d85b: Update core packages to 4.1.0
+- 9e9bc6e: The implementation now uses the map model's `includeInternalLayers === true` option to retrieve layers.
+  Internal layers are not shown by default, unless their `listMode` is configured.
+- 138d85b: Update core packages to 4.2.0
 - da6a410: Update dependencies
 - Updated dependencies [c6180c6]
 - Updated dependencies [29a10df]
 - Updated dependencies [10d2fe7]
+- Updated dependencies [4f1e7bd]
 - Updated dependencies [2702df4]
 - Updated dependencies [12561fe]
 - Updated dependencies [5df900f]
@@ -59,6 +61,7 @@
 - Updated dependencies [b3709f1]
 - Updated dependencies [14c484e]
 - Updated dependencies [138d85b]
+- Updated dependencies [4f1e7bd]
 - Updated dependencies [aeb9000]
 - Updated dependencies [9e9bc6e]
 - Updated dependencies [b3709f1]
@@ -71,8 +74,8 @@
 - Updated dependencies [773fa2d]
 - Updated dependencies [2abcaaf]
 - Updated dependencies [da6a410]
-    - @open-pioneer/map@1.0.0-dev.20251021074813
-    - @open-pioneer/basemap-switcher@1.0.0-dev.20251021074813
+    - @open-pioneer/map@1.0.0
+    - @open-pioneer/basemap-switcher@1.0.0
 
 ## 0.11.0
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@open-pioneer/toc",
-  "version": "1.0.0-dev.20251021074813",
+  "version": "1.0.0",
   "description": "This package provides a UI component that displays the map content to the user and allows them to control it.",
   "keywords": [
     "open-pioneer-trails"
@@ -15,17 +15,17 @@
   },
   "dependencies": {
     "@chakra-ui/react": "^3.28.0",
-    "@open-pioneer/react-utils": "4.2.0-dev.20251021072202",
-    "@open-pioneer/runtime": "4.2.0-dev.20251021072202",
+    "@open-pioneer/react-utils": "^4.2.0",
+    "@open-pioneer/runtime": "^4.2.0",
     "classnames": "^2.5.1",
     "ol": "^10.6.1",
     "react": "^19.2.0",
     "react-icons": "^5.5.0",
-    "@open-pioneer/reactivity": "4.2.0-dev.20251021072202",
+    "@open-pioneer/reactivity": "^4.2.0",
     "@conterra/reactivity-core": "^0.8.0",
-    "@open-pioneer/chakra-snippets": "4.2.0-dev.20251021072202",
-    "@open-pioneer/basemap-switcher": "1.0.0-dev.20251021074813",
-    "@open-pioneer/map": "1.0.0-dev.20251021074813"
+    "@open-pioneer/chakra-snippets": "^4.2.0",
+    "@open-pioneer/basemap-switcher": "^1.0.0",
+    "@open-pioneer/map": "^1.0.0"
   },
   "exports": {
     "./package.json": "./package.json",

package/ui/LayerList/LayerItem.js

@@ -14,11 +14,13 @@ import { slug } from '../../utils/slug.js';
 import { useLoadState, useChildLayers } from './hooks.js';
 import { LayerItemMenu } from './LayerItemMenu.js';
 import { LayerList } from './LayerList.js';
+import { displayItemForLayer } from '../../utils/displayLayer.js';
 
 const LayerItem = memo(function LayerItem2(props) {
   const { layer } = props;
   const intl = useIntl();
-  const [tocItem, _tocModel, tocOptions, tocItemElemRef] = useTocItem(layer);
+  const display = useReactiveSnapshot(() => displayItemForLayer(layer), [layer]);
+  const [tocItem, _tocModel, tocOptions, tocItemElemRef] = useTocItem(layer, display);
   const expanded = useReactiveSnapshot(() => tocItem.isExpanded, [tocItem]);
   const isCollapsible = tocOptions ? tocOptions.collapsibleGroups : false;
   const layerGroupId = useId();
@@ -30,14 +32,12 @@ const LayerItem = memo(function LayerItem2(props) {
       title: layer.title,
       description: layer.description,
       isVisible: layer.visible,
-      isInternal: layer.internal,
       allChildrenHidden: !hasShownChildren(layer)
       //re-evaluates if a child layer's list mode or internal state changes
     };
   }, [layer]);
   const nestedChildren = useNestedChildren(layerGroupId, title, layer, intl);
   let hasNestedChildren = !!nestedChildren;
-  const display = displayLayerItem(layer);
   if (!display) {
     return null;
   }
@@ -159,7 +159,7 @@ function CollapseButton(props) {
     }
   );
 }
-function useTocItem(layer) {
+function useTocItem(layer, display) {
   const tocModel = useTocModel();
   const options = useReactiveSnapshot(() => tocModel.options, [tocModel]);
   const tocItemElemRef = useRef(null);
@@ -167,13 +167,16 @@ function useTocItem(layer) {
     return new TocItemImpl(layer, tocModel, !options.initiallyCollapsed);
   }, [layer, options.initiallyCollapsed, tocModel]);
   useEffect(() => {
+    if (!display) {
+      return;
+    }
     tocItem.setHtmlElement(tocItemElemRef.current ?? void 0);
     tocModel.registerItem(tocItem);
     return () => {
       tocItem.setHtmlElement(void 0);
       tocModel.unregisterItem(tocItem);
     };
-  }, [tocModel, tocItem]);
+  }, [tocModel, tocItem, display]);
   return [tocItem, tocModel, options, tocItemElemRef];
 }
 function useListMode(layer) {
@@ -196,22 +199,11 @@ function hasShownChildren(layer) {
     return false;
   } else {
     return layer.children.getItems().some((childLayer) => {
-      const isDisplayed = displayLayerItem(childLayer);
+      const isDisplayed = displayItemForLayer(childLayer);
       return isDisplayed;
     });
   }
 }
-function displayLayerItem(layer) {
-  const isInternal = layer.internal;
-  const listMode = layer.attributes.toc?.listMode;
-  if (listMode === "show" || listMode === "hide-children") {
-    return true;
-  } else if (isInternal || listMode === "hide") {
-    return false;
-  } else {
-    return true;
-  }
-}
 
 export { LayerItem };
 //# sourceMappingURL=LayerItem.js.map

package/ui/LayerList/LayerItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayerItem.js","sources":["LayerItem.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport {\n    Box,\n    Collapsible,\n    CollapsibleContent,\n    Flex,\n    Icon,\n    IconButton,\n    Spacer\n} from \"@chakra-ui/react\";\nimport { Checkbox } from \"@open-pioneer/chakra-snippets/checkbox\";\nimport { Tooltip } from \"@open-pioneer/chakra-snippets/tooltip\";\nimport { AnyLayer } from \"@open-pioneer/map\";\nimport { useReactiveSnapshot } from \"@open-pioneer/reactivity\";\nimport { PackageIntl } from \"@open-pioneer/runtime\";\nimport classNames from \"classnames\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport { memo, ReactNode, useEffect, useId, useMemo, useRef } from \"react\";\nimport { LuTriangleAlert, LuChevronDown, LuChevronRight } from \"react-icons/lu\";\nimport { TocItemImpl, useTocModel } from \"../../model/\";\nimport { slug } from \"../../utils/slug\";\nimport { useChildLayers, useLoadState } from \"./hooks\";\nimport { LayerItemMenu } from \"./LayerItemMenu\";\nimport { LayerList } from \"./LayerList\";\nimport { LayerTocAttributes } from \"../Toc\";\n\n/**\n * Renders a single layer as a list item.\n *\n * The item may have further nested list items if there are sublayers present.\n */\nexport const LayerItem = memo(function LayerItem(props: { layer: AnyLayer }): ReactNode {\n    const { layer } = props;\n    const intl = useIntl();\n    const [tocItem, _tocModel, tocOptions, tocItemElemRef] = useTocItem(layer);\n    const expanded = useReactiveSnapshot(() => tocItem.isExpanded, [tocItem]);\n    const isCollapsible = tocOptions ? tocOptions.collapsibleGroups : false;\n\n    const layerGroupId = useId();\n    const isAvailable = useLoadState(layer) !== \"error\";\n    const listMode = useListMode(layer)?.listMode;\n    const notAvailableLabel = intl.formatMessage({ id: \"layerNotAvailable\" });\n    const { title, description, isVisible, allChildrenHidden } = useReactiveSnapshot(() => {\n        return {\n            title: layer.title,\n            description: layer.description,\n            isVisible: layer.visible,\n            isInternal: layer.internal,\n            allChildrenHidden: !hasShownChildren(layer) //re-evaluates if a child layer's list mode or internal state changes\n        };\n    }, [layer]);\n\n    const nestedChildren = useNestedChildren(layerGroupId, title, layer, intl);\n    let hasNestedChildren = !!nestedChildren;\n\n    const display = displayLayerItem(layer);\n    if (!display) {\n        return null;\n    }\n    //all children hidden => do not render collapse button and child entries\n    if (allChildrenHidden || listMode === \"hide-children\") {\n        hasNestedChildren = false;\n    }\n\n    return (\n        <Box\n            as=\"li\"\n            className={classNames(\"toc-layer-item\", getClassNameForLayer(layer))}\n            ref={tocItemElemRef}\n        >\n            <Flex\n                className=\"toc-layer-item-content\"\n                width=\"100%\"\n                flexDirection=\"row\"\n                align=\"center\"\n                justifyContent=\"space-between\"\n                /** Gap to prevent bleeding of the buttons hover style into the layer title */\n                gap={2}\n                /** Aligned to the size of the (potential) menu button in LayerItemDescriptor */\n                minHeight={10}\n            >\n                {isCollapsible && (\n                    <CollapseButton\n                        layerTitle={title}\n                        layerGroupId={layerGroupId}\n                        expanded={expanded}\n                        onClick={() => tocItem.setExpanded(!expanded)}\n                        hasNestedChildren={hasNestedChildren}\n                    />\n                )}\n                <Checkbox\n                    // Keyboard navigation jumps only to Checkboxes and uses the texts inside this DOM node.\n                    // The aria-labels of Tooltip and Icon is ignored by screen reader because they are no child element of the checkbox.\n                    // To consider the notAvailableLabel, an aria-label at the checkbox is necessary.\n                    aria-label={title + (!isAvailable ? \" \" + notAvailableLabel : \"\")}\n                    checked={isVisible}\n                    disabled={!isAvailable}\n                    onCheckedChange={(event) =>\n                        updateLayerVisibility(\n                            layer,\n                            event.checked === true,\n                            tocOptions.autoShowParents\n                        )\n                    }\n                >\n                    {title}\n                </Checkbox>\n                {!isAvailable && (\n                    <Tooltip\n                        content={notAvailableLabel}\n                        positioning={{ placement: \"right\" }}\n                        openDelay={500}\n                        contentProps={{ className: \"toc-layer-item-content-tooltip\" }}\n                    >\n                        <span>\n                            <LuTriangleAlert\n                                className=\"toc-layer-item-content-icon\"\n                                color={\"red\"}\n                                aria-label={notAvailableLabel}\n                            />\n                        </span>\n                    </Tooltip>\n                )}\n                <Spacer />\n                <LayerItemMenu layer={layer} title={title} description={description} intl={intl} />\n            </Flex>\n            {hasNestedChildren && (\n                <Collapsible.Root open={expanded} className=\"toc-collapsible-item\">\n                    <CollapsibleContent>{nestedChildren}</CollapsibleContent>\n                </Collapsible.Root>\n            )}\n        </Box>\n    );\n});\n\nfunction useNestedChildren(\n    layerGroupId: string,\n    title: string,\n    layer: AnyLayer,\n    intl: PackageIntl\n) {\n    const childLayers = useChildLayers(layer);\n    const children = useMemo(() => {\n        if (childLayers?.length) {\n            return (\n                <LayerList\n                    id={layerGroupId}\n                    layers={childLayers}\n                    ml={4}\n                    aria-label={intl.formatMessage({ id: \"childgroupLabel\" }, { title: title })}\n                />\n            );\n        }\n        return undefined;\n    }, [layerGroupId, intl, title, childLayers]);\n    return children;\n}\n\nfunction CollapseButton(props: {\n    layerTitle: string;\n    layerGroupId: string;\n    expanded: boolean;\n    onClick: () => void;\n    hasNestedChildren: boolean;\n}) {\n    const { layerTitle, layerGroupId, expanded, onClick, hasNestedChildren } = props;\n    const icon = expanded ? <LuChevronDown /> : <LuChevronRight />;\n    const intl = useIntl();\n    return (\n        <IconButton\n            variant=\"ghost\"\n            borderRadius=\"full\"\n            padding={0}\n            className=\"toc-layer-item-collapse-button\"\n            onClick={onClick}\n            size=\"sm\"\n            focusRingOffset=\"-2px\"\n            aria-label={\n                expanded\n                    ? intl.formatMessage({ id: \"group.collapse\" }, { title: layerTitle })\n                    : intl.formatMessage({ id: \"group.expand\" }, { title: layerTitle })\n            }\n            aria-expanded={expanded}\n            aria-controls={layerGroupId}\n            //use visible:hidden for layers without children for correct indent\n            visibility={hasNestedChildren ? \"visible\" : \"hidden\"}\n            css={{\n                // Chakra theme adds a background to components with \"aria-expanded\" by default.\n                \"&:is([aria-expanded='true']):not(:hover)\": {\n                    background: \"none\"\n                }\n            }}\n        >\n            <Icon>{icon}</Icon>\n        </IconButton>\n    );\n}\n\n// Creates a toc item and registers it with the shared toc model.\nfunction useTocItem(layer: AnyLayer) {\n    const tocModel = useTocModel();\n    const options = useReactiveSnapshot(() => tocModel.options, [tocModel]);\n    const tocItemElemRef = useRef<HTMLDivElement>(null);\n    const tocItem = useMemo((): TocItemImpl => {\n        return new TocItemImpl(layer, tocModel, !options.initiallyCollapsed);\n    }, [layer, options.initiallyCollapsed, tocModel]);\n\n    // Register the item on the shared toc model\n    useEffect(() => {\n        tocItem.setHtmlElement(tocItemElemRef.current ?? undefined);\n        tocModel.registerItem(tocItem);\n        return () => {\n            tocItem.setHtmlElement(undefined);\n            tocModel.unregisterItem(tocItem);\n        };\n    }, [tocModel, tocItem]);\n\n    return [tocItem, tocModel, options, tocItemElemRef] as const;\n}\n\nfunction useListMode(layer: AnyLayer): LayerTocAttributes | undefined {\n    return useReactiveSnapshot(\n        () => layer.attributes.toc as LayerTocAttributes | undefined,\n        [layer]\n    );\n}\n\nfunction updateLayerVisibility(layer: AnyLayer, visible: boolean, autoShowParents: boolean) {\n    layer.setVisible(visible);\n    if (visible && autoShowParents && layer.parent) {\n        updateLayerVisibility(layer.parent, true, true);\n    }\n}\n\nfunction getClassNameForLayer(layer: AnyLayer) {\n    return `layer-${slug(layer.id)}`;\n}\n\n/**\n * Checks if at least on child layer of the given layer exists and should be displayed.\n * @param layer\n * @returns true if at least one child layer's display mode is not `hide`\n */\nfunction hasShownChildren(layer: AnyLayer): boolean {\n    if (!layer.children || layer.children.getItems().length === 0) {\n        return false;\n    } else {\n        return layer.children.getItems().some((childLayer) => {\n            const isDisplayed = displayLayerItem(childLayer);\n            return isDisplayed;\n        });\n    }\n}\n\n/**\n * Checks if a layer should be displayed in the Toc.\n */\nfunction displayLayerItem(layer: AnyLayer): boolean {\n    const isInternal = layer.internal;\n    const listMode = (layer.attributes.toc as LayerTocAttributes | undefined)?.listMode;\n\n    if (listMode === \"show\" || listMode === \"hide-children\") {\n        return true;\n    } else if (isInternal || listMode === \"hide\") {\n        return false;\n    } else {\n        return true;\n    }\n}\n"],"names":["LayerItem"],"mappings":"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"}
+{"version":3,"file":"LayerItem.js","sources":["LayerItem.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport {\n    Box,\n    Collapsible,\n    CollapsibleContent,\n    Flex,\n    Icon,\n    IconButton,\n    Spacer\n} from \"@chakra-ui/react\";\nimport { Checkbox } from \"@open-pioneer/chakra-snippets/checkbox\";\nimport { Tooltip } from \"@open-pioneer/chakra-snippets/tooltip\";\nimport { AnyLayer } from \"@open-pioneer/map\";\nimport { useReactiveSnapshot } from \"@open-pioneer/reactivity\";\nimport { PackageIntl } from \"@open-pioneer/runtime\";\nimport classNames from \"classnames\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport { memo, ReactNode, useEffect, useId, useMemo, useRef } from \"react\";\nimport { LuTriangleAlert, LuChevronDown, LuChevronRight } from \"react-icons/lu\";\nimport { TocItemImpl, useTocModel } from \"../../model/\";\nimport { slug } from \"../../utils/slug\";\nimport { useChildLayers, useLoadState } from \"./hooks\";\nimport { LayerItemMenu } from \"./LayerItemMenu\";\nimport { LayerList } from \"./LayerList\";\nimport { LayerTocAttributes } from \"../Toc\";\nimport { displayItemForLayer } from \"../../utils/displayLayer\";\n\n/**\n * Renders a single layer as a list item.\n *\n * The item may have further nested list items if there are sublayers present.\n */\nexport const LayerItem = memo(function LayerItem(props: { layer: AnyLayer }): ReactNode {\n    const { layer } = props;\n    const intl = useIntl();\n    const display = useReactiveSnapshot(() => displayItemForLayer(layer), [layer]);\n    const [tocItem, _tocModel, tocOptions, tocItemElemRef] = useTocItem(layer, display);\n    const expanded = useReactiveSnapshot(() => tocItem.isExpanded, [tocItem]);\n    const isCollapsible = tocOptions ? tocOptions.collapsibleGroups : false;\n\n    const layerGroupId = useId();\n    const isAvailable = useLoadState(layer) !== \"error\";\n    const listMode = useListMode(layer)?.listMode;\n    const notAvailableLabel = intl.formatMessage({ id: \"layerNotAvailable\" });\n    const { title, description, isVisible, allChildrenHidden } = useReactiveSnapshot(() => {\n        return {\n            title: layer.title,\n            description: layer.description,\n            isVisible: layer.visible,\n            allChildrenHidden: !hasShownChildren(layer) //re-evaluates if a child layer's list mode or internal state changes\n        };\n    }, [layer]);\n\n    const nestedChildren = useNestedChildren(layerGroupId, title, layer, intl);\n    let hasNestedChildren = !!nestedChildren;\n\n\n    if (!display) {\n        return null;\n    } \n    //all children hidden => do not render collapse button and child entries\n    if (allChildrenHidden || listMode === \"hide-children\") {\n        hasNestedChildren = false;\n    }\n\n    return (\n        <Box\n            as=\"li\"\n            className={classNames(\"toc-layer-item\", getClassNameForLayer(layer))}\n            ref={tocItemElemRef}\n        >\n            <Flex\n                className=\"toc-layer-item-content\"\n                width=\"100%\"\n                flexDirection=\"row\"\n                align=\"center\"\n                justifyContent=\"space-between\"\n                /** Gap to prevent bleeding of the buttons hover style into the layer title */\n                gap={2}\n                /** Aligned to the size of the (potential) menu button in LayerItemDescriptor */\n                minHeight={10}\n            >\n                {isCollapsible && (\n                    <CollapseButton\n                        layerTitle={title}\n                        layerGroupId={layerGroupId}\n                        expanded={expanded}\n                        onClick={() => tocItem.setExpanded(!expanded)}\n                        hasNestedChildren={hasNestedChildren}\n                    />\n                )}\n                <Checkbox\n                    // Keyboard navigation jumps only to Checkboxes and uses the texts inside this DOM node.\n                    // The aria-labels of Tooltip and Icon is ignored by screen reader because they are no child element of the checkbox.\n                    // To consider the notAvailableLabel, an aria-label at the checkbox is necessary.\n                    aria-label={title + (!isAvailable ? \" \" + notAvailableLabel : \"\")}\n                    checked={isVisible}\n                    disabled={!isAvailable}\n                    onCheckedChange={(event) =>\n                        updateLayerVisibility(\n                            layer,\n                            event.checked === true,\n                            tocOptions.autoShowParents\n                        )\n                    }\n                >\n                    {title}\n                </Checkbox>\n                {!isAvailable && (\n                    <Tooltip\n                        content={notAvailableLabel}\n                        positioning={{ placement: \"right\" }}\n                        openDelay={500}\n                        contentProps={{ className: \"toc-layer-item-content-tooltip\" }}\n                    >\n                        <span>\n                            <LuTriangleAlert\n                                className=\"toc-layer-item-content-icon\"\n                                color={\"red\"}\n                                aria-label={notAvailableLabel}\n                            />\n                        </span>\n                    </Tooltip>\n                )}\n                <Spacer />\n                <LayerItemMenu layer={layer} title={title} description={description} intl={intl} />\n            </Flex>\n            {hasNestedChildren && (\n                <Collapsible.Root open={expanded} className=\"toc-collapsible-item\">\n                    <CollapsibleContent>{nestedChildren}</CollapsibleContent>\n                </Collapsible.Root>\n            )}\n        </Box>\n    );\n});\n\nfunction useNestedChildren(\n    layerGroupId: string,\n    title: string,\n    layer: AnyLayer,\n    intl: PackageIntl\n) {\n    const childLayers = useChildLayers(layer);\n    const children = useMemo(() => {\n        if (childLayers?.length) {\n            return (\n                <LayerList\n                    id={layerGroupId}\n                    layers={childLayers}\n                    ml={4}\n                    aria-label={intl.formatMessage({ id: \"childgroupLabel\" }, { title: title })}\n                />\n            );\n        }\n        return undefined;\n    }, [layerGroupId, intl, title, childLayers]);\n    return children;\n}\n\nfunction CollapseButton(props: {\n    layerTitle: string;\n    layerGroupId: string;\n    expanded: boolean;\n    onClick: () => void;\n    hasNestedChildren: boolean;\n}) {\n    const { layerTitle, layerGroupId, expanded, onClick, hasNestedChildren } = props;\n    const icon = expanded ? <LuChevronDown /> : <LuChevronRight />;\n    const intl = useIntl();\n    return (\n        <IconButton\n            variant=\"ghost\"\n            borderRadius=\"full\"\n            padding={0}\n            className=\"toc-layer-item-collapse-button\"\n            onClick={onClick}\n            size=\"sm\"\n            focusRingOffset=\"-2px\"\n            aria-label={\n                expanded\n                    ? intl.formatMessage({ id: \"group.collapse\" }, { title: layerTitle })\n                    : intl.formatMessage({ id: \"group.expand\" }, { title: layerTitle })\n            }\n            aria-expanded={expanded}\n            aria-controls={layerGroupId}\n            //use visible:hidden for layers without children for correct indent\n            visibility={hasNestedChildren ? \"visible\" : \"hidden\"}\n            css={{\n                // Chakra theme adds a background to components with \"aria-expanded\" by default.\n                \"&:is([aria-expanded='true']):not(:hover)\": {\n                    background: \"none\"\n                }\n            }}\n        >\n            <Icon>{icon}</Icon>\n        </IconButton>\n    );\n}\n\n// Creates a toc item and registers it with the shared toc model.\nfunction useTocItem(layer: AnyLayer, display: boolean) {\n    const tocModel = useTocModel();\n    const options = useReactiveSnapshot(() => tocModel.options, [tocModel]);\n    const tocItemElemRef = useRef<HTMLDivElement>(null);\n    const tocItem = useMemo((): TocItemImpl => {\n        return new TocItemImpl(layer, tocModel, !options.initiallyCollapsed);\n    }, [layer, options.initiallyCollapsed, tocModel]);\n\n    // Register the item on the shared toc model\n    useEffect(() => {\n        if (!display) {\n            return; //prevent registering if item is not displayed\n        }\n        tocItem.setHtmlElement(tocItemElemRef.current ?? undefined);\n        tocModel.registerItem(tocItem);\n        return () => {\n            tocItem.setHtmlElement(undefined);\n            tocModel.unregisterItem(tocItem);\n        };\n    }, [tocModel, tocItem, display]);\n\n    return [tocItem, tocModel, options, tocItemElemRef] as const;\n}\n\nfunction useListMode(layer: AnyLayer): LayerTocAttributes | undefined {\n    return useReactiveSnapshot(\n        () => layer.attributes.toc as LayerTocAttributes | undefined,\n        [layer]\n    );\n}\n\nfunction updateLayerVisibility(layer: AnyLayer, visible: boolean, autoShowParents: boolean) {\n    layer.setVisible(visible);\n    if (visible && autoShowParents && layer.parent) {\n        updateLayerVisibility(layer.parent, true, true);\n    }\n}\n\nfunction getClassNameForLayer(layer: AnyLayer) {\n    return `layer-${slug(layer.id)}`;\n}\n\n/**\n * Checks if at least on child layer of the given layer exists and should be displayed.\n * @param layer\n * @returns true if at least one child layer's display mode is not `hide`\n */\nfunction hasShownChildren(layer: AnyLayer): boolean {\n    if (!layer.children || layer.children.getItems().length === 0) {\n        return false;\n    } else {\n        return layer.children.getItems().some((childLayer) => {\n            const isDisplayed = displayItemForLayer(childLayer);\n            return isDisplayed;\n        });\n    }\n}\n\n\n"],"names":["LayerItem"],"mappings":"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"}

package/ui/LayerList/LayerList.js

@@ -4,12 +4,15 @@ import { useIntl } from '../../_virtual/_virtual-pioneer-module_react-hooks.js';
 import { memo, useMemo } from 'react';
 import { LayerItem } from './LayerItem.js';
 import { useLayers } from './hooks.js';
+import { displayItemForLayer } from '../../utils/displayLayer.js';
+import { useReactiveSnapshot } from '@open-pioneer/reactivity';
 
 const TopLevelLayerList = memo(function TopLevelLayerList2(props) {
   const { map, "aria-label": ariaLabel } = props;
   const intl = useIntl();
   const layers = useLayers(map);
-  if (!layers.length) {
+  const empty = useReactiveSnapshot(() => isEmpty(layers), [layers]);
+  if (empty) {
     return /* @__PURE__ */ jsx(Text, { className: "toc-missing-layers", "aria-label": ariaLabel, children: intl.formatMessage({ id: "missingLayers" }) });
   }
   return /* @__PURE__ */ jsx(LayerList, { layers, "aria-label": ariaLabel });
@@ -31,6 +34,10 @@ const LayerList = memo(function LayerList2(props) {
     }
   );
 });
+function isEmpty(layers) {
+  const isEmpty2 = !layers.length || layers.every((l) => !displayItemForLayer(l));
+  return isEmpty2;
+}
 
 export { LayerList, TopLevelLayerList };
 //# sourceMappingURL=LayerList.js.map

package/ui/LayerList/LayerList.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayerList.js","sources":["LayerList.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { List, ListRootProps, Text } from \"@chakra-ui/react\";\nimport { AnyLayer, MapModel } from \"@open-pioneer/map\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport { memo, useMemo } from \"react\";\nimport { LayerItem } from \"./LayerItem\";\nimport { useLayers } from \"./hooks\";\n\ninterface TopLevelLayerListProps {\n    map: MapModel;\n\n    /** The label of the list group (<ul>) */\n    \"aria-label\"?: string;\n}\n\n/**\n * Lists the operational layers in the map.\n */\nexport const TopLevelLayerList = memo(function TopLevelLayerList(props: TopLevelLayerListProps) {\n    const { map, \"aria-label\": ariaLabel } = props;\n    const intl = useIntl();\n    const layers = useLayers(map);\n\n    if (!layers.length) {\n        return (\n            <Text className=\"toc-missing-layers\" aria-label={ariaLabel}>\n                {intl.formatMessage({ id: \"missingLayers\" })}\n            </Text>\n        );\n    }\n\n    return <LayerList layers={layers} aria-label={ariaLabel} />;\n});\n\n/**\n * Renders the given layers as a list (<ul>).\n */\nexport const LayerList = memo(function LayerList(props: { layers: AnyLayer[] } & ListRootProps) {\n    const { layers, ...listProps } = props;\n    const items = useMemo(\n        () => layers.map((layer) => <LayerItem key={layer.id} layer={layer} />),\n        [layers]\n    );\n\n    return (\n        <List.Root\n            // Note: not using UnorderedList because it adds default margins\n            as=\"ul\"\n            className=\"toc-layer-list\"\n            listStyleType=\"none\"\n            {...listProps}\n        >\n            {items}\n        </List.Root>\n    );\n});\n"],"names":["TopLevelLayerList","LayerList"],"mappings":";;;;;;;AAmBO,MAAM,iBAAA,GAAoB,IAAA,CAAK,SAASA,kBAAAA,CAAkB,KAAA,EAA+B;AAC5F,EAAA,MAAM,EAAE,GAAA,EAAK,YAAA,EAAc,SAAA,EAAU,GAAI,KAAA;AACzC,EAAA,MAAM,OAAO,OAAA,EAAQ;AACrB,EAAA,MAAM,MAAA,GAAS,UAAU,GAAG,CAAA;AAE5B,EAAA,IAAI,CAAC,OAAO,MAAA,EAAQ;AAChB,IAAA,uBACI,GAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAU,oBAAA,EAAqB,YAAA,EAAY,SAAA,EAC5C,QAAA,EAAA,IAAA,CAAK,aAAA,CAAc,EAAE,EAAA,EAAI,eAAA,EAAiB,CAAA,EAC/C,CAAA;AAAA,EAER;AAEA,EAAA,uBAAO,GAAA,CAAC,SAAA,EAAA,EAAU,MAAA,EAAgB,YAAA,EAAY,SAAA,EAAW,CAAA;AAC7D,CAAC;AAKM,MAAM,SAAA,GAAY,IAAA,CAAK,SAASC,UAAAA,CAAU,KAAA,EAA+C;AAC5F,EAAA,MAAM,EAAE,MAAA,EAAQ,GAAG,SAAA,EAAU,GAAI,KAAA;AACjC,EAAA,MAAM,KAAA,GAAQ,OAAA;AAAA,IACV,MAAM,MAAA,CAAO,GAAA,CAAI,CAAC,KAAA,yBAAW,SAAA,EAAA,EAAyB,KAAA,EAAA,EAAV,KAAA,CAAM,EAAkB,CAAE,CAAA;AAAA,IACtE,CAAC,MAAM;AAAA,GACX;AAEA,EAAA,uBACI,GAAA;AAAA,IAAC,IAAA,CAAK,IAAA;AAAA,IAAL;AAAA,MAEG,EAAA,EAAG,IAAA;AAAA,MACH,SAAA,EAAU,gBAAA;AAAA,MACV,aAAA,EAAc,MAAA;AAAA,MACb,GAAG,SAAA;AAAA,MAEH,QAAA,EAAA;AAAA;AAAA,GACL;AAER,CAAC;;;;"}
+{"version":3,"file":"LayerList.js","sources":["LayerList.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { List, ListRootProps, Text } from \"@chakra-ui/react\";\nimport { AnyLayer, MapModel, Layer } from \"@open-pioneer/map\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport { memo, useMemo } from \"react\";\nimport { LayerItem } from \"./LayerItem\";\nimport { useLayers } from \"./hooks\";\nimport { displayItemForLayer } from \"../../utils/displayLayer\";\nimport { useReactiveSnapshot } from \"@open-pioneer/reactivity\";\n\ninterface TopLevelLayerListProps {\n    map: MapModel;\n\n    /** The label of the list group (<ul>) */\n    \"aria-label\"?: string;\n}\n\n/**\n * Lists the operational layers in the map.\n */\nexport const TopLevelLayerList = memo(function TopLevelLayerList(props: TopLevelLayerListProps) {\n    const { map, \"aria-label\": ariaLabel } = props;\n    const intl = useIntl();\n    const layers = useLayers(map);\n    const empty = useReactiveSnapshot(() => isEmpty(layers), [layers]);\n    if (empty) {\n        return (\n            <Text className=\"toc-missing-layers\" aria-label={ariaLabel}>\n                {intl.formatMessage({ id: \"missingLayers\" })}\n            </Text>\n        );\n    }\n\n    return <LayerList layers={layers} aria-label={ariaLabel} />;\n});\n\n/**\n * Renders the given layers as a list (<ul>).\n */\nexport const LayerList = memo(function LayerList(props: { layers: AnyLayer[] } & ListRootProps) {\n    const { layers, ...listProps } = props;\n    const items = useMemo(\n        () => layers.map((layer) => <LayerItem key={layer.id} layer={layer} />),\n        [layers]\n    );\n\n    return (\n        <List.Root\n            // Note: not using UnorderedList because it adds default margins\n            as=\"ul\"\n            className=\"toc-layer-list\"\n            listStyleType=\"none\"\n            {...listProps}\n        >\n            {items}\n        </List.Root>\n    );\n});\n\n/**\n * Checks if there is any layer that should be displayed in the Toc\n */\nfunction isEmpty(layers: Layer[]): boolean {\n    const isEmpty = !layers.length || layers.every((l) => !displayItemForLayer(l));\n\n    return isEmpty;\n}\n"],"names":["TopLevelLayerList","LayerList","isEmpty"],"mappings":";;;;;;;;;AAqBO,MAAM,iBAAA,GAAoB,IAAA,CAAK,SAASA,kBAAAA,CAAkB,KAAA,EAA+B;AAC5F,EAAA,MAAM,EAAE,GAAA,EAAK,YAAA,EAAc,SAAA,EAAU,GAAI,KAAA;AACzC,EAAA,MAAM,OAAO,OAAA,EAAQ;AACrB,EAAA,MAAM,MAAA,GAAS,UAAU,GAAG,CAAA;AAC5B,EAAA,MAAM,KAAA,GAAQ,oBAAoB,MAAM,OAAA,CAAQ,MAAM,CAAA,EAAG,CAAC,MAAM,CAAC,CAAA;AACjE,EAAA,IAAI,KAAA,EAAO;AACP,IAAA,uBACI,GAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAU,oBAAA,EAAqB,YAAA,EAAY,SAAA,EAC5C,QAAA,EAAA,IAAA,CAAK,aAAA,CAAc,EAAE,EAAA,EAAI,eAAA,EAAiB,CAAA,EAC/C,CAAA;AAAA,EAER;AAEA,EAAA,uBAAO,GAAA,CAAC,SAAA,EAAA,EAAU,MAAA,EAAgB,YAAA,EAAY,SAAA,EAAW,CAAA;AAC7D,CAAC;AAKM,MAAM,SAAA,GAAY,IAAA,CAAK,SAASC,UAAAA,CAAU,KAAA,EAA+C;AAC5F,EAAA,MAAM,EAAE,MAAA,EAAQ,GAAG,SAAA,EAAU,GAAI,KAAA;AACjC,EAAA,MAAM,KAAA,GAAQ,OAAA;AAAA,IACV,MAAM,MAAA,CAAO,GAAA,CAAI,CAAC,KAAA,yBAAW,SAAA,EAAA,EAAyB,KAAA,EAAA,EAAV,KAAA,CAAM,EAAkB,CAAE,CAAA;AAAA,IACtE,CAAC,MAAM;AAAA,GACX;AAEA,EAAA,uBACI,GAAA;AAAA,IAAC,IAAA,CAAK,IAAA;AAAA,IAAL;AAAA,MAEG,EAAA,EAAG,IAAA;AAAA,MACH,SAAA,EAAU,gBAAA;AAAA,MACV,aAAA,EAAc,MAAA;AAAA,MACb,GAAG,SAAA;AAAA,MAEH,QAAA,EAAA;AAAA;AAAA,GACL;AAER,CAAC;AAKD,SAAS,QAAQ,MAAA,EAA0B;AACvC,EAAA,MAAMC,QAAAA,GAAU,CAAC,MAAA,CAAO,MAAA,IAAU,MAAA,CAAO,KAAA,CAAM,CAAC,CAAA,KAAM,CAAC,mBAAA,CAAoB,CAAC,CAAC,CAAA;AAE7E,EAAA,OAAOA,QAAAA;AACX;;;;"}

package/utils/displayLayer.d.ts

@@ -0,0 +1,5 @@
+import { AnyLayer } from "@open-pioneer/map";
+/**
+ * Checks if a layer should be displayed in the Toc.
+ */
+export declare function displayItemForLayer(layer: AnyLayer): boolean;

package/utils/displayLayer.js

@@ -0,0 +1,14 @@
+function displayItemForLayer(layer) {
+  const isInternal = layer.internal;
+  const listMode = layer.attributes.toc?.listMode;
+  if (listMode === "show" || listMode === "hide-children") {
+    return true;
+  } else if (isInternal || listMode === "hide") {
+    return false;
+  } else {
+    return true;
+  }
+}
+
+export { displayItemForLayer };
+//# sourceMappingURL=displayLayer.js.map

package/utils/displayLayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"displayLayer.js","sources":["displayLayer.ts"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\n\nimport { AnyLayer } from \"@open-pioneer/map\";\nimport { LayerTocAttributes } from \"../ui/Toc\";\n\n/**\n * Checks if a layer should be displayed in the Toc.\n */\nexport function displayItemForLayer(layer: AnyLayer): boolean {\n    const isInternal = layer.internal;\n    const listMode = (layer.attributes.toc as LayerTocAttributes | undefined)?.listMode;\n\n    if (listMode === \"show\" || listMode === \"hide-children\") {\n        return true;\n    } else if (isInternal || listMode === \"hide\") {\n        return false;\n    } else {\n        return true;\n    }\n}\n"],"names":[],"mappings":"AASO,SAAS,oBAAoB,KAAA,EAA0B;AAC1D,EAAA,MAAM,aAAa,KAAA,CAAM,QAAA;AACzB,EAAA,MAAM,QAAA,GAAY,KAAA,CAAM,UAAA,CAAW,GAAA,EAAwC,QAAA;AAE3E,EAAA,IAAI,QAAA,KAAa,MAAA,IAAU,QAAA,KAAa,eAAA,EAAiB;AACrD,IAAA,OAAO,IAAA;AAAA,EACX,CAAA,MAAA,IAAW,UAAA,IAAc,QAAA,KAAa,MAAA,EAAQ;AAC1C,IAAA,OAAO,KAAA;AAAA,EACX,CAAA,MAAO;AACH,IAAA,OAAO,IAAA;AAAA,EACX;AACJ;;;;"}