@open-pioneer/toc 0.11.0 → 0.12.0-dev.20250905090001

package/CHANGELOG.md

@@ -1,5 +1,65 @@
 # @open-pioneer/toc
 
+## 0.12.0-dev.20250905090001
+
+### Minor Changes
+
+- 2702df4: Layers that are marked as `internal` are not considered by the Toc.
+
+    ```typescript
+    //internal layer will not be displayed in the Toc
+    const internalLayer = new SimpleLayer({
+        id: "layer1",
+        title: "layer 1",
+        olLayer: myOlLayer,
+        internal: true
+    });
+    ```
+
+    The layer's `internal` state also affects other UI widgets (e.g. Legend). If the layer should be hidden specifically in the toc (but not in other widgets) the `listMode` attribute can be used to hide the layer item.
+
+    ```typescript
+    //use listMode to hide the layer specifically in Toc
+    const hiddenLayer = new SimpleLayer({
+        id: "layer1",
+        title: "layer 1",
+        olLayer: myOlLayer,
+        attributes: {
+            toc: {
+                listMode: "hide"
+            }
+        }
+    });
+    ```
+
+    Valid values for `listMode` are:
+    - `"show"` layer item is displayed in Toc
+    - `"hide"` layer item is not rendered in Toc
+    - `"hide-children"` layer item for the layer itself is displayed in Toc but no layer items for child layers (e.g. sublayers of a group) are rendered
+
+    The `listMode` does always have precedence over the layer's `internal` property. For example, if the `listMode` is `"show"` the layer item is displayed even if `internal` is `true`.
+
+- 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.
+
+### Patch Changes
+
+- 10d2fe7: Update dependencies
+- da6a410: Update dependencies
+- Updated dependencies [29a10df]
+- Updated dependencies [10d2fe7]
+- Updated dependencies [2702df4]
+- Updated dependencies [12561fe]
+- Updated dependencies [5df900f]
+- Updated dependencies [8986b3b]
+- Updated dependencies [aeb9000]
+- Updated dependencies [2732052]
+- Updated dependencies [5df900f]
+- Updated dependencies [f1f69f2]
+- Updated dependencies [da6a410]
+    - @open-pioneer/map@0.12.0-dev.20250905090001
+    - @open-pioneer/basemap-switcher@0.12.0-dev.20250905090001
+
 ## 0.11.0
 
 ### Minor Changes
@@ -108,7 +168,6 @@
 ### Minor Changes
 
 - 2fa8020: Update trails core package dependencies.
-
     - Also updates Chakra UI to the latest 2.x version and Chakra React Select to version 5.
     - Removes any obsolete references to `@chakra-ui/system`.
       This dependency seems to be no longer required and may lead to duplicate packages in your dependency tree.

package/README.md

