@developer-overheid-nl/don-register-components 1.3.0 → 1.3.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @developer-overheid-nl/don-register-components
 
+## 1.3.1
+
+### Patch Changes
+
+- d8a39db: Bugfixes pagination parsers en facetfilters, description toegevoegd aan single-select.
+- e5f0a52: Keep the publiccode filter state explicit in the OSS register.
+  Toggle filters now preserve both `true` and `false` values in the query string, and selected filter badges correctly toggle the publiccode filter instead of removing it.
+- 0f983ad: Upgraded Astro to 6.4.2
+- Updated dependencies [de238a8]
+- Updated dependencies [0f983ad]
+  - @developer-overheid-nl/don-register-locales@1.2.1
+
 ## 1.3.0
 
 ### Minor Changes

package/package.json

@@ -5,7 +5,7 @@
   "license": "EUPL-1.2",
   "private": false,
   "type": "module",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "keywords": [],
   "publishConfig": {
     "access": "public"
@@ -29,19 +29,17 @@
     "@rijkshuisstijl-community/design-tokens": "11.0.0",
     "@types/parse-link-header": "^2.0.3",
     "clsx": "2.1.1",
-    "i18next": "25.8.4",
+    "i18next": "26.3.1",
     "parse-link-header": "^2.0.0",
-    "react-i18next": "16.5.4",
+    "react-i18next": "17.0.8",
     "react-markdown": "10.1.0",
     "remark-behead": "^3.1.0",
-    "@developer-overheid-nl/don-register-locales": "1.2.0"
+    "@developer-overheid-nl/don-register-locales": "1.2.1"
   },
   "devDependencies": {
-    "@vitejs/plugin-react": "^5.1.2",
     "rimraf": "^6.1.2",
     "typescript": "5.9.3",
-    "vite": "7.1.7",
-    "vite-plugin-dts": "^4.5.4"
+    "vite": "7.1.7"
   },
   "peerDependencies": {
     "@types/react": ">=19.2 <19.3",

package/src/cardsList/CardsList.tsx

@@ -23,6 +23,7 @@ const CardsList = (props: PropsWithChildren<CardsListProps>) => {
     <ol className={clsx(styles.cardsList, className)} id={id}>
       {items && items.length > 0
         ? items.map((item, index, array) => (
+            // biome-ignore-start lint/suspicious/noArrayIndexKey: no stable ID's https://legacy.reactjs.org/docs/lists-and-keys.html#keys
             <CardsListItem
               key={`${id || "don-cards"}_${index}`}
               index={index}
@@ -30,6 +31,7 @@ const CardsList = (props: PropsWithChildren<CardsListProps>) => {
             >
               {item as unknown as ReactNode}
             </CardsListItem>
+            // biome-ignore-end lint/suspicious/noArrayIndexKey: no stable ID's https://legacy.reactjs.org/docs/lists-and-keys.html#keys
           ))
         : children}
     </ol>

package/src/cardsList/styles.module.css

@@ -9,9 +9,9 @@
 }
 
 :global(
-    .rhc-card-as-link:hover
-    .rhc-card-as-link__heading.rhc-card-as-link__heading
-  ) {
+  .rhc-card-as-link:hover
+  .rhc-card-as-link__heading.rhc-card-as-link__heading
+) {
   /* TODO: specifity */
   :global(.nl-heading) {
     text-decoration: underline;

package/src/dataBadgeLink/styles.module.css

@@ -1,4 +1,30 @@
 .donDataBadge.donDataBadge {
+  .badgeLink {
+    display: inline-block;
+    padding-block: 0.25rem;
+    color: inherit;
+    text-decoration: inherit;
+
+    &:focus-visible {
+      outline: none;
+    }
+
+    /* fix for non-clickable icons bug */
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: block;
+      width: 100%;
+      height: 100%;
+      content: '';
+      border-radius: var(
+        --utrecht-data-badge-border-radius,
+        var(--utrecht-badge-border-radius, 0.5ch)
+      );
+    }
+  }
+
   &.primary {
     --_utrecht-data-badge-color: oklch(
       from var(--utrecht-data-badge-color) calc(l - 0.1) c h
@@ -41,6 +67,10 @@
     color: var(--_utrecht-data-badge-color);
     background-color: var(--_utrecht-data-badge-background-color);
 
+    .badgeLink {
+      text-decoration: underline;
+    }
+
     &:hover {
       background-color: var(--rhc-color-cool-grey-100);
 
@@ -48,10 +78,6 @@
         text-decoration: none;
       }
     }
-
-    .badgeLink {
-      text-decoration: underline;
-    }
   }
 
   &:focus-within {
@@ -61,29 +87,3 @@
     outline-offset: var(--utrecht-focus-outline-offset, revert);
   }
 }
-
-.badgeLink {
-  display: inline-block;
-  padding-block: 0.25rem;
-  color: inherit;
-  text-decoration: inherit;
-
-  &:focus-visible {
-    outline: none;
-  }
-
-  /* fix for non-clickable icons bug */
-  &::before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: block;
-    width: 100%;
-    height: 100%;
-    content: '';
-    border-radius: var(
-      --utrecht-data-badge-border-radius,
-      var(--utrecht-badge-border-radius, 0.5ch)
-    );
-  }
-}

package/src/facetFilters/FacetFilters.tsx

@@ -74,6 +74,8 @@ type SelectedFiltersMap = Map<
   Array<string | [string, string]>
 >;
 
+type ActiveFilters = Record<string, string | string[] | undefined>;
+
 export interface FacetFiltersProps extends HTMLProps<HTMLDivElement> {
   title?: string;
   startHeadingLevel?: HeadingProps["level"];
@@ -139,6 +141,7 @@ export const getSelectedFilters = (
 export const getSelectedFiltersMap = (
   filters: FilterData[] | null | undefined,
   withLabels = false,
+  activeFilters: ActiveFilters = {},
 ): SelectedFiltersMap => {
   return (
     filters?.reduce((acc, filter) => {
@@ -153,10 +156,22 @@ export const getSelectedFiltersMap = (
             ? acc.set([filter.key, filter.label], keys)
             : acc.set(filter.key, keys);
         }
-      } else if (filter.type === FilterType.Toggle && filter.value) {
-        withLabels
-          ? acc.set([filter.key, filter.label], [["true", filter.label]])
-          : acc.set(filter.key, ["true"]);
+      } else if (filter.type === FilterType.Toggle) {
+        const activeValue = activeFilters[filter.key];
+        const values = Array.isArray(activeValue) ? activeValue : [activeValue];
+        const isExplicitFalse = values.includes("false");
+
+        if (filter.value || isExplicitFalse) {
+          const value = filter.value ? "true" : "false";
+          const label =
+            value === "true"
+              ? filter.label
+              : filter.label.replace(/^Heeft\s+/i, "Heeft geen ");
+
+          withLabels
+            ? acc.set([filter.key, filter.label], [[value, label]])
+            : acc.set(filter.key, [value]);
+        }
       } else if (filter.type === FilterType.Date && filter.value) {
         withLabels
           ? acc.set([filter.key, filter.label], [[filter.value, filter.label]])
@@ -184,8 +199,16 @@ const updateFilters = (
   filterKey: string,
   filterValue: string,
   checked: boolean,
+  type: FilterType,
 ) => {
-  const newSelectedFilters = {
+  if (type === FilterType.Toggle) {
+    return {
+      ...selectedFilters,
+      [filterKey]: [checked ? filterValue : "false"],
+    };
+  }
+
+  return {
     ...selectedFilters,
     [filterKey]: checked
       ? [...(selectedFilters[filterKey] || []), filterValue]
@@ -193,7 +216,6 @@ const updateFilters = (
           (value) => value !== filterValue,
         ),
   };
-  return newSelectedFilters;
 };
 
 const debounce = <T extends unknown[]>(
@@ -242,12 +264,14 @@ const FacetFilters = (props: PropsWithChildren<FacetFiltersProps>) => {
   const handleChange = (
     event: ChangeEvent<HTMLInputElement>,
     type: FilterType,
+    filterKey = event.target.name,
   ) => {
     const newSelectedFilters = updateFilters(
       selectedFilters,
-      event.target.name,
+      filterKey,
       event.target.value,
       event.target.checked,
+      type,
     );
 
     if (debounceTypes.includes(type)) {
@@ -257,6 +281,19 @@ const FacetFilters = (props: PropsWithChildren<FacetFiltersProps>) => {
     }
   };
 
+  const handleToggleChange = (
+    event: ChangeEvent<HTMLInputElement>,
+    filterKey: string,
+  ) => {
+    const hiddenInput = event.target.form?.elements.namedItem(filterKey);
+
+    if (hiddenInput instanceof HTMLInputElement) {
+      hiddenInput.value = event.target.checked ? "true" : "false";
+    }
+
+    handleChange(event, FilterType.Toggle, filterKey);
+  };
+
   return (
     <div
       ref={thisRef}
@@ -287,19 +324,25 @@ const FacetFilters = (props: PropsWithChildren<FacetFiltersProps>) => {
               {facet.description}
             </Paragraph>
             {facet.type === "toggle" ? (
-              <FormFieldSwitch
-                label=""
-                labelledById={`${facet.key}-label`}
-                name={facet.key}
-                defaultChecked={facet.value}
-                value="true"
-                amount={facet.count || 0}
-                labels={{
-                  on: t("components.filter-on"),
-                  off: t("components.filter-off"),
-                }}
-                onChange={(event) => handleChange(event, facet.type)}
-              />
+              <>
+                <input
+                  type="hidden"
+                  name={facet.key}
+                  defaultValue={facet.value ? "true" : "false"}
+                />
+                <FormFieldSwitch
+                  label=""
+                  labelledById={`${facet.key}-label`}
+                  defaultChecked={facet.value}
+                  value="true"
+                  amount={facet.count || 0}
+                  labels={{
+                    on: t("components.filter-on"),
+                    off: t("components.filter-off"),
+                  }}
+                  onChange={(event) => handleToggleChange(event, facet.key)}
+                />
+              </>
             ) : null}
             {/* TODO: Date selector
           {facet.type === "date" ? <div>TODO</div> : null}
@@ -346,7 +389,16 @@ const FacetFilters = (props: PropsWithChildren<FacetFiltersProps>) => {
                     defaultChecked={option.selected}
                     amount={option.count}
                     onChange={(event) => handleChange(event, facet.type)}
-                  />
+                  >
+                    {option.description ? (
+                      <ToolTip
+                        text={option.description}
+                        aria-label={t("components.info-about", {
+                          subject: option.label,
+                        })}
+                      />
+                    ) : null}
+                  </FormFieldRadioOption>
                 ))}
               </FormFieldRadioGroup>
             ) : null}

package/src/formFieldSwitch/FormFieldSwitch.tsx

@@ -14,7 +14,7 @@ export interface FormFieldSwitchProps
       "label" | "statusId" | "errorMessageId" | "descriptionId" | "input"
     >,
     AmountLabelProps {
-  name: string;
+  name?: string;
   value: string;
   checked?: boolean;
   defaultChecked?: boolean;

package/src/header/styles.module.css

@@ -61,8 +61,8 @@
 
 .link.link:any-link:hover {
   text-decoration-line: underline;
-  /* first skip-ink needed for Chromium browsers, otherwise .nl-link `none` is used */
   text-decoration-skip-ink: auto;
+  /* biome-ignore lint/suspicious/noDuplicateProperties: ↰ first skip-ink needed for Chromium browsers, otherwise .nl-link `none` is used */
   text-decoration-skip-ink: all; /* bugged in Chromium */
 
   .icon {

package/src/pagination/styles.module.css

@@ -18,8 +18,8 @@
 }
 
 :global(
-    .utrecht-pagination__page-link.utrecht-pagination__page-link--current:hover
-  ) {
+  .utrecht-pagination__page-link.utrecht-pagination__page-link--current:hover
+) {
   color: var(--utrecht-pagination-page-link-current-color);
   background-color: var(
     --utrecht-pagination-page-link-current-background-color