@open-pioneer/toc 1.3.0-dev.20260512095810 → 1.3.0

package/CHANGELOG.md

@@ -1,12 +1,16 @@
 # @open-pioneer/toc
 
-## 1.3.0-dev.20260512095810
+## 1.3.0
 
 ### Minor Changes
 
 - 9b5d5f3: Support for new common container props (role, aria-\*, data-\* and css)
-- d54ccfd: Update to Chakra UI 3.34.0
-- 206b397: Update to trails core packages 4.5.0
+- d54ccfd: Update to Chakra UI 3.35.0
+- 206b397: Update to trails core packages 4.6.0
+
+### Patch Changes
+
+- 0704cd6: Use `classnames` from `@open-pioneer/react-utils` instead of `classnames` package.
 
 ## 1.2.0
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@open-pioneer/toc",
-  "version": "1.3.0-dev.20260512095810",
+  "version": "1.3.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"
@@ -14,18 +14,17 @@
     "directory": "src/packages/toc"
   },
   "dependencies": {
-    "@chakra-ui/react": "^3.34.0",
-    "@open-pioneer/react-utils": "4.6.0-dev.20260420101935",
-    "@open-pioneer/runtime": "4.6.0-dev.20260420101935",
-    "classnames": "^2.5.1",
+    "@chakra-ui/react": "^3.35.0",
+    "@open-pioneer/react-utils": "^4.6.0",
+    "@open-pioneer/runtime": "^4.6.0",
     "ol": "^10.9.0",
-    "react": "^19.2.5",
+    "react": "^19.2.6",
     "react-icons": "^5.6.0",
-    "@open-pioneer/reactivity": "4.6.0-dev.20260420101935",
-    "@conterra/reactivity-core": "^0.8.2",
-    "@open-pioneer/chakra-snippets": "4.6.0-dev.20260420101935",
-    "@open-pioneer/basemap-switcher": "1.3.0-dev.20260512095810",
-    "@open-pioneer/map": "1.3.0-dev.20260512095810"
+    "@open-pioneer/reactivity": "^4.6.0",
+    "@conterra/reactivity-core": "^0.8.5",
+    "@open-pioneer/chakra-snippets": "^4.6.0",
+    "@open-pioneer/basemap-switcher": "1.3.0",
+    "@open-pioneer/map": "1.3.0"
   },
   "exports": {
     "./package.json": "./package.json",
@@ -46,6 +45,6 @@
       "references": []
     },
     "properties": [],
-    "packageFormatVersion": "1.0.0"
+    "packageFormatVersion": "1.0.1"
   }
 }

package/ui/LayerList/LayerItem.d.ts

@@ -1,9 +1,10 @@
 import { AnyLayer } from "@open-pioneer/map";
+import { ReactNode } from "react";
 /**
  * Renders a single layer as a list item.
  *
  * The item may have further nested list items if there are sublayers present.
  */
-export declare const LayerItem: import("react").NamedExoticComponent<{
+export declare const LayerItem: import("react").MemoExoticComponent<(props: {
     layer: AnyLayer;
-}>;
+}) => ReactNode>;

package/ui/LayerList/LayerItem.js

