@open-pioneer/toc 0.8.0 → 0.9.0-dev.20250220091855

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @open-pioneer/toc
 
+## 0.9.0-dev.20250220091855
+
+### Minor Changes
+
+-   bd82a78: Adds the optional functionality to collapse and expand groups in the TOC.
+    This option can be activated with the `collapsibleGroups` property (default is `false`).
+    If the property `initiallyCollapsed` is `true` all groups are collapsed by default when the TOC is rendered. This is helpful if the app has a large layer tree.
+    Additionally, a menu item to collapse all groups can be added to the Tools section by setting `toolsConfig.showCollapseAllGroups` to `true` (default is `true`).
+    This is only applicable if `collapsibleGroups` and `showTools` are both `true`.
+
+    ```jsx
+    import { Toc } from "@open-pioneer/toc";
+
+    <Toc
+        mapId={MAP_ID}
+        showTools={true}
+        collapsibleGroups={true} //groups are collapsible in TOC
+        initiallyCollapsed={true} //groups are collapsed initially
+        toolsConfig={{ showCollapseAllGroups: true }} //show 'collapse all' menu item in Tools
+    />;
+    ```
+
+### Patch Changes
+
+-   Updated dependencies [f327eec]
+-   Updated dependencies [f327eec]
+-   Updated dependencies [209eb8e]
+    -   @open-pioneer/map@0.9.0-dev.20250220091855
+    -   @open-pioneer/basemap-switcher@0.9.0-dev.20250220091855
+
 ## 0.8.0
 
 ### Minor Changes

package/README.md

@@ -16,12 +16,18 @@ To integrate the TOC (table of contents) in your app, insert the following snipp
 
 Additional tools are available for operational layers.
 To show the toolset menu, set the `showTools` property to `true`.
-The toolset contains a tool with which you can switch off the visibility of all levels at once.
 
 ```tsx
 <Toc mapId="map_id" showTools={true} />
 ```
 
+The default tools provided by the TOC are:
+
+-   A button to hide all layers (sets `visibility` to false, enabled by default)
+-   A button to collapse all groups (enabled by default if groups are collapsible)
+
+These tools can be configured by using the `toolsConfig` property.
+
 ### Basemaps
 
 By default, the TOC shows the basemap switcher as an embedded element.
