@dso-toolkit/react 91.1.0 → 92.0.0

package/dist/components/banner/banner.content.js

@@ -41,14 +41,16 @@ export const richWarningRichContent = (templates) => (React.createElement(React.
                 React.createElement("code", null, "<p>"),
                 "-tag om paragrafen"))),
     closeButton(templates)));
-export const richInfoRichContent = ({ toggletipTemplate }) => (React.createElement("div", { className: "dso-rich-content" },
+export const richInfoRichContent = ({ infoButtonTemplate }) => (React.createElement("div", { className: "dso-rich-content" },
     React.createElement("p", null,
         "Deze variant van de ",
         React.createElement("strong", null, "banner"),
         " is wat minder opvallend.",
-        toggletipTemplate({
-            position: "right",
-            children: React.createElement("p", null, "Een toggletip bij de banner"),
+        infoButtonTemplate({
+            label: "Toelichting",
+            toggletipPlacement: "right",
+            children: (React.createElement("div", { className: "dso-rich-content" },
+                React.createElement("p", null, "Een Info Button met toggletip in de banner"))),
         })),
     React.createElement("p", null, "Maar kan ook rich content bevatten, bijvoorbeeld een extra paragraaf om meer uit te kunnen leggen")));
 export const successRichContent = (templates) => (React.createElement(React.Fragment, null,

package/dist/components/card/card.content.js

@@ -1,2 +1,8 @@
-import * as React from "react";
+import React from "react";
 export const content = React.createElement("p", null, "Gemeente Nieuwegein informeert haar burgers graag over de Omgevingswet.");
+export const infoButton = {
+    label: 'Toon informatie over het "Omgevingsplan Nieuwegein"',
+    children: (React.createElement("div", { className: "dso-rich-content" },
+        React.createElement("p", null, "Extra informatie over het \"Omgevingsplan Nieuwegein\""))),
+    toggletipPlacement: "left",
+};

package/dist/components/card/card.react-template.js

@@ -1,10 +1,10 @@
-import { isButtonInterface, isLabelInterface, isSlideToggleInterface, isToggletipInterface, } from "dso-toolkit";
+import { isButtonInterface, isInfoButtonInterface, isLabelInterface, isSlideToggleInterface, } from "dso-toolkit";
 import React from "react";
 import { DsoCard } from "../../components";
 export const reactCard = {
     component: "card",
     implementation: "react",
-    template: ({ iconTemplate, labelTemplate, toggletipTemplate, selectableTemplate, slideToggleTemplate }) => function cardTemplate({ label, selectable, content, interactions, href, active, mode, dsoCardClick }) {
+    template: ({ iconTemplate, labelTemplate, infoButtonTemplate, selectableTemplate, slideToggleTemplate }) => function cardTemplate({ label, selectable, content, interactions, href, active, mode, dsoCardClick }) {
         return (React.createElement(DsoCard, { href: href, mode: mode, active: active, onDsoCardClick: (e) => {
                 if (!e.detail.isModifiedEvent) {
                     e.detail.originalEvent.preventDefault();
@@ -23,7 +23,7 @@ export const reactCard = {
                         interaction.screenreaderSuffix ? (React.createElement("span", { className: "sr-only" }, interaction.screenreaderSuffix)) : undefined),
                     interaction.icon && interaction.iconMode && iconTemplate(interaction.icon))),
                 isLabelInterface(interaction) && labelTemplate(interaction),
-                isToggletipInterface(interaction) && toggletipTemplate(interaction),
+                isInfoButtonInterface(interaction) && infoButtonTemplate(interaction),
                 isSlideToggleInterface(interaction) && slideToggleTemplate(interaction)))))),
             content && (React.createElement("div", { slot: "content", className: "dso-rich-content" }, content))));
     },

package/dist/components/card/card.stories.js

@@ -1,20 +1,21 @@
 import readme from "@dso-toolkit/react/src/components/card/readme.md?raw";
 import { cardMeta, cardStories } from "dso-toolkit";
 import { templateContainer } from "../../templates";
-import { content } from "./card.content";
+import { content, infoButton } from "./card.content";
 const meta = {
     ...cardMeta({ readme }),
     title: "Card",
 };
 export default meta;
-const { Default, WithButton, WithSlideToggle, WithToggletip, WithLabel, WithSelectableAndButton } = cardStories({
+const { Default, WithButton, WithSlideToggle, WithInfoButtonWithToggletip, WithLabel, WithSelectableAndButton } = cardStories({
     templateContainer,
     storyTemplates: (templates) => {
         const { cardTemplate } = templates;
         return {
             cardTemplate,
             content,
+            infoButton,
         };
     },
 });
-export { Default, WithButton, WithLabel, WithSelectableAndButton, WithSlideToggle, WithToggletip };
+export { Default, WithButton, WithInfoButtonWithToggletip, WithLabel, WithSelectableAndButton, WithSlideToggle };

package/dist/components.js

@@ -67,7 +67,6 @@ import { DsoTab as DsoTabElement, defineCustomElement as defineDsoTab } from "@d
 import { DsoTable as DsoTableElement, defineCustomElement as defineDsoTable } from "@dso-toolkit/core/dist/components/dso-table.js";
 import { DsoTabs as DsoTabsElement, defineCustomElement as defineDsoTabs } from "@dso-toolkit/core/dist/components/dso-tabs.js";
 import { DsoTijdreisBanner as DsoTijdreisBannerElement, defineCustomElement as defineDsoTijdreisBanner } from "@dso-toolkit/core/dist/components/dso-tijdreis-banner.js";
-import { DsoToggletip as DsoToggletipElement, defineCustomElement as defineDsoToggletip } from "@dso-toolkit/core/dist/components/dso-toggletip.js";
 import { DsoTooltip as DsoTooltipElement, defineCustomElement as defineDsoTooltip } from "@dso-toolkit/core/dist/components/dso-tooltip.js";
 import { DsoTreeView as DsoTreeViewElement, defineCustomElement as defineDsoTreeView } from "@dso-toolkit/core/dist/components/dso-tree-view.js";
 import { DsoViewerGrid as DsoViewerGridElement, defineCustomElement as defineDsoViewerGrid } from "@dso-toolkit/core/dist/components/dso-viewer-grid.js";
@@ -679,14 +678,6 @@ export const DsoTijdreisBanner = /*@__PURE__*/ createComponent({
     events: {},
     defineCustomElement: defineDsoTijdreisBanner
 });
-export const DsoToggletip = /*@__PURE__*/ createComponent({
-    tagName: 'dso-toggletip',
-    elementClass: DsoToggletipElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineDsoToggletip
-});
 export const DsoTooltip = /*@__PURE__*/ createComponent({
     tagName: 'dso-tooltip',
     elementClass: DsoTooltipElement,

package/dist/templates.js

@@ -30,7 +30,6 @@ import { reactSelectable } from "./components/selectable/selectable.react-templa
 import { reactSlideToggle } from "./components/slide-toggle/slide-toggle.react-template";
 import { reactTable } from "./components/table/table.react-template";
 import { reactTabs } from "./components/tabs/tabs.react-template";
-import { reactToggletip } from "./components/toggletip/toggletip.react-template";
 import { reactTooltip } from "./components/tooltip/tooltip.react-template";
 import { reactTreeView } from "./components/tree-view/tree-view.react-template";
 export const templateContainer = new TemplateContainer();
@@ -65,6 +64,5 @@ templateContainer.add(reactSelectable);
 templateContainer.add(reactSlideToggle);
 templateContainer.add(reactTable);
 templateContainer.add(reactTabs);
-templateContainer.add(reactToggletip);
 templateContainer.add(reactTooltip);
 templateContainer.add(reactTreeView);

package/dist/types/components/banner/banner.content.d.ts

@@ -6,5 +6,5 @@ export declare const errorRichContent: (templates: Templates) => React.JSX.Eleme
 export declare const infoRichContent: (templates: Templates) => React.JSX.Element;
 export declare const infoCompactNonRemovableRichContent: React.JSX.Element;
 export declare const richWarningRichContent: (templates: Templates) => React.JSX.Element;
-export declare const richInfoRichContent: ({ toggletipTemplate }: Templates) => React.JSX.Element;
+export declare const richInfoRichContent: ({ infoButtonTemplate }: Templates) => React.JSX.Element;
 export declare const successRichContent: (templates: Templates) => React.JSX.Element;

package/dist/types/components/card/card.content.d.ts

@@ -1,2 +1,4 @@
-import * as React from "react";
+import { InfoButton } from "dso-toolkit";
+import React from "react";
 export declare const content: React.JSX.Element;
+export declare const infoButton: InfoButton<React.JSX.Element>;

package/dist/types/components/card/card.stories.d.ts

@@ -26,7 +26,7 @@ declare const Default: import("storybook/internal/csf").BaseAnnotations<import("
     story?: Omit<import("storybook/internal/csf").StoryAnnotations<import("storybook/internal/csf").Renderer, CardArgs, Partial<CardArgs>>, "story"> | undefined;
 } & {
     args?: Partial<CardArgs> | undefined;
-}, WithToggletip: import("storybook/internal/csf").BaseAnnotations<import("storybook/internal/csf").Renderer, CardArgs> & {
+}, WithInfoButtonWithToggletip: import("storybook/internal/csf").BaseAnnotations<import("storybook/internal/csf").Renderer, CardArgs> & {
     name?: import("storybook/internal/csf").StoryName;
     storyName?: import("storybook/internal/csf").StoryName;
     play?: import("storybook/internal/csf").PlayFunction<import("storybook/internal/csf").Renderer, CardArgs> | undefined;
@@ -51,4 +51,4 @@ declare const Default: import("storybook/internal/csf").BaseAnnotations<import("
 } & {
     args?: Partial<CardArgs> | undefined;
 };
-export { Default, WithButton, WithLabel, WithSelectableAndButton, WithSlideToggle, WithToggletip };
+export { Default, WithButton, WithInfoButtonWithToggletip, WithLabel, WithSelectableAndButton, WithSlideToggle };

package/dist/types/components.d.ts

@@ -71,7 +71,6 @@ import { DsoTab as DsoTabElement } from "@dso-toolkit/core/dist/components/dso-t
 import { DsoTable as DsoTableElement } from "@dso-toolkit/core/dist/components/dso-table.js";
 import { DsoTabs as DsoTabsElement } from "@dso-toolkit/core/dist/components/dso-tabs.js";
 import { DsoTijdreisBanner as DsoTijdreisBannerElement } from "@dso-toolkit/core/dist/components/dso-tijdreis-banner.js";
-import { DsoToggletip as DsoToggletipElement } from "@dso-toolkit/core/dist/components/dso-toggletip.js";
 import { DsoTooltip as DsoTooltipElement } from "@dso-toolkit/core/dist/components/dso-tooltip.js";
 import { DsoTreeView as DsoTreeViewElement } from "@dso-toolkit/core/dist/components/dso-tree-view.js";
 import { DsoViewerGrid as DsoViewerGridElement } from "@dso-toolkit/core/dist/components/dso-viewer-grid.js";
@@ -91,7 +90,7 @@ export declare const DsoActionList: StencilReactComponent<DsoActionListElement,
 export type DsoActionListItemEvents = NonNullable<unknown>;
 export declare const DsoActionListItem: StencilReactComponent<DsoActionListItemElement, DsoActionListItemEvents>;
 export type DsoAdvancedSelectEvents = {
-    onDsoChange: EventName<DsoAdvancedSelectCustomEvent<AdvancedSelectChangeEvent<never>>>;
+    onDsoChange: EventName<DsoAdvancedSelectCustomEvent<AdvancedSelectChangeEvent<unknown>>>;
     onDsoRedirect: EventName<DsoAdvancedSelectCustomEvent<AdvancedSelectRedirectEvent>>;
 };
 export declare const DsoAdvancedSelect: StencilReactComponent<DsoAdvancedSelectElement, DsoAdvancedSelectEvents>;
@@ -338,8 +337,6 @@ export type DsoTabsEvents = NonNullable<unknown>;
 export declare const DsoTabs: StencilReactComponent<DsoTabsElement, DsoTabsEvents>;
 export type DsoTijdreisBannerEvents = NonNullable<unknown>;
 export declare const DsoTijdreisBanner: StencilReactComponent<DsoTijdreisBannerElement, DsoTijdreisBannerEvents>;
-export type DsoToggletipEvents = NonNullable<unknown>;
-export declare const DsoToggletip: StencilReactComponent<DsoToggletipElement, DsoToggletipEvents>;
 export type DsoTooltipEvents = NonNullable<unknown>;
 export declare const DsoTooltip: StencilReactComponent<DsoTooltipElement, DsoTooltipEvents>;
 export type DsoTreeViewEvents = {

package/dist/types/templates.d.ts

@@ -1,4 +1,4 @@
-import { Accordion, ActionList, Alert, AttachmentsCounter, Autosuggest, Badge, Banner, BaseComponentImplementation, Card, CardContainer, ComponentsToTemplates, ContactInformation, DatePicker, DropdownMenu, Expandable, Header, Heading, HighlightBox, Icon, ImageOverlay, Info, InfoButton, Label, ListButton, Modal, OzonContent, Pagination, ProgressIndicator, ResponsiveElement, Scrollable, Selectable, SlideToggle, Table, Tabs, TemplateContainer, Toggletip, Tooltip, TreeView } from "dso-toolkit";
+import { Accordion, ActionList, Alert, AttachmentsCounter, Autosuggest, Badge, Banner, BaseComponentImplementation, Card, CardContainer, ComponentsToTemplates, ContactInformation, DatePicker, DropdownMenu, Expandable, Header, Heading, HighlightBox, Icon, ImageOverlay, Info, InfoButton, Label, ListButton, Modal, OzonContent, Pagination, ProgressIndicator, ResponsiveElement, Scrollable, Selectable, SlideToggle, Table, Tabs, TemplateContainer, Tooltip, TreeView } from "dso-toolkit";
 import { JSX } from "react";
 export interface Components {
     accordion: Accordion<JSX.Element>;
@@ -33,7 +33,6 @@ export interface Components {
     slideToggle: SlideToggle;
     table: Table<JSX.Element>;
     tabs: Tabs<JSX.Element>;
-    toggletip: Toggletip<JSX.Element>;
     tooltip: Tooltip;
     treeView: TreeView;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dso-toolkit/react",
   "type": "module",
-  "version": "91.1.0",
+  "version": "92.0.0",
   "description": "React specific wrapper for @dso-toolkit/core web components",
   "homepage": "https://www.dso-toolkit.nl/",
   "repository": {
@@ -30,7 +30,7 @@
     "@types/lodash.startcase": "^4.4.9",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "dso-toolkit": "^91.1.0",
+    "dso-toolkit": "^92.0.0",
     "eslint": "^9.39.4",
     "eslint-plugin-storybook": "10.3.3",
     "http-proxy-middleware": "^3.0.5",
@@ -45,7 +45,7 @@
     "wait-on": "^9.0.4"
   },
   "peerDependencies": {
-    "@dso-toolkit/core": "91.1.0",
+    "@dso-toolkit/core": "92.0.0",
     "react": "^18.3.0 || ^19.0.0",
     "react-dom": "^18.3.0 || ^19.0.0"
   },

package/dist/components/toggletip/toggletip.content.js

@@ -1,7 +0,0 @@
-import * as React from "react";
-export const children = (React.createElement("div", { className: "dso-rich-content" },
-    React.createElement("h2", null, "Introductie DSO"),
-    React.createElement("p", null,
-        "Het ",
-        React.createElement("a", { href: "https://iplo.nl/digitaal-stelsel/" }, "Digitaal Stelsel Omgevingswet (DSO)"),
-        " ondersteunt de uitvoering van de Omgevingswet. Het bestaat uit lokale systemen van overheden en de onderdelen van de landelijke voorziening (DSO-LV), zoals het Omgevingsloket.")));

package/dist/components/toggletip/toggletip.react-template.js

@@ -1,9 +0,0 @@
-import React from "react";
-import { DsoToggletip } from "../../components";
-export const reactToggletip = {
-    component: "toggletip",
-    implementation: "react",
-    template: () => function toggletipTemplate({ children, label, position, small }) {
-        return (React.createElement(DsoToggletip, { label: label, position: position, small: small }, children));
-    },
-};

package/dist/components/toggletip/toggletip.stories.js

@@ -1,20 +0,0 @@
-import { toggletipMeta, toggletipStories } from "dso-toolkit";
-import { templateContainer } from "../../templates";
-import readme from "./readme.md?raw";
-import { children } from "./toggletip.content";
-const meta = {
-    ...toggletipMeta({ readme }),
-    title: "Toggletip (Deprecated)",
-};
-export default meta;
-const { Toggletip } = toggletipStories({
-    templateContainer,
-    storyTemplates: (templates) => {
-        const { toggletipTemplate } = templates;
-        return {
-            toggletipTemplate,
-            children,
-        };
-    },
-});
-export { Toggletip };

package/dist/types/components/toggletip/toggletip.content.d.ts

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

package/dist/types/components/toggletip/toggletip.react-template.d.ts

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

package/dist/types/components/toggletip/toggletip.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta } from "@storybook/react-vite";
-import { ToggletipArgs } from "dso-toolkit";
-declare const meta: Meta<ToggletipArgs>;
-export default meta;
-declare const Toggletip: import("dso-toolkit/dist/template-container").StoryObj<ToggletipArgs, import("storybook/internal/csf").Renderer>;
-export { Toggletip };