@dso-toolkit/react 89.0.0 → 90.0.0

package/dist/components/accordion/accordion.content.js

@@ -105,12 +105,12 @@ export function nestedSections({ accordionTemplate }) {
 export const addonsSections = [
     {
         ...section1,
-        icon: "user-line",
+        icon: "user-outline",
     },
     {
         ...section1,
         status: "error",
-        icon: "user-line",
+        icon: "user-outline",
         open: true,
     },
     {
@@ -135,16 +135,16 @@ export const addonsSections = [
 export const alignmentSections = [
     {
         ...section1,
-        icon: "user-line",
+        icon: "user-outline",
         open: true,
     },
     {
         ...section2,
-        icon: "user-line",
+        icon: "user-outline",
     },
     {
         ...section3,
-        icon: "user-line",
+        icon: "user-outline",
     },
 ];
 export const renvooiSections = [

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

@@ -2,7 +2,7 @@ import * as React from "react";
 const closeButton = ({ iconTemplate }) => {
     return (React.createElement("button", { type: "button", className: "dso-tertiary", onClick: () => null },
         React.createElement("span", { className: "sr-only" }, "Sluiten"),
-        iconTemplate({ icon: "times" })));
+        iconTemplate({ icon: "cross" })));
 };
 export const warningRichContent = (templates) => (React.createElement(React.Fragment, null,
     React.createElement("div", { className: "dso-rich-content" },

package/dist/components/icon/icon-overview.decorator.js

@@ -6,7 +6,7 @@ export const decorator = (story, icons) => {
             if (!React.isValidElement(s)) {
                 throw new Error("Expected a valid JSX element");
             }
-            return (React.createElement("li", null,
+            return (React.createElement("li", { key: icon },
                 s,
                 React.createElement("br", null),
                 React.createElement("code", null, icon)));

package/dist/components/icon/icon.stories.js

@@ -1,8 +1,8 @@
 import { iconMeta, iconStories } from "dso-toolkit";
+import icons from "dso-toolkit/storybook-assets/icons.json";
 import { templateContainer } from "../../templates";
 import { decorator } from "./icon-overview.decorator";
 import readme from "./readme.md?raw";
-const icons = import.meta.env?.VITE_ICONS?.split(",") || [];
 const meta = {
     ...iconMeta({ readme }),
     title: "Icon",

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

@@ -21,7 +21,7 @@ export const reactTable = {
                     React.createElement("tr", null, content.head.map((col, cellIndex) => "sortable" in col ? (React.createElement("th", { scope: "col", key: cellIndex, "aria-sort": col.sorting },
                         React.createElement("button", { type: "button", "aria-roledescription": getAriaRoledescription(col.sorting), className: clsx("dso-tertiary dso-sort", { "dso-sort-active": !!col.sorting }) },
                             React.createElement("span", null, col.label),
-                            React.createElement(DsoIcon, { icon: col.sorting ? "sort-" + col.sorting : "sort" })))) : (React.createElement("th", { scope: "col", key: cellIndex }, col.label))))),
+                            React.createElement(DsoIcon, { icon: col.sorting === "ascending" ? "sort-ascending" : "sort-descending" })))) : (React.createElement("th", { scope: "col", key: cellIndex }, col.label))))),
                 React.createElement("tbody", null, content.rows.map((row, index) => (React.createElement("tr", { key: index }, row.map((col, cellIndex) => index === 0 ? (typeof col === "string" ? (React.createElement("th", { key: cellIndex, scope: "row", dangerouslySetInnerHTML: { __html: col } })) : (React.createElement("th", { key: cellIndex, scope: "row" }, col))) : typeof col === "string" ? (React.createElement("td", { key: cellIndex, dangerouslySetInnerHTML: { __html: col } })) : (React.createElement("td", { key: cellIndex }, col))))))))));
     },
 };

package/dist/components.js