@@ -70,6 +76,20 @@ This can be disabled by configuring `autoShowParents={false}` on the `TOC` compo
 <Toc autoShowParents={false} />
 ```
 
+### Collapsible groups
+
+The TOC renders the hierarchy of layers as a tree structure of nested lists ("groups").
+Groups can be made collapsible through user action by setting the `collapsibleGroups` property to `true`.
+If enabled, a toggle button appears next to parent nodes by which the user can expand or collapse the group.
+
+```tsx
+<Toc
+    mapId={MAP_ID}
+    collapsibleGroups={true}
+    initiallyCollapsed={true} // Whether groups are collapsed by default. Defaults to false.
+/>
+```
+
 ## License
 
 Apache-2.0 (see `LICENSE` file)

package/i18n/de.yaml

@@ -4,8 +4,12 @@ messages:
   operationalLayerLabel: "Layer"
   childgroupLabel: "Layergruppe {title}"
   missingLayers: "Es sind keine Layer vorhanden."
+  group:
+    expand: "Gruppe {title} ausklappen"
+    collapse: "Gruppe {title} einklappen"
   error: "Beim Erstellen des Karteninhalts ist ein Fehler aufgetreten."
   layerNotAvailable: "Layer nicht verfügbar"
   toolsLabel: "Kartenwerkzeuge"
   tools:
     hideAllLayers: "Alle Karteninhalte ausblenden"
+    collapseAllGroups: "Alle Gruppen einklappen"

package/i18n/en.yaml

@@ -4,8 +4,12 @@ messages:
   operationalLayerLabel: "Operational layers"
   childgroupLabel: "Layer group {title}"
   missingLayers: "There are no layers to display."
+  group:
+    expand: "Expand group {title}"
+    collapse: "Collapse group {title}"
   error: "Error while creating map content."
   layerNotAvailable: "Layer not available"
   toolsLabel: "Map tools"
   tools:
     hideAllLayers: "Hide all layers"
+    collapseAllGroups: "Collapse all groups"

package/index.d.ts

@@ -1 +1 @@
-export { Toc, type TocProps, type ToolsConfig } from "./Toc";
+export { Toc, type TocProps, type ToolsConfig } from "./ui/Toc";

package/index.js

@@ -1,2 +1,2 @@
-export { Toc } from './Toc.js';
+export { Toc } from './ui/Toc.js';
 //# sourceMappingURL=index.js.map

package/model/TocModel.d.ts

@@ -0,0 +1,76 @@
+import { Provider } from "react";
+/**
+ * Provider for the toc's shared model.
+ * Used at the root of the component.
+ */
+export declare const TocModelProvider: Provider<TocModel>;
+/**
+ * Returns the shared model for the current toc component.
+ */
+export declare function useTocModel(): TocModel;
+/**
+ * Shared model used by the toc and all its sub-components.
+ *
+ * @internal
+ */
+export interface TocModel {
+    /**
+     * Return the global widget options.
+     *
+     * NOTE: The object itself is reactive, but individual properties are not (change -> replace).
+     */
+    readonly options: TocWidgetOptions;
+    /**
+     * Returns the item that corresponds with the `layerId`.
+     */
+    getItem(layerId: string): TocItem | undefined;
+    /**
+     * Returns the list of all items.
+     */
+    getItems(): TocItem[];
+    registerItem(item: TocItem): void;
+    unregisterItem(item: TocItem): void;
+}
+/**
+ * Global toc widget options.
+ *
+ * @internal
+ */
+export interface TocWidgetOptions {
+    /**
+     * True: When showing a child, show all parents as well (`setVisible(true)`).
+     */
+    autoShowParents: boolean;
+    /**
+     * True: Layer items with children can be collapsed.
+     */
+    collapsibleGroups: boolean;
+    /**
+     * True: All groups are initially collapsed.
+     */
+    initiallyCollapsed: boolean;
+}
+/**
+ * Represents an item in the toc.
+ *
+ * Currently items register themselves in the model when they are mounted
+ * and remove themselves when they are unmounted.
+ *
+ * @internal
+ */
+export interface TocItem {
+    /**
+     * Identifier of the layer that corresponds with the list item.
+     */
+    readonly layerId: string;
+    /**
+     * true if list item is expanded.
+     */
+    readonly isExpanded: boolean;
+    /**
+     * Expands or collapses the list item.
+     *
+     * Note: not all list items support this operation.
+     */
+    setExpanded(expanded: boolean): void;
+}

package/model/TocModel.js

@@ -0,0 +1,14 @@
+import { createContext, useContext } from 'react';
+
+const TocModelContext = createContext(void 0);
+const TocModelProvider = TocModelContext.Provider;
+function useTocModel() {
+  const model = useContext(TocModelContext);
+  if (!model) {
+    throw new Error("Internal error: TocModel not found in context.");
+  }
+  return model;
+}
+
+export { TocModelProvider, useTocModel };
+//# sourceMappingURL=TocModel.js.map

package/model/TocModel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TocModel.js","sources":["TocModel.ts"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { createContext, Provider, useContext } from \"react\";\n\nconst TocModelContext = createContext<TocModel | undefined>(undefined);\n\n/**\n * Provider for the toc's shared model.\n * Used at the root of the component.\n */\nexport const TocModelProvider: Provider<TocModel> = TocModelContext.Provider as Provider<TocModel>;\n\n/**\n * Returns the shared model for the current toc component.\n */\nexport function useTocModel(): TocModel {\n    const model = useContext(TocModelContext);\n    if (!model) {\n        throw new Error(\"Internal error: TocModel not found in context.\");\n    }\n    return model;\n}\n\n/**\n * Shared model used by the toc and all its sub-components.\n *\n * @internal\n */\nexport interface TocModel {\n    /**\n     * Return the global widget options.\n     *\n     * NOTE: The object itself is reactive, but individual properties are not (change -> replace).\n     */\n    readonly options: TocWidgetOptions;\n\n    /**\n     * Returns the item that corresponds with the `layerId`.\n     */\n    getItem(layerId: string): TocItem | undefined;\n\n    /**\n     * Returns the list of all items.\n     */\n    getItems(): TocItem[];\n\n    // Used by toc item components to register themselves\n    registerItem(item: TocItem): void;\n    unregisterItem(item: TocItem): void;\n}\n\n/**\n * Global toc widget options.\n *\n * @internal\n */\nexport interface TocWidgetOptions {\n    /**\n     * True: When showing a child, show all parents as well (`setVisible(true)`).\n     */\n    autoShowParents: boolean;\n\n    /**\n     * True: Layer items with children can be collapsed.\n     */\n    collapsibleGroups: boolean;\n\n    /**\n     * True: All groups are initially collapsed.\n     */\n    initiallyCollapsed: boolean;\n}\n\n/**\n * Represents an item in the toc.\n *\n * Currently items register themselves in the model when they are mounted\n * and remove themselves when they are unmounted.\n *\n * @internal\n */\nexport interface TocItem {\n    /**\n     * Identifier of the layer that corresponds with the list item.\n     */\n    readonly layerId: string;\n\n    /**\n     * true if list item is expanded.\n     */\n    readonly isExpanded: boolean;\n\n    /**\n     * Expands or collapses the list item.\n     *\n     * Note: not all list items support this operation.\n     */\n    setExpanded(expanded: boolean): void;\n}\n"],"names":[],"mappings":";;AAIA,MAAM,eAAA,GAAkB,cAAoC,KAAS,CAAA,CAAA,CAAA;AAM9D,MAAM,mBAAuC,eAAgB,CAAA,SAAA;AAK7D,SAAS,WAAwB,GAAA;AACpC,EAAM,MAAA,KAAA,GAAQ,WAAW,eAAe,CAAA,CAAA;AACxC,EAAA,IAAI,CAAC,KAAO,EAAA;AACR,IAAM,MAAA,IAAI,MAAM,gDAAgD,CAAA,CAAA;AAAA,GACpE;AACA,EAAO,OAAA,KAAA,CAAA;AACX;;;;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@open-pioneer/toc",
-  "version": "0.8.0",
+  "version": "0.9.0-dev.20250220091855",
   "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"
@@ -18,13 +18,14 @@
     "@open-pioneer/react-utils": "^2.4.0",
     "@open-pioneer/runtime": "^2.4.0",
     "classnames": "^2.3.2",
-    "ol": "^10.2.1",
+    "ol": "^10.3.0",
     "react": "^18.3.1",
     "react-icons": "^5.3.0",
+    "@chakra-ui/icons": "^2.2.4",
     "@open-pioneer/reactivity": "^2.4.0",
     "@conterra/reactivity-core": "^0.4.3",
-    "@open-pioneer/basemap-switcher": "^0.8.0",
-    "@open-pioneer/map": "^0.8.0"
+    "@open-pioneer/basemap-switcher": "^0.9.0-dev.20250220091855",
+    "@open-pioneer/map": "^0.9.0-dev.20250220091855"
   },
   "exports": {
     "./package.json": "./package.json",

package/ui/LayerList/LayerItem.d.ts

@@ -0,0 +1,9 @@
+import { AnyLayer } from "@open-pioneer/map";
+/**
+ * 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<{
+    layer: AnyLayer;
+}>;

package/ui/LayerList/LayerItem.js

@@ -0,0 +1,153 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ChevronDownIcon, ChevronRightIcon } from '@chakra-ui/icons';
+import { reactive } from '@conterra/reactivity-core';
+import { Box, Flex, Checkbox, Tooltip, Spacer, Collapse, IconButton } from '@open-pioneer/chakra-integration';
+import { useReactiveSnapshot } from '@open-pioneer/reactivity';
+import classNames from 'classnames';
+import { useIntl } from '../../_virtual/_virtual-pioneer-module_react-hooks.js';
+import { memo, useId, useMemo, useEffect } from 'react';
+import { FiAlertTriangle } from 'react-icons/fi';
+import { useTocModel } from '../../model/TocModel.js';
+import { slug } from '../../utils/slug.js';
+import { useChildLayers, useLoadState } from './hooks.js';
+import { LayerItemMenu } from './LayerItemMenu.js';
+import { LayerList } from './LayerList.js';
+
+const LayerItem = memo(function LayerItem2(props) {
+  const { layer } = props;
+  const intl = useIntl();
+  const [tocItem, _tocModel, tocOptions] = useTocItem(layer);
+  const expanded = useReactiveSnapshot(() => tocItem.isExpanded, [tocItem]);
+  const isCollapsible = tocOptions ? tocOptions.collapsibleGroups : false;
+  const layerGroupId = useId();
+  const childLayers = useChildLayers(layer);
+  const isAvailable = useLoadState(layer) !== "error";
+  const notAvailableLabel = intl.formatMessage({ id: "layerNotAvailable" });
+  const { title, description, isVisible } = useReactiveSnapshot(() => {
+    return {
+      title: layer.title,
+      description: layer.description,
+      isVisible: layer.visible
+    };
+  }, [layer]);
+  let nestedChildren;
+  if (childLayers?.length) {
+    nestedChildren = /* @__PURE__ */ jsx(
+      LayerList,
+      {
+        layers: childLayers,
+        ml: 4,
+        "aria-label": intl.formatMessage({ id: "childgroupLabel" }, { title })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Box, { as: "li", className: classNames("toc-layer-item", `layer-${slug(layer.id)}`), children: [
+    /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        className: "toc-layer-item-content",
+        width: "100%",
+        flexDirection: "row",
+        align: "center",
+        justifyContent: "space-between",
+        gap: 2,
+        minHeight: 10,
+        children: [
+          isCollapsible && /* @__PURE__ */ jsx(
+            CollapseButton,
+            {
+              layerTitle: title,
+              layerGroupId,
+              expanded,
+              onClick: () => tocItem.setExpanded(!expanded),
+              hasNestedChildren: !!nestedChildren
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              "aria-label": title + (!isAvailable ? " " + notAvailableLabel : ""),
+              isChecked: isVisible,
+              isDisabled: !isAvailable,
+              onChange: (event) => updateLayerVisibility(
+                layer,
+                event.target.checked,
+                tocOptions.autoShowParents
+              ),
+              children: title
+            }
+          ),
+          !isAvailable && /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              className: "toc-layer-item-content-tooltip",
+              label: notAvailableLabel,
+              placement: "right",
+              openDelay: 500,
+              children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+                FiAlertTriangle,
+                {
+                  className: "toc-layer-item-content-icon",
+                  color: "red",
+                  "aria-label": notAvailableLabel
+                }
+              ) })
+            }
+          ),
+          /* @__PURE__ */ jsx(Spacer, {}),
+          /* @__PURE__ */ jsx(LayerItemMenu, { layer, title, description, intl })
+        ]
+      }
+    ),
+    nestedChildren && /* @__PURE__ */ jsx(Collapse, { in: expanded, id: layerGroupId, className: "toc-collapsible-item", children: nestedChildren })
+  ] });
+});
+function CollapseButton(props) {
+  const { layerTitle, layerGroupId, expanded, onClick, hasNestedChildren } = props;
+  const intl = useIntl();
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      variant: "ghost",
+      borderRadius: "full",
+      padding: 0,
+      className: "toc-layer-item-collapse-button",
+      onClick,
+      icon: expanded ? /* @__PURE__ */ jsx(ChevronDownIcon, {}) : /* @__PURE__ */ jsx(ChevronRightIcon, {}),
+      "aria-label": expanded ? intl.formatMessage({ id: "group.collapse" }, { title: layerTitle }) : intl.formatMessage({ id: "group.expand" }, { title: layerTitle }),
+      "aria-expanded": expanded,
+      "aria-controls": layerGroupId,
+      visibility: hasNestedChildren ? "visible" : "hidden"
+    }
+  );
+}
+function useTocItem(layer) {
+  const tocModel = useTocModel();
+  const options = useReactiveSnapshot(() => tocModel.options, [tocModel]);
+  const tocItem = useMemo(() => {
+    const expanded = reactive(!options.initiallyCollapsed);
+    return {
+      layerId: layer.id,
+      get isExpanded() {
+        return expanded.value;
+      },
+      setExpanded(expand) {
+        expanded.value = expand;
+      }
+    };
+  }, [layer, options.initiallyCollapsed]);
+  useEffect(() => {
+    tocModel.registerItem(tocItem);
+    return () => tocModel.unregisterItem(tocItem);
+  }, [tocModel, tocItem]);
+  return [tocItem, tocModel, options];
+}
+function updateLayerVisibility(layer, visible, autoShowParents) {
+  layer.setVisible(visible);
+  if (visible && autoShowParents && layer.parent) {
+    updateLayerVisibility(layer.parent, true, true);
+  }
+}
+
+export { LayerItem };
+//# sourceMappingURL=LayerItem.js.map

package/ui/LayerList/LayerItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayerItem.js","sources":["LayerItem.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\n// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { ChevronDownIcon, ChevronRightIcon } from \"@chakra-ui/icons\";\nimport { reactive } from \"@conterra/reactivity-core\";\nimport {\n    Box,\n    Checkbox,\n    Collapse,\n    Flex,\n    IconButton,\n    Spacer,\n    Tooltip\n} from \"@open-pioneer/chakra-integration\";\nimport { AnyLayer } from \"@open-pioneer/map\";\nimport { useReactiveSnapshot } from \"@open-pioneer/reactivity\";\nimport classNames from \"classnames\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport { memo, useEffect, useId, useMemo } from \"react\";\nimport { FiAlertTriangle } from \"react-icons/fi\";\nimport { TocItem, useTocModel } from \"../../model/TocModel\";\nimport { slug } from \"../../utils/slug\";\nimport { useChildLayers, useLoadState } from \"./hooks\";\nimport { LayerItemMenu } from \"./LayerItemMenu\";\nimport { LayerList } from \"./LayerList\";\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 }): JSX.Element {\n    const { layer } = props;\n    const intl = useIntl();\n    const [tocItem, _tocModel, tocOptions] = useTocItem(layer);\n    const expanded = useReactiveSnapshot(() => tocItem.isExpanded, [tocItem]);\n    const isCollapsible = tocOptions ? tocOptions.collapsibleGroups : false;\n\n    const layerGroupId = useId();\n    const childLayers = useChildLayers(layer);\n    const isAvailable = useLoadState(layer) !== \"error\";\n    const notAvailableLabel = intl.formatMessage({ id: \"layerNotAvailable\" });\n    const { title, description, isVisible } = useReactiveSnapshot(() => {\n        return {\n            title: layer.title,\n            description: layer.description,\n            isVisible: layer.visible\n        };\n    }, [layer]);\n\n    let nestedChildren;\n    if (childLayers?.length) {\n        nestedChildren = (\n            <LayerList\n                layers={childLayers}\n                ml={4}\n                aria-label={intl.formatMessage({ id: \"childgroupLabel\" }, { title: title })}\n            />\n        );\n    }\n    return (\n        <Box as=\"li\" className={classNames(\"toc-layer-item\", `layer-${slug(layer.id)}`)}>\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={!!nestedChildren}\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 screenreader 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                    isChecked={isVisible}\n                    isDisabled={!isAvailable}\n                    onChange={(event) =>\n                        updateLayerVisibility(\n                            layer,\n                            event.target.checked,\n                            tocOptions.autoShowParents\n                        )\n                    }\n                >\n                    {title}\n                </Checkbox>\n                {!isAvailable && (\n                    <Tooltip\n                        className=\"toc-layer-item-content-tooltip\"\n                        label={notAvailableLabel}\n                        placement=\"right\"\n                        openDelay={500}\n                    >\n                        <span>\n                            <FiAlertTriangle\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            {nestedChildren && (\n                <Collapse in={expanded} id={layerGroupId} className=\"toc-collapsible-item\">\n                    {nestedChildren}\n                </Collapse>\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 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            icon={expanded ? <ChevronDownIcon /> : <ChevronRightIcon />}\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            visibility={hasNestedChildren ? \"visible\" : \"hidden\"} //use visible:hidden for layers without children for correct indent\n        />\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 tocItem = useMemo((): TocItem => {\n        const expanded = reactive(!options.initiallyCollapsed);\n        return {\n            layerId: layer.id,\n            get isExpanded(): boolean {\n                return expanded.value;\n            },\n            setExpanded(expand: boolean) {\n                expanded.value = expand;\n            }\n        };\n        // TODO: isCollapsed -> recreate model is ok?\n    }, [layer, options.initiallyCollapsed]);\n\n    // Register the item on the shared toc model\n    useEffect(() => {\n        tocModel.registerItem(tocItem);\n        return () => tocModel.unregisterItem(tocItem);\n    }, [tocModel, tocItem]);\n\n    return [tocItem, tocModel, options] as const;\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"],"names":["LayerItem"],"mappings":"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"}

package/ui/LayerList/LayerItemMenu.d.ts

@@ -0,0 +1,8 @@
+import { AnyLayer } from "@open-pioneer/map";
+import { PackageIntl } from "@open-pioneer/runtime";
+export declare function LayerItemMenu(props: {
+    layer: AnyLayer;
+    title: string;
+    description: string;
+    intl: PackageIntl;
+}): false | import("react/jsx-runtime").JSX.Element;

package/ui/LayerList/LayerItemMenu.js

@@ -0,0 +1,43 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Popover, PopoverTrigger, Button, Portal, PopoverContent, PopoverArrow, PopoverCloseButton, PopoverHeader, PopoverBody } from '@open-pioneer/chakra-integration';
+import { FiMoreVertical } from 'react-icons/fi';
+import { useLoadState } from './hooks.js';
+
+function LayerItemMenu(props) {
+  const { layer, title, description, intl } = props;
+  const isPresent = !!description;
+  const buttonLabel = intl.formatMessage({ id: "descriptionLabel" });
+  const isAvailable = useLoadState(layer) !== "error";
+  return isPresent && /* @__PURE__ */ jsxs(Popover, { placement: "bottom-start", children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        isDisabled: !isAvailable,
+        className: "toc-layer-item-details-button",
+        "aria-label": buttonLabel,
+        borderRadius: "full",
+        iconSpacing: 0,
+        padding: 0,
+        variant: "ghost",
+        leftIcon: /* @__PURE__ */ jsx(FiMoreVertical, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(
+      PopoverContent,
+      {
+        className: "toc-layer-item-details",
+        overflowY: "auto",
+        maxHeight: "400",
+        children: [
+          /* @__PURE__ */ jsx(PopoverArrow, {}),
+          /* @__PURE__ */ jsx(PopoverCloseButton, { mt: 1 }),
+          /* @__PURE__ */ jsx(PopoverHeader, { children: title }),
+          /* @__PURE__ */ jsx(PopoverBody, { children: description })
+        ]
+      }
+    ) })
+  ] });
+}
+
+export { LayerItemMenu };
+//# sourceMappingURL=LayerItemMenu.js.map

package/ui/LayerList/LayerItemMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayerItemMenu.js","sources":["LayerItemMenu.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport {\n    Button,\n    Popover,\n    PopoverArrow,\n    PopoverBody,\n    PopoverCloseButton,\n    PopoverContent,\n    PopoverHeader,\n    PopoverTrigger,\n    Portal\n} from \"@open-pioneer/chakra-integration\";\nimport { AnyLayer } from \"@open-pioneer/map\";\nimport { PackageIntl } from \"@open-pioneer/runtime\";\nimport { FiMoreVertical } from \"react-icons/fi\";\nimport { useLoadState } from \"./hooks\";\n\nexport function LayerItemMenu(props: {\n    layer: AnyLayer;\n    title: string;\n    description: string;\n    intl: PackageIntl;\n}) {\n    const { layer, title, description, intl } = props;\n    const isPresent = !!description;\n    const buttonLabel = intl.formatMessage({ id: \"descriptionLabel\" });\n    const isAvailable = useLoadState(layer) !== \"error\";\n\n    return (\n        isPresent && (\n            <Popover placement=\"bottom-start\">\n                <PopoverTrigger>\n                    <Button\n                        isDisabled={!isAvailable}\n                        className=\"toc-layer-item-details-button\"\n                        aria-label={buttonLabel}\n                        borderRadius=\"full\"\n                        iconSpacing={0}\n                        padding={0}\n                        variant=\"ghost\"\n                        leftIcon={<FiMoreVertical />}\n                    />\n                </PopoverTrigger>\n                <Portal>\n                    <PopoverContent\n                        className=\"toc-layer-item-details\"\n                        overflowY=\"auto\"\n                        maxHeight=\"400\"\n                    >\n                        <PopoverArrow />\n                        <PopoverCloseButton mt={1} />\n                        <PopoverHeader>{title}</PopoverHeader>\n                        <PopoverBody>{description}</PopoverBody>\n                    </PopoverContent>\n                </Portal>\n            </Popover>\n        )\n    );\n}\n"],"names":[],"mappings":";;;;;AAkBO,SAAS,cAAc,KAK3B,EAAA;AACC,EAAA,MAAM,EAAE,KAAA,EAAO,KAAO,EAAA,WAAA,EAAa,MAAS,GAAA,KAAA,CAAA;AAC5C,EAAM,MAAA,SAAA,GAAY,CAAC,CAAC,WAAA,CAAA;AACpB,EAAA,MAAM,cAAc,IAAK,CAAA,aAAA,CAAc,EAAE,EAAA,EAAI,oBAAoB,CAAA,CAAA;AACjE,EAAM,MAAA,WAAA,GAAc,YAAa,CAAA,KAAK,CAAM,KAAA,OAAA,CAAA;AAE5C,EAAA,OACI,SACI,oBAAA,IAAA,CAAC,OAAQ,EAAA,EAAA,SAAA,EAAU,cACf,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cACG,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACG,YAAY,CAAC,WAAA;AAAA,QACb,SAAU,EAAA,+BAAA;AAAA,QACV,YAAY,EAAA,WAAA;AAAA,QACZ,YAAa,EAAA,MAAA;AAAA,QACb,WAAa,EAAA,CAAA;AAAA,QACb,OAAS,EAAA,CAAA;AAAA,QACT,OAAQ,EAAA,OAAA;AAAA,QACR,QAAA,sBAAW,cAAe,EAAA,EAAA,CAAA;AAAA,OAAA;AAAA,KAElC,EAAA,CAAA;AAAA,wBACC,MACG,EAAA,EAAA,QAAA,kBAAA,IAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACG,SAAU,EAAA,wBAAA;AAAA,QACV,SAAU,EAAA,MAAA;AAAA,QACV,SAAU,EAAA,KAAA;AAAA,QAEV,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,YAAa,EAAA,EAAA,CAAA;AAAA,0BACd,GAAA,CAAC,kBAAmB,EAAA,EAAA,EAAA,EAAI,CAAG,EAAA,CAAA;AAAA,0BAC3B,GAAA,CAAC,iBAAe,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,0BACtB,GAAA,CAAC,eAAa,QAAY,EAAA,WAAA,EAAA,CAAA;AAAA,SAAA;AAAA,OAAA;AAAA,KAElC,EAAA,CAAA;AAAA,GACJ,EAAA,CAAA,CAAA;AAGZ;;;;"}

package/ui/LayerList/LayerList.d.ts

@@ -0,0 +1,18 @@
+import { ListProps } from "@open-pioneer/chakra-integration";
+import { AnyLayer, MapModel } from "@open-pioneer/map";
+interface TopLevelLayerListProps {
+    map: MapModel;
+    /** The label of the list group (<ul>) */
+    "aria-label"?: string;
+}
+/**
+ * Lists the operational layers in the map.
+ */
+export declare const TopLevelLayerList: import("react").NamedExoticComponent<TopLevelLayerListProps>;
+/**
+ * Renders the given layers as a list (<ul>).
+ */
+export declare const LayerList: import("react").NamedExoticComponent<{
+    layers: AnyLayer[];
+} & ListProps>;
+export {};

package/ui/LayerList/LayerList.js

@@ -0,0 +1,37 @@
+import { jsx } from 'react/jsx-runtime';
+import { Text, Box, List } from '@open-pioneer/chakra-integration';
+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';
+
+const TopLevelLayerList = memo(function TopLevelLayerList2(props) {
+  const { map, "aria-label": ariaLabel } = props;
+  const intl = useIntl();
+  const layers = useLayers(map);
+  if (!layers.length) {
+    return /* @__PURE__ */ jsx(Text, { className: "toc-missing-layers", "aria-label": ariaLabel, children: intl.formatMessage({ id: "missingLayers" }) });
+  }
+  return /* @__PURE__ */ jsx(LayerList, { layers, "aria-label": ariaLabel });
+});
+const LayerList = memo(function LayerList2(props) {
+  const { layers, ...listProps } = props;
+  const items = useMemo(
+    () => layers.map((layer) => /* @__PURE__ */ jsx(LayerItem, { layer }, layer.id)),
+    [layers]
+  );
+  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+    List,
+    {
+      as: "ul",
+      className: "toc-layer-list",
+      listStyleType: "none",
+      role: "group",
+      ...listProps,
+      children: items
+    }
+  ) });
+});
+
+export { LayerList, TopLevelLayerList };
+//# sourceMappingURL=LayerList.js.map

package/ui/LayerList/LayerList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayerList.js","sources":["LayerList.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { Box, List, ListProps, Text } from \"@open-pioneer/chakra-integration\";\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[] } & ListProps) {\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        <Box>\n            <List\n                // Note: not using UnorderedList because it adds default margins\n                as=\"ul\"\n                className=\"toc-layer-list\"\n                listStyleType=\"none\"\n                role=\"group\"\n                {...listProps}\n            >\n                {items}\n            </List>\n        </Box>\n    );\n});\n"],"names":["TopLevelLayerList","LayerList"],"mappings":";;;;;;;AAmBO,MAAM,iBAAoB,GAAA,IAAA,CAAK,SAASA,kBAAAA,CAAkB,KAA+B,EAAA;AAC5F,EAAA,MAAM,EAAE,GAAA,EAAK,YAAc,EAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AACzC,EAAA,MAAM,OAAO,OAAQ,EAAA,CAAA;AACrB,EAAM,MAAA,MAAA,GAAS,UAAU,GAAG,CAAA,CAAA;AAE5B,EAAI,IAAA,CAAC,OAAO,MAAQ,EAAA;AAChB,IAAA,uBACK,GAAA,CAAA,IAAA,EAAA,EAAK,SAAU,EAAA,oBAAA,EAAqB,YAAY,EAAA,SAAA,EAC5C,QAAK,EAAA,IAAA,CAAA,aAAA,CAAc,EAAE,EAAA,EAAI,eAAgB,EAAC,CAC/C,EAAA,CAAA,CAAA;AAAA,GAER;AAEA,EAAA,uBAAQ,GAAA,CAAA,SAAA,EAAA,EAAU,MAAgB,EAAA,YAAA,EAAY,SAAW,EAAA,CAAA,CAAA;AAC7D,CAAC,EAAA;AAKM,MAAM,SAAY,GAAA,IAAA,CAAK,SAASC,UAAAA,CAAU,KAA2C,EAAA;AACxF,EAAA,MAAM,EAAE,MAAA,EAAQ,GAAG,SAAA,EAAc,GAAA,KAAA,CAAA;AACjC,EAAA,MAAM,KAAQ,GAAA,OAAA;AAAA,IACV,MAAM,MAAO,CAAA,GAAA,CAAI,CAAC,KAAA,yBAAW,SAAyB,EAAA,EAAA,KAAA,EAAA,EAAV,KAAM,CAAA,EAAkB,CAAE,CAAA;AAAA,IACtE,CAAC,MAAM,CAAA;AAAA,GACX,CAAA;AAEA,EAAA,2BACK,GACG,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MAEG,EAAG,EAAA,IAAA;AAAA,MACH,SAAU,EAAA,gBAAA;AAAA,MACV,aAAc,EAAA,MAAA;AAAA,MACd,IAAK,EAAA,OAAA;AAAA,MACJ,GAAG,SAAA;AAAA,MAEH,QAAA,EAAA,KAAA;AAAA,KAAA;AAAA,GAET,EAAA,CAAA,CAAA;AAER,CAAC;;;;"}

package/ui/LayerList/hooks.d.ts

@@ -0,0 +1,10 @@
+import { AnyLayer, Layer, MapModel } from "@open-pioneer/map";
+/** Returns the top level operational layers in render order (topmost layer first). */
+export declare function useLayers(map: MapModel): Layer[];
+/**
+ * Returns the child layers (sublayers or layers contained in a group layer) of a layer.
+ * Layers are returned in render order (topmost sublayer first).
+ */
+export declare function useChildLayers(layer: AnyLayer): AnyLayer[] | undefined;
+/** Returns the layers current state. */
+export declare function useLoadState(layer: AnyLayer): string;

package/ui/LayerList/hooks.js

@@ -0,0 +1,26 @@
+import { isSublayer } from '@open-pioneer/map';
+import { useReactiveSnapshot } from '@open-pioneer/reactivity';
+
+function useLayers(map) {
+  return useReactiveSnapshot(() => {
+    const layers = map.layers.getOperationalLayers({ sortByDisplayOrder: true }) ?? [];
+    layers.reverse();
+    return layers;
+  }, [map]);
+}
+function useChildLayers(layer) {
+  return useReactiveSnapshot(() => {
+    const children = layer.children?.getItems({ sortByDisplayOrder: true });
+    children?.reverse();
+    return children;
+  }, [layer]);
+}
+function useLoadState(layer) {
+  return useReactiveSnapshot(() => {
+    const target = isSublayer(layer) ? layer.parentLayer : layer;
+    return target.loadState;
+  }, [layer]);
+}
+
+export { useChildLayers, useLayers, useLoadState };
+//# sourceMappingURL=hooks.js.map

package/ui/LayerList/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sources":["hooks.ts"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { AnyLayer, isSublayer, Layer, MapModel } from \"@open-pioneer/map\";\nimport { useReactiveSnapshot } from \"@open-pioneer/reactivity\";\n\n/** Returns the top level operational layers in render order (topmost layer first). */\nexport function useLayers(map: MapModel): Layer[] {\n    return useReactiveSnapshot(() => {\n        const layers = map.layers.getOperationalLayers({ sortByDisplayOrder: true }) ?? [];\n        layers.reverse(); // render topmost layer first\n        return layers;\n    }, [map]);\n}\n\n/**\n * Returns the child layers (sublayers or layers contained in a group layer) of a layer.\n * Layers are returned in render order (topmost sublayer first).\n */\nexport function useChildLayers(layer: AnyLayer): AnyLayer[] | undefined {\n    return useReactiveSnapshot(() => {\n        const children = layer.children?.getItems({ sortByDisplayOrder: true });\n        children?.reverse(); // render topmost layer first\n        return children;\n    }, [layer]);\n}\n\n/** Returns the layers current state. */\nexport function useLoadState(layer: AnyLayer): string {\n    return useReactiveSnapshot(() => {\n        // for sublayers, use the state of the parent\n        const target = isSublayer(layer) ? layer.parentLayer : layer;\n        return target.loadState;\n    }, [layer]);\n}\n"],"names":[],"mappings":";;;AAMO,SAAS,UAAU,GAAwB,EAAA;AAC9C,EAAA,OAAO,oBAAoB,MAAM;AAC7B,IAAM,MAAA,MAAA,GAAS,IAAI,MAAO,CAAA,oBAAA,CAAqB,EAAE,kBAAoB,EAAA,IAAA,EAAM,CAAA,IAAK,EAAC,CAAA;AACjF,IAAA,MAAA,CAAO,OAAQ,EAAA,CAAA;AACf,IAAO,OAAA,MAAA,CAAA;AAAA,GACX,EAAG,CAAC,GAAG,CAAC,CAAA,CAAA;AACZ,CAAA;AAMO,SAAS,eAAe,KAAyC,EAAA;AACpE,EAAA,OAAO,oBAAoB,MAAM;AAC7B,IAAA,MAAM,WAAW,KAAM,CAAA,QAAA,EAAU,SAAS,EAAE,kBAAA,EAAoB,MAAM,CAAA,CAAA;AACtE,IAAA,QAAA,EAAU,OAAQ,EAAA,CAAA;AAClB,IAAO,OAAA,QAAA,CAAA;AAAA,GACX,EAAG,CAAC,KAAK,CAAC,CAAA,CAAA;AACd,CAAA;AAGO,SAAS,aAAa,KAAyB,EAAA;AAClD,EAAA,OAAO,oBAAoB,MAAM;AAE7B,IAAA,MAAM,MAAS,GAAA,UAAA,CAAW,KAAK,CAAA,GAAI,MAAM,WAAc,GAAA,KAAA,CAAA;AACvD,IAAA,OAAO,MAAO,CAAA,SAAA,CAAA;AAAA,GAClB,EAAG,CAAC,KAAK,CAAC,CAAA,CAAA;AACd;;;;"}