@@ -3,7 +3,7 @@ import { Box, Flex, Text, Spacer, Collapsible, CollapsibleContent, IconButton, I
 import { Checkbox } from '@open-pioneer/chakra-snippets/checkbox';
 import { Tooltip } from '@open-pioneer/chakra-snippets/tooltip';
 import { useReactiveSnapshot } from '@open-pioneer/reactivity';
-import classNames from 'classnames';
+import { classNames } from '@open-pioneer/react-utils';
 import { useIntl } from '../../_virtual/hooks.js';
 import { memo, useId, useMemo, useRef, useEffect } from 'react';
 import { LuTriangleAlert, LuInfo, LuChevronDown, LuChevronRight } from 'react-icons/lu';

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    Text\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, LuInfo } from \"react-icons/lu\";\nimport { TocItemImpl, useTocModel } from \"../../model/\";\nimport { slug } from \"../../utils/slug\";\nimport { useChildLayers, useLoadState, useVisibleInScale } from \"./hooks\";\nimport { LayerItemMenu } from \"./LayerItemMenu\";\nimport { LayerList } from \"./LayerList\";\nimport { LayerTocAttributes } from \"../Toc\";\nimport { displayItemForLayer } from \"../../utils/displayLayer\";\nimport type { IconType } from \"react-icons/lib\";\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\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 listMode = useListMode(layer)?.listMode;\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 { problemIndicator, problemLabel, disabled, opacity } = useItemProblem(layer, intl);\n    const ariaLabel = useMemo(() => {\n        let label = title;\n        if (problemLabel) {\n            label += \" \" + problemLabel;\n        }\n        return label;\n    }, [title, problemLabel]);\n\n    const nestedChildren = useNestedChildren(layerGroupId, title, layer, intl);\n    //all children hidden => do not render collapse button and child entries\n    let hasNestedChildren = !!nestedChildren;\n    if (allChildrenHidden || listMode === \"hide-children\") {\n        hasNestedChildren = false;\n    }\n\n    if (!display) {\n        return null;\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={ariaLabel}\n                    checked={isVisible}\n                    disabled={disabled}\n                    onCheckedChange={(event) =>\n                        updateLayerVisibility(\n                            layer,\n                            event.checked === true,\n                            tocOptions.autoShowParents\n                        )\n                    }\n                >\n                    <Text as=\"span\" opacity={opacity}>\n                        {title}\n                    </Text>\n                </Checkbox>\n                {problemIndicator}\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 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\nfunction ProblemIndicator(props: { message: string; Icon: IconType; color?: string }) {\n    const { message, Icon, color } = props;\n    return (\n        <Tooltip\n            content={message}\n            positioning={{ placement: \"right\" }}\n            contentProps={{ className: \"toc-layer-item-problem-indicator-tooltip\" }}\n        >\n            <span className=\"toc-layer-item-problem-indicator\">\n                <Icon aria-label={message} color={color} />\n            </span>\n        </Tooltip>\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 useItemProblem(layer: AnyLayer, intl: PackageIntl) {\n    const isAvailable = useLoadState(layer) !== \"error\";\n    const visibleInScale = useVisibleInScale(layer);\n\n    return useMemo(() => {\n        let problemIndicator;\n        let problemLabel;\n        let opacity;\n        let disabled;\n        if (!isAvailable) {\n            const label = intl.formatMessage({ id: \"layerNotAvailable\" });\n            problemIndicator = (\n                <ProblemIndicator message={label} Icon={LuTriangleAlert} color=\"red\" />\n            );\n            problemLabel = label;\n            disabled = true;\n        } else if (!visibleInScale) {\n            const label = intl.formatMessage({ id: \"layerNotVisible\" });\n            problemIndicator = <ProblemIndicator message={label} Icon={LuInfo} />;\n            problemLabel = label;\n            opacity = 0.5;\n        }\n        return { problemIndicator, problemLabel, opacity, disabled };\n    }, [isAvailable, visibleInScale, intl]);\n}\n\nfunction useListMode(layer: AnyLayer): LayerTocAttributes | undefined {\n    return useReactiveSnapshot(\n        () => layer.attributes.toc as LayerTocAttributes | undefined,\n        [layer]\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 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 * @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"],"names":["LayerItem","Icon"],"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    Text\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 \"@open-pioneer/react-utils\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport { memo, ReactNode, useEffect, useId, useMemo, useRef } from \"react\";\nimport { LuTriangleAlert, LuChevronDown, LuChevronRight, LuInfo } from \"react-icons/lu\";\nimport { TocItemImpl, useTocModel } from \"../../model/\";\nimport { slug } from \"../../utils/slug\";\nimport { useChildLayers, useLoadState, useVisibleInScale } from \"./hooks\";\nimport { LayerItemMenu } from \"./LayerItemMenu\";\nimport { LayerList } from \"./LayerList\";\nimport { LayerTocAttributes } from \"../Toc\";\nimport { displayItemForLayer } from \"../../utils/displayLayer\";\nimport type { IconType } from \"react-icons/lib\";\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\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 listMode = useListMode(layer)?.listMode;\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 { problemIndicator, problemLabel, disabled, opacity } = useItemProblem(layer, intl);\n    const ariaLabel = useMemo(() => {\n        let label = title;\n        if (problemLabel) {\n            label += \" \" + problemLabel;\n        }\n        return label;\n    }, [title, problemLabel]);\n\n    const nestedChildren = useNestedChildren(layerGroupId, title, layer, intl);\n    //all children hidden => do not render collapse button and child entries\n    let hasNestedChildren = !!nestedChildren;\n    if (allChildrenHidden || listMode === \"hide-children\") {\n        hasNestedChildren = false;\n    }\n\n    if (!display) {\n        return null;\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={ariaLabel}\n                    checked={isVisible}\n                    disabled={disabled}\n                    onCheckedChange={(event) =>\n                        updateLayerVisibility(\n                            layer,\n                            event.checked === true,\n                            tocOptions.autoShowParents\n                        )\n                    }\n                >\n                    <Text as=\"span\" opacity={opacity}>\n                        {title}\n                    </Text>\n                </Checkbox>\n                {problemIndicator}\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 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\nfunction ProblemIndicator(props: { message: string; Icon: IconType; color?: string }) {\n    const { message, Icon, color } = props;\n    return (\n        <Tooltip\n            content={message}\n            positioning={{ placement: \"right\" }}\n            contentProps={{ className: \"toc-layer-item-problem-indicator-tooltip\" }}\n        >\n            <span className=\"toc-layer-item-problem-indicator\">\n                <Icon aria-label={message} color={color} />\n            </span>\n        </Tooltip>\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 useItemProblem(layer: AnyLayer, intl: PackageIntl) {\n    const isAvailable = useLoadState(layer) !== \"error\";\n    const visibleInScale = useVisibleInScale(layer);\n\n    return useMemo(() => {\n        let problemIndicator;\n        let problemLabel;\n        let opacity;\n        let disabled;\n        if (!isAvailable) {\n            const label = intl.formatMessage({ id: \"layerNotAvailable\" });\n            problemIndicator = (\n                <ProblemIndicator message={label} Icon={LuTriangleAlert} color=\"red\" />\n            );\n            problemLabel = label;\n            disabled = true;\n        } else if (!visibleInScale) {\n            const label = intl.formatMessage({ id: \"layerNotVisible\" });\n            problemIndicator = <ProblemIndicator message={label} Icon={LuInfo} />;\n            problemLabel = label;\n            opacity = 0.5;\n        }\n        return { problemIndicator, problemLabel, opacity, disabled };\n    }, [isAvailable, visibleInScale, intl]);\n}\n\nfunction useListMode(layer: AnyLayer): LayerTocAttributes | undefined {\n    return useReactiveSnapshot(\n        () => layer.attributes.toc as LayerTocAttributes | undefined,\n        [layer]\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 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 * @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"],"names":["LayerItem","Icon"],"mappings":"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"}

package/ui/LayerList/LayerList.d.ts

@@ -1,4 +1,4 @@
-import { List } from "@chakra-ui/react";
+import { ListRootProps } from "@chakra-ui/react";
 import { AnyLayer, MapModel } from "@open-pioneer/map";
 interface TopLevelLayerListProps {
     map: MapModel;
@@ -8,11 +8,11 @@ interface TopLevelLayerListProps {
 /**
  * Lists the operational layers in the map.
  */
-export declare const TopLevelLayerList: import("react").NamedExoticComponent<TopLevelLayerListProps>;
+export declare const TopLevelLayerList: import("react").MemoExoticComponent<(props: TopLevelLayerListProps) => import("react/jsx-runtime").JSX.Element>;
 /**
  * Renders the given layers as a list (<ul>).
  */
-export declare const LayerList: import("react").NamedExoticComponent<{
+export declare const LayerList: import("react").MemoExoticComponent<(props: {
     layers: AnyLayer[];
-} & List.RootProps>;
+} & ListRootProps) => import("react/jsx-runtime").JSX.Element>;
 export {};