@@ -57,6 +57,7 @@ import { DsoProjectItem as DsoProjectItemElement, defineCustomElement as defineD
 import { DsoRenvooi as DsoRenvooiElement, defineCustomElement as defineDsoRenvooi } from "@dso-toolkit/core/dist/components/dso-renvooi.js";
 import { DsoResponsiveElement as DsoResponsiveElementElement, defineCustomElement as defineDsoResponsiveElement } from "@dso-toolkit/core/dist/components/dso-responsive-element.js";
 import { DsoScrollable as DsoScrollableElement, defineCustomElement as defineDsoScrollable } from "@dso-toolkit/core/dist/components/dso-scrollable.js";
+import { DsoSegmentedButton as DsoSegmentedButtonElement, defineCustomElement as defineDsoSegmentedButton } from "@dso-toolkit/core/dist/components/dso-segmented-button.js";
 import { DsoSelectable as DsoSelectableElement, defineCustomElement as defineDsoSelectable } from "@dso-toolkit/core/dist/components/dso-selectable.js";
 import { DsoSkiplink as DsoSkiplinkElement, defineCustomElement as defineDsoSkiplink } from "@dso-toolkit/core/dist/components/dso-skiplink.js";
 import { DsoSlideToggle as DsoSlideToggleElement, defineCustomElement as defineDsoSlideToggle } from "@dso-toolkit/core/dist/components/dso-slide-toggle.js";
@@ -594,6 +595,14 @@ export const DsoScrollable = /*@__PURE__*/ createComponent({
     events: { onDsoScrollEnd: 'dsoScrollEnd' },
     defineCustomElement: defineDsoScrollable
 });
+export const DsoSegmentedButton = /*@__PURE__*/ createComponent({
+    tagName: 'dso-segmented-button',
+    elementClass: DsoSegmentedButtonElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onDsoChange: 'dsoChange' },
+    defineCustomElement: defineDsoSegmentedButton
+});
 export const DsoSelectable = /*@__PURE__*/ createComponent({
     tagName: 'dso-selectable',
     elementClass: DsoSelectableElement,

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 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 { 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 DsoSegmentedButtonCustomEvent, 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 SegmentedButtonChangeEvent, 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";
@@ -61,6 +61,7 @@ import { DsoProjectItem as DsoProjectItemElement } from "@dso-toolkit/core/dist/
 import { DsoRenvooi as DsoRenvooiElement } from "@dso-toolkit/core/dist/components/dso-renvooi.js";
 import { DsoResponsiveElement as DsoResponsiveElementElement } from "@dso-toolkit/core/dist/components/dso-responsive-element.js";
 import { DsoScrollable as DsoScrollableElement } from "@dso-toolkit/core/dist/components/dso-scrollable.js";
+import { DsoSegmentedButton as DsoSegmentedButtonElement } from "@dso-toolkit/core/dist/components/dso-segmented-button.js";
 import { DsoSelectable as DsoSelectableElement } from "@dso-toolkit/core/dist/components/dso-selectable.js";
 import { DsoSkiplink as DsoSkiplinkElement } from "@dso-toolkit/core/dist/components/dso-skiplink.js";
 import { DsoSlideToggle as DsoSlideToggleElement } from "@dso-toolkit/core/dist/components/dso-slide-toggle.js";
@@ -303,6 +304,10 @@ export type DsoScrollableEvents = {
     onDsoScrollEnd: EventName<DsoScrollableCustomEvent<DsoScrollEndEvent>>;
 };
 export declare const DsoScrollable: StencilReactComponent<DsoScrollableElement, DsoScrollableEvents>;
+export type DsoSegmentedButtonEvents = {
+    onDsoChange: EventName<DsoSegmentedButtonCustomEvent<SegmentedButtonChangeEvent>>;
+};
+export declare const DsoSegmentedButton: StencilReactComponent<DsoSegmentedButtonElement, DsoSegmentedButtonEvents>;
 export type DsoSelectableEvents = {
     onDsoChange: EventName<DsoSelectableCustomEvent<SelectableChangeEvent>>;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dso-toolkit/react",
   "type": "module",
-  "version": "89.0.0",
+  "version": "90.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": "^89.0.0",
+    "dso-toolkit": "^90.0.0",
     "eslint": "^9.39.2",
     "eslint-plugin-storybook": "10.2.8",
     "http-proxy-middleware": "^3.0.5",
@@ -45,7 +45,7 @@
     "wait-on": "^9.0.4"
   },
   "peerDependencies": {
-    "@dso-toolkit/core": "89.0.0",
+    "@dso-toolkit/core": "90.0.0",
     "react": "^18.3.0 || ^19.0.0",
     "react-dom": "^18.3.0 || ^19.0.0"
   },