@@ -92,6 +92,84 @@ If enabled, a toggle button appears next to parent nodes by which the user can e
 />
 ```
 
+### Hide certain layers in Toc
+
+Layers that are marked as `internal` are not considered by the Toc.
+
+```typescript
+//internal layer will not be displayed in the Toc
+const internalLayer = new SimpleLayer({
+    id: "layer1",
+    title: "layer 1",
+    olLayer: myOlLayer,
+    internal: true
+});
+```
+
+The layer's `internal` state also affects other UI widgets (e.g. Legend). If the layer should be hidden specifically in the Toc (but not in other widgets) the `listMode` attribute can be used to hide the layer item.
+
+```typescript
+//use listMode to hide the layer specifically in Toc
+const hiddenLayer = new SimpleLayer({
+    id: "layer1",
+    title: "layer 1",
+    olLayer: myOlLayer,
+    attributes: {
+        toc: {
+            listMode: "hide"
+        }
+    }
+});
+```
+
+Valid values for `listMode` are:
+
+- `"show"` layer item is displayed in Toc
+- `"hide"` layer item is not rendered in Toc
+- `"hide-children"` layer item for the layer itself is displayed in Toc but no layer items for child layers (e.g. sublayers of a group) are rendered
+
+The `listMode` always has precedence over the layer's `internal` property. For example, if the `listMode` is `"show"` the layer item is displayed even if `internal` is `true`.
+
+### Using the Toc API to manipulate Toc Items programmatically
+
+The Toc API allows programmatic access to the Toc.
+
+Currently, the Toc API allows accessing the individual Toc items.  
+Toc items can be expanded/collapsed and provide access to the corresponding DOM element.
+
+```tsx
+import { Toc, TocApi, TocReadyEvent } from "@open-pioneer/toc";
+import { Button } from "@chakra-ui/react";
+
+const tocApi = useRef<TocApi>(undefined);
+
+// Expand or collapse group layer with the Toc API
+function toggleTocItem(layerId: string) {
+    if (!tocApi.current) {
+        return; // toc not ready yet
+    }
+
+    const layerItem = tocApi.current.getItemByLayerId(layerId);
+    if (!layerItem) {
+        return; // item not found
+    }
+
+    console.log("Current html element", layerItem.htmlElement); // access DOM element (e.g. for scrolling)
+    const newState = !layerItem.isExpanded;
+    layerItem.setExpanded(newState);
+}
+
+<Toc
+    // get API object from ready event and store it somewhere
+    onReady={(e) => { tocApi.current = e.api; }}
+
+    // don't use the API object after the toc has been destroyed
+    onDisposed={() => { tocApi.current = undefined; }}
+/>
+
+<Button onClick={() => toggleTocItem("myGroupLayer")}>Toggle group layer</Button>
+```
+
 ## License
 
 Apache-2.0 (see `LICENSE` file)

package/i18n/de.yaml

@@ -9,7 +9,6 @@ messages:
     expand: "Gruppe {title} ausklappen"
     collapse: "Gruppe {title} einklappen"
 
-  error: "Beim Erstellen des Karteninhalts ist ein Fehler aufgetreten."
   layerNotAvailable: "Layer nicht verfügbar"
 
   toolsLabel: "Kartenwerkzeuge"

package/i18n/en.yaml

@@ -9,7 +9,6 @@ messages:
     expand: "Expand group {title}"
     collapse: "Collapse group {title}"
 
-  error: "Error while creating map content."
   layerNotAvailable: "Layer not available"
 
   toolsLabel: "Map tools"

package/index.d.ts

@@ -1 +1,2 @@
-export { Toc, type TocProps, type ToolsConfig } from "./ui/Toc";
+export { type ExpandItemOptions, type TocApi, type TocDisposedEvent, type TocItem, type TocReadyEvent } from "./model";
+export { Toc, type TocProps, type ToolsConfig, type LayerTocAttributes, type ListMode } from "./ui/Toc";

package/model/TocApiImpl.d.ts

@@ -0,0 +1,9 @@
+import { TocModel } from "./TocModel";
+import { TocApi, TocItem } from "./types";
+export declare class TocApiImpl implements TocApi {
+    #private;
+    constructor(model: TocModel);
+    getItemById(id: string): TocItem | undefined;
+    getItemByLayerId(layerId: string): TocItem | undefined;
+    getItems(): TocItem[];
+}

package/model/TocApiImpl.js

@@ -0,0 +1,18 @@
+class TocApiImpl {
+  #tocModel;
+  constructor(model) {
+    this.#tocModel = model;
+  }
+  getItemById(id) {
+    return this.#tocModel.getItemById(id);
+  }
+  getItemByLayerId(layerId) {
+    return this.#tocModel.getItemByLayerId(layerId);
+  }
+  getItems() {
+    return this.#tocModel.getItems();
+  }
+}
+
+export { TocApiImpl };
+//# sourceMappingURL=TocApiImpl.js.map

package/model/TocApiImpl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TocApiImpl.js","sources":["TocApiImpl.ts"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { TocModel } from \"./TocModel\";\nimport { TocApi, TocItem } from \"./types\";\n\nexport class TocApiImpl implements TocApi {\n    #tocModel: TocModel;\n\n    constructor(model: TocModel) {\n        this.#tocModel = model;\n    }\n\n    getItemById(id: string): TocItem | undefined {\n        return this.#tocModel.getItemById(id);\n    }\n\n    getItemByLayerId(layerId: string): TocItem | undefined {\n        return this.#tocModel.getItemByLayerId(layerId);\n    }\n\n    getItems(): TocItem[] {\n        return this.#tocModel.getItems();\n    }\n}\n"],"names":[],"mappings":"AAKO,MAAM,UAAA,CAA6B;AAAA,EACtC,SAAA;AAAA,EAEA,YAAY,KAAA,EAAiB;AACzB,IAAA,IAAA,CAAK,SAAA,GAAY,KAAA;AAAA,EACrB;AAAA,EAEA,YAAY,EAAA,EAAiC;AACzC,IAAA,OAAO,IAAA,CAAK,SAAA,CAAU,WAAA,CAAY,EAAE,CAAA;AAAA,EACxC;AAAA,EAEA,iBAAiB,OAAA,EAAsC;AACnD,IAAA,OAAO,IAAA,CAAK,SAAA,CAAU,gBAAA,CAAiB,OAAO,CAAA;AAAA,EAClD;AAAA,EAEA,QAAA,GAAsB;AAClB,IAAA,OAAO,IAAA,CAAK,UAAU,QAAA,EAAS;AAAA,EACnC;AACJ;;;;"}

package/model/TocItemImpl.d.ts

@@ -0,0 +1,13 @@
+import { AnyLayer } from "@open-pioneer/map";
+import { TocModel } from "./TocModel";
+import { ExpandItemOptions, TocItem } from "./types";
+export declare class TocItemImpl implements TocItem {
+    #private;
+    constructor(layer: AnyLayer, tocModel: TocModel, expanded: boolean);
+    get id(): string;
+    get layerId(): string;
+    get isExpanded(): boolean;
+    get htmlElement(): HTMLElement | undefined;
+    setExpanded(expanded: boolean, options?: ExpandItemOptions): void;
+    setHtmlElement(element: HTMLElement | undefined): void;
+}

package/model/TocItemImpl.js

@@ -0,0 +1,45 @@
+import { reactive } from '@conterra/reactivity-core';
+
+class TocItemImpl {
+  #htmlElement = reactive();
+  #expanded;
+  #layer;
+  #tocModel;
+  constructor(layer, tocModel, expanded) {
+    this.#expanded = reactive(expanded);
+    this.#layer = layer;
+    this.#tocModel = tocModel;
+  }
+  get id() {
+    return this.layerId;
+  }
+  get layerId() {
+    return this.#layer.id;
+  }
+  get isExpanded() {
+    return this.#expanded.value;
+  }
+  get htmlElement() {
+    return this.#htmlElement.value;
+  }
+  setExpanded(expanded, options) {
+    this.#expanded.value = expanded;
+    let bubble = options?.bubble;
+    if (bubble === void 0) {
+      bubble = expanded;
+    }
+    if (bubble) {
+      const parentLayer = this.#layer.parent;
+      if (parentLayer) {
+        this.#tocModel.getItemByLayerId(parentLayer.id)?.setExpanded(expanded, options);
+      }
+    }
+  }
+  //private setter, not exposed in TocItem interface
+  setHtmlElement(element) {
+    this.#htmlElement.value = element;
+  }
+}
+
+export { TocItemImpl };
+//# sourceMappingURL=TocItemImpl.js.map

package/model/TocItemImpl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TocItemImpl.js","sources":["TocItemImpl.ts"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { Reactive, reactive } from \"@conterra/reactivity-core\";\nimport { AnyLayer } from \"@open-pioneer/map\";\nimport { TocModel } from \"./TocModel\";\nimport { ExpandItemOptions, TocItem } from \"./types\";\n\nexport class TocItemImpl implements TocItem {\n    #htmlElement = reactive<HTMLElement | undefined>();\n    #expanded: Reactive<boolean>;\n    #layer: AnyLayer;\n    #tocModel: TocModel;\n\n    constructor(layer: AnyLayer, tocModel: TocModel, expanded: boolean) {\n        this.#expanded = reactive(expanded);\n        this.#layer = layer;\n        this.#tocModel = tocModel;\n    }\n\n    get id() {\n        return this.layerId;\n    }\n\n    get layerId() {\n        return this.#layer.id;\n    }\n\n    get isExpanded() {\n        return this.#expanded.value;\n    }\n\n    get htmlElement() {\n        return this.#htmlElement.value;\n    }\n\n    setExpanded(expanded: boolean, options?: ExpandItemOptions): void {\n        this.#expanded.value = expanded;\n        let bubble = options?.bubble;\n        //by default bubble if expand is true\n        if (bubble === undefined) {\n            bubble = expanded;\n        }\n\n        if (bubble) {\n            const parentLayer = this.#layer.parent;\n            if (parentLayer) {\n                this.#tocModel.getItemByLayerId(parentLayer.id)?.setExpanded(expanded, options);\n            }\n        }\n    }\n\n    //private setter, not exposed in TocItem interface\n    setHtmlElement(element: HTMLElement | undefined) {\n        this.#htmlElement.value = element;\n    }\n}\n"],"names":[],"mappings":";;AAOO,MAAM,WAAA,CAA+B;AAAA,EACxC,eAAe,QAAA,EAAkC;AAAA,EACjD,SAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EAEA,WAAA,CAAY,KAAA,EAAiB,QAAA,EAAoB,QAAA,EAAmB;AAChE,IAAA,IAAA,CAAK,SAAA,GAAY,SAAS,QAAQ,CAAA;AAClC,IAAA,IAAA,CAAK,MAAA,GAAS,KAAA;AACd,IAAA,IAAA,CAAK,SAAA,GAAY,QAAA;AAAA,EACrB;AAAA,EAEA,IAAI,EAAA,GAAK;AACL,IAAA,OAAO,IAAA,CAAK,OAAA;AAAA,EAChB;AAAA,EAEA,IAAI,OAAA,GAAU;AACV,IAAA,OAAO,KAAK,MAAA,CAAO,EAAA;AAAA,EACvB;AAAA,EAEA,IAAI,UAAA,GAAa;AACb,IAAA,OAAO,KAAK,SAAA,CAAU,KAAA;AAAA,EAC1B;AAAA,EAEA,IAAI,WAAA,GAAc;AACd,IAAA,OAAO,KAAK,YAAA,CAAa,KAAA;AAAA,EAC7B;AAAA,EAEA,WAAA,CAAY,UAAmB,OAAA,EAAmC;AAC9D,IAAA,IAAA,CAAK,UAAU,KAAA,GAAQ,QAAA;AACvB,IAAA,IAAI,SAAS,OAAA,EAAS,MAAA;AAEtB,IAAA,IAAI,WAAW,MAAA,EAAW;AACtB,MAAA,MAAA,GAAS,QAAA;AAAA,IACb;AAEA,IAAA,IAAI,MAAA,EAAQ;AACR,MAAA,MAAM,WAAA,GAAc,KAAK,MAAA,CAAO,MAAA;AAChC,MAAA,IAAI,WAAA,EAAa;AACb,QAAA,IAAA,CAAK,UAAU,gBAAA,CAAiB,WAAA,CAAY,EAAE,CAAA,EAAG,WAAA,CAAY,UAAU,OAAO,CAAA;AAAA,MAClF;AAAA,IACJ;AAAA,EACJ;AAAA;AAAA,EAGA,eAAe,OAAA,EAAkC;AAC7C,IAAA,IAAA,CAAK,aAAa,KAAA,GAAQ,OAAA;AAAA,EAC9B;AACJ;;;;"}

package/model/TocModel.d.ts

@@ -1,36 +1,4 @@
-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;
-}
+import { TocItem } from "./types";
 /**
  * Global toc widget options.
  *
@@ -51,26 +19,26 @@ export interface TocWidgetOptions {
     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.
+ * Shared model used by the Toc and all its sub-components.
+ * Extends the external TocAPI with private, internal properties.
  *
  * @internal
  */
-export interface TocItem {
-    /**
-     * Identifier of the layer that corresponds with the list item.
-     */
-    readonly layerId: string;
+export declare class TocModel {
+    #private;
+    constructor(initialOptions: TocWidgetOptions);
     /**
-     * true if list item is expanded.
-     */
-    readonly isExpanded: boolean;
-    /**
-     * Expands or collapses the list item.
+     * Return the global widget options.
      *
-     * Note: not all list items support this operation.
+     * NOTE: The object itself is reactive, but individual properties are not (change -> replace).
+     * See {@link updateOptions}.
      */
-    setExpanded(expanded: boolean): void;
+    get options(): TocWidgetOptions;
+    getItemById(id: string): TocItem | undefined;
+    getItemByLayerId(layerId: string): TocItem | undefined;
+    getItems(): TocItem[];
+    registerItem(item: TocItem): void;
+    unregisterItem(item: TocItem): void;
+    updateOptions(options: TocWidgetOptions): void;
 }
+export declare function createOptions(autoShowParents?: boolean | undefined, collapsibleGroups?: boolean | undefined, isCollapsed?: boolean | undefined): TocWidgetOptions;

package/model/TocModel.js

@@ -1,14 +1,55 @@
-import { createContext, useContext } from 'react';
+import { reactiveMap, reactive } from '@conterra/reactivity-core';
 
-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;
+class TocModel {
+  #options;
+  // Indexed by layerId
+  #items = reactiveMap();
+  constructor(initialOptions) {
+    this.#options = reactive(initialOptions);
+  }
+  /**
+   * Return the global widget options.
+   *
+   * NOTE: The object itself is reactive, but individual properties are not (change -> replace).
+   * See {@link updateOptions}.
+   */
+  get options() {
+    return this.#options.value;
+  }
+  getItemById(id) {
+    return this.#items.get(id);
+  }
+  getItemByLayerId(layerId) {
+    return this.getItemById(layerId);
+  }
+  getItems() {
+    return Array.from(this.#items.values());
+  }
+  // Used by toc item components to register themselves
+  registerItem(item) {
+    if (this.#items.has(item.id)) {
+      throw new Error(`Item with layerId '${item.layerId}' already registered.`);
+    }
+    this.#items.set(item.id, item);
+  }
+  // Used by toc item components to register themselves
+  unregisterItem(item) {
+    if (this.#items.get(item.id) !== item) {
+      throw new Error(`Item with layerId '${item.layerId}' not registered.`);
+    }
+    this.#items.delete(item.id);
+  }
+  updateOptions(options) {
+    this.#options.value = options;
+  }
+}
+function createOptions(autoShowParents, collapsibleGroups, isCollapsed) {
+  return {
+    autoShowParents: autoShowParents ?? true,
+    collapsibleGroups: collapsibleGroups ?? false,
+    initiallyCollapsed: isCollapsed ?? false
+  };
 }
 
-export { TocModelProvider, useTocModel };
+export { TocModel, createOptions };
 //# sourceMappingURL=TocModel.js.map

package/model/TocModel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TocModel.js","sources":["TocModel.ts"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 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,MAAS,CAAA;AAM9D,MAAM,mBAAuC,eAAgB,CAAA;AAK7D,SAAS,WAAwB,GAAA;AACpC,EAAM,MAAA,KAAA,GAAQ,WAAW,eAAe,CAAA;AACxC,EAAA,IAAI,CAAC,KAAO,EAAA;AACR,IAAM,MAAA,IAAI,MAAM,gDAAgD,CAAA;AAAA;AAEpE,EAAO,OAAA,KAAA;AACX;;;;"}
+{"version":3,"file":"TocModel.js","sources":["TocModel.ts"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { reactive, Reactive, reactiveMap } from \"@conterra/reactivity-core\";\nimport { TocItem } from \"./types\";\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 * Shared model used by the Toc and all its sub-components.\n * Extends the external TocAPI with private, internal properties.\n *\n * @internal\n */\nexport class TocModel {\n    #options: Reactive<TocWidgetOptions>;\n\n    // Indexed by layerId\n    #items = reactiveMap<string, TocItem>();\n\n    constructor(initialOptions: TocWidgetOptions) {\n        this.#options = reactive(initialOptions);\n    }\n\n    /**\n     * Return the global widget options.\n     *\n     * NOTE: The object itself is reactive, but individual properties are not (change -> replace).\n     * See {@link updateOptions}.\n     */\n    get options() {\n        return this.#options.value;\n    }\n\n    getItemById(id: string): TocItem | undefined {\n        return this.#items.get(id);\n    }\n\n    getItemByLayerId(layerId: string): TocItem | undefined {\n        return this.getItemById(layerId); // happens to be the same at the moment\n    }\n\n    getItems(): TocItem[] {\n        return Array.from(this.#items.values());\n    }\n\n    // Used by toc item components to register themselves\n    registerItem(item: TocItem): void {\n        if (this.#items.has(item.id)) {\n            throw new Error(`Item with layerId '${item.layerId}' already registered.`);\n        }\n        this.#items.set(item.id, item);\n    }\n\n    // Used by toc item components to register themselves\n    unregisterItem(item: TocItem): void {\n        if (this.#items.get(item.id) !== item) {\n            throw new Error(`Item with layerId '${item.layerId}' not registered.`);\n        }\n        this.#items.delete(item.id);\n    }\n\n    updateOptions(options: TocWidgetOptions) {\n        this.#options.value = options;\n    }\n}\n\nexport function createOptions(\n    autoShowParents?: boolean | undefined,\n    collapsibleGroups?: boolean | undefined,\n    isCollapsed?: boolean | undefined\n): TocWidgetOptions {\n    return {\n        autoShowParents: autoShowParents ?? true,\n        collapsibleGroups: collapsibleGroups ?? false,\n        initiallyCollapsed: isCollapsed ?? false\n    };\n}\n"],"names":[],"mappings":";;AAiCO,MAAM,QAAA,CAAS;AAAA,EAClB,QAAA;AAAA;AAAA,EAGA,SAAS,WAAA,EAA6B;AAAA,EAEtC,YAAY,cAAA,EAAkC;AAC1C,IAAA,IAAA,CAAK,QAAA,GAAW,SAAS,cAAc,CAAA;AAAA,EAC3C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,IAAI,OAAA,GAAU;AACV,IAAA,OAAO,KAAK,QAAA,CAAS,KAAA;AAAA,EACzB;AAAA,EAEA,YAAY,EAAA,EAAiC;AACzC,IAAA,OAAO,IAAA,CAAK,MAAA,CAAO,GAAA,CAAI,EAAE,CAAA;AAAA,EAC7B;AAAA,EAEA,iBAAiB,OAAA,EAAsC;AACnD,IAAA,OAAO,IAAA,CAAK,YAAY,OAAO,CAAA;AAAA,EACnC;AAAA,EAEA,QAAA,GAAsB;AAClB,IAAA,OAAO,KAAA,CAAM,IAAA,CAAK,IAAA,CAAK,MAAA,CAAO,QAAQ,CAAA;AAAA,EAC1C;AAAA;AAAA,EAGA,aAAa,IAAA,EAAqB;AAC9B,IAAA,IAAI,IAAA,CAAK,MAAA,CAAO,GAAA,CAAI,IAAA,CAAK,EAAE,CAAA,EAAG;AAC1B,MAAA,MAAM,IAAI,KAAA,CAAM,CAAA,mBAAA,EAAsB,IAAA,CAAK,OAAO,CAAA,qBAAA,CAAuB,CAAA;AAAA,IAC7E;AACA,IAAA,IAAA,CAAK,MAAA,CAAO,GAAA,CAAI,IAAA,CAAK,EAAA,EAAI,IAAI,CAAA;AAAA,EACjC;AAAA;AAAA,EAGA,eAAe,IAAA,EAAqB;AAChC,IAAA,IAAI,KAAK,MAAA,CAAO,GAAA,CAAI,IAAA,CAAK,EAAE,MAAM,IAAA,EAAM;AACnC,MAAA,MAAM,IAAI,KAAA,CAAM,CAAA,mBAAA,EAAsB,IAAA,CAAK,OAAO,CAAA,iBAAA,CAAmB,CAAA;AAAA,IACzE;AACA,IAAA,IAAA,CAAK,MAAA,CAAO,MAAA,CAAO,IAAA,CAAK,EAAE,CAAA;AAAA,EAC9B;AAAA,EAEA,cAAc,OAAA,EAA2B;AACrC,IAAA,IAAA,CAAK,SAAS,KAAA,GAAQ,OAAA;AAAA,EAC1B;AACJ;AAEO,SAAS,aAAA,CACZ,eAAA,EACA,iBAAA,EACA,WAAA,EACgB;AAChB,EAAA,OAAO;AAAA,IACH,iBAAiB,eAAA,IAAmB,IAAA;AAAA,IACpC,mBAAmB,iBAAA,IAAqB,KAAA;AAAA,IACxC,oBAAoB,WAAA,IAAe;AAAA,GACvC;AACJ;;;;"}

package/model/context.d.ts

@@ -0,0 +1,11 @@
+import { Provider } from "react";
+import { TocModel } from "./TocModel";
+/**
+ * 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;

package/model/context.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=context.js.map

package/model/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sources":["context.ts"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { createContext, Provider, useContext } from \"react\";\nimport { TocModel } from \"./TocModel\";\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"],"names":[],"mappings":";;AAKA,MAAM,eAAA,GAAkB,cAAoC,MAAS,CAAA;AAM9D,MAAM,mBAAuC,eAAA,CAAgB;AAK7D,SAAS,WAAA,GAAwB;AACpC,EAAA,MAAM,KAAA,GAAQ,WAAW,eAAe,CAAA;AACxC,EAAA,IAAI,CAAC,KAAA,EAAO;AACR,IAAA,MAAM,IAAI,MAAM,gDAAgD,CAAA;AAAA,EACpE;AACA,EAAA,OAAO,KAAA;AACX;;;;"}

package/model/index.d.ts

@@ -0,0 +1,5 @@
+export { TocModelProvider, useTocModel } from "./context";
+export { TocApiImpl } from "./TocApiImpl";
+export { TocItemImpl } from "./TocItemImpl";
+export { createOptions, TocModel, type TocWidgetOptions } from "./TocModel";
+export { type ExpandItemOptions, type TocApi, type TocDisposedEvent, type TocItem, type TocReadyEvent } from "./types";

package/model/types.d.ts

@@ -0,0 +1,74 @@
+/**
+ * API to control the Toc component imperatively
+ */
+export interface TocApi {
+    /**
+     * Returns the toc item for the given `id`.
+     */
+    getItemById(id: string): TocItem | undefined;
+    /**
+     * Returns the item that corresponds with the `layerId`.
+     */
+    getItemByLayerId(layerId: string): TocItem | undefined;
+    /**
+     * Returns the list of all registered items in the Toc.
+     */
+    getItems(): TocItem[];
+}
+/**
+ * Represents an item in the toc.
+ *
+ * Currently items register themselves in the model when they are mounted
+ * and remove themselves when they are unmounted.
+ */
+export interface TocItem {
+    /**
+     * Identifier of the Toc item.
+     * Currently, this is the same as `layerId`, but that could be changed in the future.
+     */
+    readonly id: string;
+    /**
+     * Identifier of the layer that corresponds with the list item.
+     * May be undefined if the item does not represent a layer.
+     */
+    readonly layerId?: string;
+    /**
+     * `true` if list item is expanded.
+     */
+    readonly isExpanded: boolean;
+    /**
+     * DOM element of the underlying {@link LayerItem}, `undefined` if the toc has been disposed
+     * or if the item is currently not being rendered.
+     */
+    readonly htmlElement: HTMLElement | undefined;
+    /**
+     * Expands or collapses the list item.
+     *
+     * Note: not all list items support this operation.
+     */
+    setExpanded(expanded: boolean, options?: ExpandItemOptions): void;
+}
+export interface ExpandItemOptions {
+    /**
+     * Align `expanded` state of parent items.
+     * By default (`undefined`), the status is only passed on to the parents when the Toc item is being expanded but not if it is being collapsed.
+     */
+    bubble?: boolean;
+}
+/**
+ * Event that indicates that the Toc component is initialized.
+ * The event carries a reference to the public {@link TocApi}
+ */
+export interface TocReadyEvent {
+    /**
+     * Reference to the Toc API that allows manipulating the Toc.
+     */
+    api: TocApi;
+}
+/**
+ * Event that indicates that the Toc component has been disposed.
+ *
+ * Empty interface, might be extended in the future
+ */
+export interface TocDisposedEvent {
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@open-pioneer/toc",
-  "version": "0.11.0",
+  "version": "0.12.0-dev.20250905090001",
   "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,18 @@
     "directory": "src/packages/toc"
   },
   "dependencies": {
-    "@chakra-ui/react": "^3.19.2",
+    "@chakra-ui/react": "^3.24.2",
     "@open-pioneer/react-utils": "^4.0.0",
     "@open-pioneer/runtime": "^4.0.0",
     "classnames": "^2.5.1",
-    "ol": "^10.5.0",
-    "react": "^19.1.0",
+    "ol": "^10.6.1",
+    "react": "^19.1.1",
     "react-icons": "^5.5.0",
     "@open-pioneer/reactivity": "^4.0.0",
     "@conterra/reactivity-core": "^0.7.0",
     "@open-pioneer/chakra-snippets": "^4.0.0",
-    "@open-pioneer/basemap-switcher": "^0.11.0",
-    "@open-pioneer/map": "^0.11.0"
+    "@open-pioneer/basemap-switcher": "0.12.0-dev.20250905090001",
+    "@open-pioneer/map": "0.12.0-dev.20250905090001"
   },
   "exports": {
     "./package.json": "./package.json",