@dso-toolkit/react 87.0.0 → 88.1.0-ghi-3495.0

package/dist/components/info-button/info-button.content.js

@@ -0,0 +1,8 @@
+import * as React from "react";
+export const children = (React.createElement("div", { className: "dso-rich-content" },
+    React.createElement("h2", null, "Samenspel tussen wetgever en ontwikkelaars"),
+    React.createElement("p", null,
+        "Het DSO wordt ontwikkeld door het programma",
+        " ",
+        React.createElement("a", { href: "https://aandeslagmetdeomgevingswet.nl/digitaal-stelsel/" }, "Aan de slag met de Omgevingswet"),
+        " in samenwerking met haar partners. De ontwikkeling vraagt een intensief samenspel tussen de wetgever en de ontwikkelpartners van het DSO. Enerzijds moeten wetgever en de ontwikkelpartners zorgen dat alles wat in de wet- en regelgeving wordt geregeld ook makkelijk toegankelijk is of kan worden. Anderzijds moeten zij zorgen dat alles wat digitaal wordt gerealiseerd, ook juridisch verankerd is of kan worden.")));

package/dist/components/info-button/info-button.react-template.js

@@ -1,9 +1,9 @@
-import * as React from "react";
+import React from "react";
 import { DsoInfoButton } from "../../components";
 export const reactInfoButton = {
     component: "infoButton",
     implementation: "react",
-    template: () => function infoButtonTemplate({ label, active, secondary, dsoToggle }) {
-        return (React.createElement(DsoInfoButton, { label: label, active: active, secondary: secondary, onDsoToggle: (e) => dsoToggle?.(e.detail) }));
+    template: () => function infoButtonTemplate({ label, active, toggletipPlacement, secondary, dsoToggle, children }) {
+        return (React.createElement(DsoInfoButton, { label: label, active: active, secondary: secondary, toggletipPlacement: toggletipPlacement, onDsoToggle: (e) => dsoToggle?.(e.detail) }, children && React.createElement("div", { slot: "toggletip" }, children)));
     },
 };

package/dist/components/info-button/info-button.stories.js

@@ -1,16 +1,20 @@
 import { infoButtonMeta, infoButtonStories } from "dso-toolkit";
 import { templateContainer } from "../../templates";
+import { children } from "./info-button.content";
 import readme from "./readme.md?raw";
 const meta = {
     ...infoButtonMeta({ readme }),
     title: "Info Button",
 };
 export default meta;
-const { Active, Inactive, SecondaryActive, SecondaryInactive } = infoButtonStories({
+const { Default, Information, SecondaryActive, SecondaryInactive } = infoButtonStories({
     templateContainer,
     storyTemplates: (templates) => {
         const { infoButtonTemplate } = templates;
-        return { infoButtonTemplate };
+        return {
+            infoButtonTemplate,
+            children,
+        };
     },
 });
-export { Active, Inactive, SecondaryActive, SecondaryInactive };
+export { Default, Information, SecondaryActive, SecondaryInactive };

package/dist/components.js

@@ -34,6 +34,7 @@ import { DsoInfoButton as DsoInfoButtonElement, defineCustomElement as defineDso
 import { DsoInfo as DsoInfoElement, defineCustomElement as defineDsoInfo } from "@dso-toolkit/core/dist/components/dso-info.js";
 import { DsoInputRange as DsoInputRangeElement, defineCustomElement as defineDsoInputRange } from "@dso-toolkit/core/dist/components/dso-input-range.js";
 import { DsoLabel as DsoLabelElement, defineCustomElement as defineDsoLabel } from "@dso-toolkit/core/dist/components/dso-label.js";
+import { DsoLegendGroup as DsoLegendGroupElement, defineCustomElement as defineDsoLegendGroup } from "@dso-toolkit/core/dist/components/dso-legend-group.js";
 import { DsoLegendItem as DsoLegendItemElement, defineCustomElement as defineDsoLegendItem } from "@dso-toolkit/core/dist/components/dso-legend-item.js";
 import { DsoLegend as DsoLegendElement, defineCustomElement as defineDsoLegend } from "@dso-toolkit/core/dist/components/dso-legend.js";
 import { DsoListButton as DsoListButtonElement, defineCustomElement as defineDsoListButton } from "@dso-toolkit/core/dist/components/dso-list-button.js";
@@ -390,6 +391,14 @@ export const DsoLegend = /*@__PURE__*/ createComponent({
     },
     defineCustomElement: defineDsoLegend
 });
+export const DsoLegendGroup = /*@__PURE__*/ createComponent({
+    tagName: 'dso-legend-group',
+    elementClass: DsoLegendGroupElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onDsoLegendGroupModeChange: 'dsoLegendGroupModeChange' },
+    defineCustomElement: defineDsoLegendGroup
+});
 export const DsoLegendItem = /*@__PURE__*/ createComponent({
     tagName: 'dso-legend-item',
     elementClass: DsoLegendItemElement,
@@ -397,6 +406,7 @@ export const DsoLegendItem = /*@__PURE__*/ createComponent({
     react: React,
     events: {
         onDsoActiveChange: 'dsoActiveChange',
+        onDsoDelete: 'dsoDelete',
         onDsoMouseEnter: 'dsoMouseEnter',
         onDsoMouseLeave: 'dsoMouseLeave'
     },

package/dist/types/components/info-button/info-button.content.d.ts

@@ -0,0 +1,2 @@
+import * as React from "react";
+export declare const children: React.JSX.Element;

package/dist/types/components/info-button/info-button.react-template.d.ts

@@ -1,3 +1,4 @@
 import { InfoButton } from "dso-toolkit";
+import { JSX } from "react";
 import { ComponentImplementation } from "../../templates";
-export declare const reactInfoButton: ComponentImplementation<InfoButton>;
+export declare const reactInfoButton: ComponentImplementation<InfoButton<JSX.Element>>;

package/dist/types/components/info-button/info-button.stories.d.ts

@@ -2,7 +2,7 @@ import type { Meta } from "@storybook/react-vite";
 import { InfoButtonArgs } from "dso-toolkit";
 declare const meta: Meta<InfoButtonArgs>;
 export default meta;
-declare const Active: import("storybook/internal/csf").BaseAnnotations<import("storybook/internal/csf").Renderer, InfoButtonArgs> & {
+declare const Default: import("storybook/internal/csf").BaseAnnotations<import("storybook/internal/csf").Renderer, InfoButtonArgs> & {
     name?: import("storybook/internal/csf").StoryName;
     storyName?: import("storybook/internal/csf").StoryName;
     play?: import("storybook/internal/csf").PlayFunction<import("storybook/internal/csf").Renderer, InfoButtonArgs> | undefined;
@@ -10,7 +10,7 @@ declare const Active: import("storybook/internal/csf").BaseAnnotations<import("s
     story?: Omit<import("storybook/internal/csf").StoryAnnotations<import("storybook/internal/csf").Renderer, InfoButtonArgs, Partial<InfoButtonArgs>>, "story"> | undefined;
 } & {
     args?: Partial<InfoButtonArgs> | undefined;
-}, Inactive: import("storybook/internal/csf").BaseAnnotations<import("storybook/internal/csf").Renderer, InfoButtonArgs> & {
+}, Information: import("storybook/internal/csf").BaseAnnotations<import("storybook/internal/csf").Renderer, InfoButtonArgs> & {
     name?: import("storybook/internal/csf").StoryName;
     storyName?: import("storybook/internal/csf").StoryName;
     play?: import("storybook/internal/csf").PlayFunction<import("storybook/internal/csf").Renderer, InfoButtonArgs> | undefined;
@@ -35,4 +35,4 @@ declare const Active: import("storybook/internal/csf").BaseAnnotations<import("s
 } & {
     args?: Partial<InfoButtonArgs> | undefined;
 };
-export { Active, Inactive, SecondaryActive, SecondaryInactive };
+export { Default, Information, SecondaryActive, SecondaryInactive };

package/dist/types/components.d.ts

@@ -2,7 +2,7 @@
  * This file was automatically generated by the Stencil React Output Target.
  * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
  */
-import { type AccordionSectionActiveChangeEvent, type AccordionSectionAnimationEndEvent, type AccordionSectionAnimationStartEvent, type AccordionSectionToggleClickEvent, type AdvancedSelectChangeEvent, type AdvancedSelectRedirectEvent, type AlertCloseEvent, type AnnotationActiveChangeEvent, type AnnotationKaartClickEvent, type BaseLayerChangeEvent, type CardClickEvent, type DatePickerBlurEvent, type DatePickerChangeEvent, type DatePickerFocusEvent, type DatePickerKeyboardEvent, type DocumentCardClickEvent, type DocumentComponentMarkItemHighlightEvent, type DocumentComponentOpenToggleEvent, type DocumentComponentOzonContentClickEvent, type DocumentComponentRecursiveToggleEvent, type DocumentComponentTableOfContentsClickEvent, type DocumentComponentToggleAnnotationEvent, type DsoAccordionSectionCustomEvent, type DsoAdvancedSelectCustomEvent, type DsoAlertCustomEvent, type DsoAnnotationActiviteitCustomEvent, type DsoAnnotationGebiedsaanwijzingCustomEvent, type DsoAnnotationKaartCustomEvent, type DsoAnnotationLocatieCustomEvent, type DsoAnnotationOmgevingsnormwaardeCustomEvent, type DsoAutosuggestCustomEvent, type DsoCardCustomEvent, type DsoDatePickerCustomEvent, type DsoDocumentCardCustomEvent, type DsoDocumentComponentCustomEvent, type DsoExpandableCustomEvent, type DsoHeaderCustomEvent, type DsoHistoryItemCustomEvent, type DsoIconButtonCustomEvent, type DsoInfoButtonCustomEvent, type DsoInfoCustomEvent, type DsoInputRangeCustomEvent, type DsoLabelCustomEvent, type DsoLegendCustomEvent, type DsoLegendItemCustomEvent, type DsoListButtonCustomEvent, type DsoLogoCustomEvent, type DsoMapBaseLayersCustomEvent, type DsoMapControlsCustomEvent, type DsoMapLayerCustomEvent, type DsoMapLayerObjectCustomEvent, type DsoMapOverlaysCustomEvent, type DsoMarkBarCustomEvent, type DsoModalCustomEvent, type DsoOnboardingTipCustomEvent, type DsoOzonContentCustomEvent, type DsoPaginationCustomEvent, type DsoPanelCustomEvent, type DsoPlekinfoCardCustomEvent, type DsoRenvooiCustomEvent, type DsoResponsiveElementCustomEvent, type DsoScrollEndEvent, type DsoScrollableCustomEvent, type DsoSelectableCustomEvent, type DsoSkiplinkCustomEvent, type DsoSlideToggleCustomEvent, type DsoSurveyRatingCustomEvent, type DsoTabCustomEvent, type DsoTreeViewCustomEvent, type DsoViewerGridCustomEvent, type DsotDocumentComponentDemoCustomEvent, type ExpandableAnimationEndEvent, type ExpandableAnimationStartEvent, type HeaderEvent, type HistoryItemClickEvent, type IconButtonClickEvent, type InfoButtonToggleEvent, type InputRangeChangeEvent, type LegendCloseEvent, type LegendContentSwitchEvent, type LegendItemActiveChangeEvent, type ListButtonChangeEvent, type ListButtonSelectedEvent, type LogoClickEvent, type LogoLabelClickEvent, type MapControlsToggleEvent, type MapLayerActiveChangeEvent, type MapLayerObjectActiveChangeEvent, type MarkBarClearEvent, type MarkBarInputEvent, type MarkBarPaginationEvent, type ModalCloseEvent, type OnboardingTipCloseEvent, type OverlayChangeEvent, type OzonContentClickEvent, type OzonContentMarkItemHighlightEvent, type PaginationSelectPageEvent, type PanelCloseEvent, type PlekinfoCardClickEvent, type RenvooiMarkItemHighlightEvent, type ResponsiveElementSize, type SelectableChangeEvent, type SkiplinkClickEvent, type SlideToggleActiveEvent, type Suggestion, type SurveyRatingCloseEvent, type SurveyRatingSubmitEvent, type TabsSwitchEvent, type TreeViewItem, type TreeViewPointerEvent, type ViewerGridActiveTabSwitchEvent, type ViewerGridChangeSizeAnimationEndEvent, type ViewerGridChangeSizeEvent, type ViewerGridCloseFilterPanelEvent, type ViewerGridCloseOverlayEvent, type ViewerGridMainToggleEvent } from "@dso-toolkit/core";
+import { type AccordionSectionActiveChangeEvent, type AccordionSectionAnimationEndEvent, type AccordionSectionAnimationStartEvent, type AccordionSectionToggleClickEvent, type AdvancedSelectChangeEvent, type AdvancedSelectRedirectEvent, type AlertCloseEvent, type AnnotationActiveChangeEvent, type AnnotationKaartClickEvent, type BaseLayerChangeEvent, type CardClickEvent, type DatePickerBlurEvent, type DatePickerChangeEvent, type DatePickerFocusEvent, type DatePickerKeyboardEvent, type DocumentCardClickEvent, type DocumentComponentMarkItemHighlightEvent, type DocumentComponentOpenToggleEvent, type DocumentComponentOzonContentClickEvent, type DocumentComponentRecursiveToggleEvent, type DocumentComponentTableOfContentsClickEvent, type DocumentComponentToggleAnnotationEvent, type DsoAccordionSectionCustomEvent, type DsoAdvancedSelectCustomEvent, type DsoAlertCustomEvent, type DsoAnnotationActiviteitCustomEvent, type DsoAnnotationGebiedsaanwijzingCustomEvent, type DsoAnnotationKaartCustomEvent, type DsoAnnotationLocatieCustomEvent, type DsoAnnotationOmgevingsnormwaardeCustomEvent, type DsoAutosuggestCustomEvent, type DsoCardCustomEvent, type DsoDatePickerCustomEvent, type DsoDocumentCardCustomEvent, type DsoDocumentComponentCustomEvent, type DsoExpandableCustomEvent, type DsoHeaderCustomEvent, type DsoHistoryItemCustomEvent, type DsoIconButtonCustomEvent, type DsoInfoButtonCustomEvent, type DsoInfoCustomEvent, type DsoInputRangeCustomEvent, type DsoLabelCustomEvent, type DsoLegendCustomEvent, type DsoLegendGroupCustomEvent, type DsoLegendItemCustomEvent, type DsoListButtonCustomEvent, type DsoLogoCustomEvent, type DsoMapBaseLayersCustomEvent, type DsoMapControlsCustomEvent, type DsoMapLayerCustomEvent, type DsoMapLayerObjectCustomEvent, type DsoMapOverlaysCustomEvent, type DsoMarkBarCustomEvent, type DsoModalCustomEvent, type DsoOnboardingTipCustomEvent, type DsoOzonContentCustomEvent, type DsoPaginationCustomEvent, type DsoPanelCustomEvent, type DsoPlekinfoCardCustomEvent, type DsoRenvooiCustomEvent, type DsoResponsiveElementCustomEvent, type DsoScrollEndEvent, type DsoScrollableCustomEvent, type DsoSelectableCustomEvent, type DsoSkiplinkCustomEvent, type DsoSlideToggleCustomEvent, type DsoSurveyRatingCustomEvent, type DsoTabCustomEvent, type DsoTreeViewCustomEvent, type DsoViewerGridCustomEvent, type DsotDocumentComponentDemoCustomEvent, type ExpandableAnimationEndEvent, type ExpandableAnimationStartEvent, type HeaderEvent, type HistoryItemClickEvent, type IconButtonClickEvent, type InfoButtonToggleEvent, type InputRangeChangeEvent, type LegendCloseEvent, type LegendContentSwitchEvent, type LegendGroupModeChangeEvent, type LegendItemActiveChangeEvent, type LegendItemDeleteEvent, type ListButtonChangeEvent, type ListButtonSelectedEvent, type LogoClickEvent, type LogoLabelClickEvent, type MapControlsToggleEvent, type MapLayerActiveChangeEvent, type MapLayerObjectActiveChangeEvent, type MarkBarClearEvent, type MarkBarInputEvent, type MarkBarPaginationEvent, type ModalCloseEvent, type OnboardingTipCloseEvent, type OverlayChangeEvent, type OzonContentClickEvent, type OzonContentMarkItemHighlightEvent, type PaginationSelectPageEvent, type PanelCloseEvent, type PlekinfoCardClickEvent, type RenvooiMarkItemHighlightEvent, type ResponsiveElementSize, type SelectableChangeEvent, type SkiplinkClickEvent, type SlideToggleActiveEvent, type Suggestion, type SurveyRatingCloseEvent, type SurveyRatingSubmitEvent, type TabsSwitchEvent, type TreeViewItem, type TreeViewPointerEvent, type ViewerGridActiveTabSwitchEvent, type ViewerGridChangeSizeAnimationEndEvent, type ViewerGridChangeSizeEvent, type ViewerGridCloseFilterPanelEvent, type ViewerGridCloseOverlayEvent, type ViewerGridMainToggleEvent } from "@dso-toolkit/core";
 import { DsoAccordionSection as DsoAccordionSectionElement } from "@dso-toolkit/core/dist/components/dso-accordion-section.js";
 import { DsoAccordion as DsoAccordionElement } from "@dso-toolkit/core/dist/components/dso-accordion.js";
 import { DsoActionListItem as DsoActionListItemElement } from "@dso-toolkit/core/dist/components/dso-action-list-item.js";
@@ -38,6 +38,7 @@ import { DsoInfoButton as DsoInfoButtonElement } from "@dso-toolkit/core/dist/co
 import { DsoInfo as DsoInfoElement } from "@dso-toolkit/core/dist/components/dso-info.js";
 import { DsoInputRange as DsoInputRangeElement } from "@dso-toolkit/core/dist/components/dso-input-range.js";
 import { DsoLabel as DsoLabelElement } from "@dso-toolkit/core/dist/components/dso-label.js";
+import { DsoLegendGroup as DsoLegendGroupElement } from "@dso-toolkit/core/dist/components/dso-legend-group.js";
 import { DsoLegendItem as DsoLegendItemElement } from "@dso-toolkit/core/dist/components/dso-legend-item.js";
 import { DsoLegend as DsoLegendElement } from "@dso-toolkit/core/dist/components/dso-legend.js";
 import { DsoListButton as DsoListButtonElement } from "@dso-toolkit/core/dist/components/dso-list-button.js";
@@ -120,8 +121,8 @@ export type DsoAttachmentsCounterEvents = NonNullable<unknown>;
 export declare const DsoAttachmentsCounter: StencilReactComponent<DsoAttachmentsCounterElement, DsoAttachmentsCounterEvents>;
 export type DsoAutosuggestEvents = {
     onDsoSelect: EventName<DsoAutosuggestCustomEvent<Suggestion>>;
-    onDsoChange: EventName<CustomEvent<string>>;
-    onDsoSearch: EventName<CustomEvent<string>>;
+    onDsoChange: EventName<DsoAutosuggestCustomEvent<string>>;
+    onDsoSearch: EventName<DsoAutosuggestCustomEvent<string>>;
 };
 export declare const DsoAutosuggest: StencilReactComponent<DsoAutosuggestElement, DsoAutosuggestEvents>;
 export type DsoBadgeEvents = NonNullable<unknown>;
@@ -207,10 +208,15 @@ export type DsoLegendEvents = {
     onDsoClose: EventName<DsoLegendCustomEvent<LegendCloseEvent>>;
 };
 export declare const DsoLegend: StencilReactComponent<DsoLegendElement, DsoLegendEvents>;
+export type DsoLegendGroupEvents = {
+    onDsoLegendGroupModeChange: EventName<DsoLegendGroupCustomEvent<LegendGroupModeChangeEvent>>;
+};
+export declare const DsoLegendGroup: StencilReactComponent<DsoLegendGroupElement, DsoLegendGroupEvents>;
 export type DsoLegendItemEvents = {
     onDsoActiveChange: EventName<DsoLegendItemCustomEvent<LegendItemActiveChangeEvent>>;
-    onDsoMouseEnter: EventName<CustomEvent<any>>;
-    onDsoMouseLeave: EventName<CustomEvent<any>>;
+    onDsoDelete: EventName<DsoLegendItemCustomEvent<LegendItemDeleteEvent>>;
+    onDsoMouseEnter: EventName<DsoLegendItemCustomEvent<any>>;
+    onDsoMouseLeave: EventName<DsoLegendItemCustomEvent<any>>;
 };
 export declare const DsoLegendItem: StencilReactComponent<DsoLegendItemElement, DsoLegendItemEvents>;
 export type DsoListButtonEvents = {
@@ -239,8 +245,8 @@ export type DsoMapLayerEvents = {
 export declare const DsoMapLayer: StencilReactComponent<DsoMapLayerElement, DsoMapLayerEvents>;
 export type DsoMapLayerObjectEvents = {
     onDsoActiveChange: EventName<DsoMapLayerObjectCustomEvent<MapLayerObjectActiveChangeEvent>>;
-    onDsoMouseEnter: EventName<CustomEvent<any>>;
-    onDsoMouseLeave: EventName<CustomEvent<any>>;
+    onDsoMouseEnter: EventName<DsoMapLayerObjectCustomEvent<any>>;
+    onDsoMouseLeave: EventName<DsoMapLayerObjectCustomEvent<any>>;
 };
 export declare const DsoMapLayerObject: StencilReactComponent<DsoMapLayerObjectElement, DsoMapLayerObjectEvents>;
 export type DsoMapOverlaysEvents = {

package/dist/types/templates.d.ts

@@ -20,7 +20,7 @@ export interface Components {
     icon: Icon;
     imageOverlay: ImageOverlay;
     info: Info<JSX.Element>;
-    infoButton: InfoButton;
+    infoButton: InfoButton<JSX.Element>;
     label: Label;
     listButton: ListButton;
     modal: Modal<JSX.Element>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dso-toolkit/react",
   "type": "module",
-  "version": "87.0.0",
+  "version": "88.1.0-ghi-3495.0",
   "description": "React specific wrapper for @dso-toolkit/core web components",
   "homepage": "https://www.dso-toolkit.nl/",
   "repository": {
@@ -18,34 +18,34 @@
     "dist/"
   ],
   "dependencies": {
-    "@stencil/react-output-target": "^1.2.0"
+    "@stencil/react-output-target": "^1.4.1"
   },
   "devDependencies": {
-    "@iframe-resizer/child": "^5.5.7",
-    "@stencil/core": "4.39.0",
-    "@storybook/addon-a11y": "10.1.9",
-    "@storybook/addon-docs": "10.1.9",
-    "@storybook/builder-vite": "10.1.9",
-    "@storybook/react-vite": "10.1.9",
+    "@iframe-resizer/child": "^5.5.9",
+    "@stencil/core": "4.43.0",
+    "@storybook/addon-a11y": "10.2.10",
+    "@storybook/addon-docs": "10.2.10",
+    "@storybook/builder-vite": "10.2.10",
+    "@storybook/react-vite": "10.2.10",
     "@types/lodash.startcase": "^4.4.9",
-    "@types/react": "^19.2.7",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "dso-toolkit": "^87.0.0",
+    "dso-toolkit": "^88.1.0-ghi-3495.0",
     "eslint": "^9.39.2",
-    "eslint-plugin-storybook": "10.1.9",
+    "eslint-plugin-storybook": "10.2.8",
     "http-proxy-middleware": "^3.0.5",
     "lodash.startcase": "^4.4.0",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
-    "rimraf": "^6.1.2",
-    "storybook": "10.1.9",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "rimraf": "^6.1.3",
+    "storybook": "10.2.10",
     "tslib": "^2.8.1",
     "typescript": "~5.9.3",
-    "vite": "^7.3.0",
-    "wait-on": "^9.0.3"
+    "vite": "^7.3.1",
+    "wait-on": "^9.0.4"
   },
   "peerDependencies": {
-    "@dso-toolkit/core": "87.0.0",
+    "@dso-toolkit/core": "88.1.0-ghi-3495.0",
     "react": "^18.3.0 || ^19.0.0",
     "react-dom": "^18.3.0 || ^19.0.0"
   },