@sikt/sds-filter-list 0.4.1 → 0.5.0

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
 
+## [0.5.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-filter-list@0.4.1...@sikt/sds-filter-list@0.5.0) (2025-06-25)
+
+### ⚠ BREAKING CHANGES
+
+- **filter-list:** change label to NonNullable<ReactNode>
+
+### Bug Fixes
+
+- **filter-list:** add gap between label & count ([b23be68](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/b23be682c238e4cca9fa2115d454bef589da8af9))
+- **filter-list:** change label to NonNullable<ReactNode> ([5f215fe](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/5f215feba4ce8bd2e72f9301e897f1ae92ed140e))
+- **typography:** no contextual font ligatures ([15061ac](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/15061ac6f66f978a2a37af689847f247b9b9cd81))
+
 ## [0.4.1](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-filter-list@0.4.0...@sikt/sds-filter-list@0.4.1) (2025-06-01)
 
 ### Bug Fixes

package/README.md

@@ -15,13 +15,10 @@ import {
   FilterListItem,
   FilterListSection,
 } from "@sikt/sds-filter-list";
+import "@sikt/sds-filter-list/dist/index.css";
 ```
 
-```css
-@import url("@sikt/sds-filter-list");
-```
-
-### Stylesheets & custom markup
+#### Anatomy
 
 The FilterList component is a container of elements to present a list of filter-options.
 

package/dist/index.css

@@ -54,7 +54,10 @@
 }
 .sds-filter-list-item__input {
   flex-basis: 100%;
-  font-variant: no-contextual;
+}
+.sds-filter-list-item__input-label {
+  display: flex;
+  gap: var(--sds-space-padding-tiny);
 }
 
 /* src/components/FilterListExpand/filter-list-expand.pcss */

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/FilterList/filter-list.pcss","../src/components/FilterListIconLabel/filter-list-icon-label.pcss","../src/FilterListItem/filter-list-item.pcss","../src/components/FilterListExpand/filter-list-expand.pcss","../src/FilterListCategory/filter-list-category.pcss","../src/FilterListSection/filter-list-section.pcss"],"sourcesContent":[".sds-filter-list {\n  background: var(--sds-color-layout-background-default);\n  display: flex;\n  flex-direction: column;\n  padding: var(--sds-space-padding-small);\n}\n\n  .sds-filter-list__badge {\n    justify-content: center;\n    min-width: var(--sds-base-size-m1);\n  }\n\n  .sds-filter-list .sds-form-fieldset__legend {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n  }\n",".sds-filter-list-icon-label {\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  gap: var(--sds-space-gap-tiny);\n  justify-content: flex-start;\n}\n\n  .sds-filter-list-icon-label__icon {\n    align-items: center;\n    display: flex;\n    font-size: var(--sds-typography-fontsize-700);\n    justify-content: center;\n  }\n",".sds-filter-list-item {\n  --filter-list-item-background-color: transparent;\n\n  align-items: center;\n  background: var(--filter-list-item-background-color);\n  border-radius: var(--sds-space-border-radius-small);\n  display: flex;\n  flex-direction: row;\n  gap: var(--sds-space-gap-tiny);\n  justify-content: space-between;\n  padding-right: var(--sds-space-padding-small);\n  width: 100%;\n}\n\n  .sds-filter-list-item:has(.sds-filter-list-item__input:hover) {\n    --filter-list-item-background-color: var(\n      --sds-color-interaction-neutral-transparent-highlight\n    );\n  }\n\n  .sds-filter-list-item__input {\n    flex-basis: 100%;\n    font-variant: no-contextual;\n  }\n",".sds-filter-list-expand {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  width: 100%;\n}\n\n  .sds-filter-list-expand__header {\n    --filter-list-item-background-color: transparent;\n\n    align-items: center;\n    background: var(--filter-list-item-background-color);\n    border-radius: var(--sds-space-border-radius-small);\n    display: flex;\n    flex-direction: row;\n    gap: var(--sds-space-gap-small);\n    justify-content: space-between;\n    width: 100%;\n  }\n\n  .sds-filter-list-expand__header-clickable:hover,\n      .sds-filter-list-expand__header-clickable:focus-visible {\n        background: var(--sds-color-interaction-neutral-transparent-highlight);\n        cursor: pointer;\n      }\n\n  .sds-filter-list-expand__header-clickable:focus-visible {\n        outline: var(--sds-focus-outline);\n      }\n\n  .sds-filter-list-expand__header:has(.sds-filter-list-item__input:hover) {\n      --filter-list-item-background-color: var(\n        --sds-color-interaction-neutral-transparent-highlight\n      );\n    }\n\n  .sds-filter-list-expand--icon-container {\n    align-items: center;\n    display: flex;\n    font-size: var(--sds-typography-fontsize-700);\n    justify-content: center;\n    width: var(--sds-typography-fontsize-900);\n    height: var(--sds-typography-fontsize-900);\n  }\n\n  .sds-filter-list-expand__icon {\n    transition: rotate var(--sds-effect-animation-duration-medium)\n      var(--sds-effect-animation-easing-default);\n  }\n\n  .sds-filter-list-expand__icon--expanded {\n      rotate: 180deg;\n    }\n\n  .sds-filter-list-expand__content {\n    height: 0;\n    overflow: hidden;\n    transition: all var(--sds-effect-animation-duration-medium)\n      var(--sds-effect-animation-easing-default);\n  }\n\n  .sds-filter-list-expand__content--open {\n      height: auto;\n    }\n\n  .sds-filter-list-expand__content .sds-form-fieldset__legend {\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      padding: 0;\n      margin: -1px;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n      white-space: nowrap;\n      border-width: 0;\n    }\n",".sds-filter-list-category {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--sds-space-gap-tiny);\n  width: 100%;\n}\n\n  .sds-filter-list-category__content .sds-filter-list-item {\n      padding-left: var(--sds-space-padding-small);\n    }\n",".sds-filter-list-section {\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  gap: var(--sds-space-gap-tiny);\n  justify-content: space-between;\n  padding: var(--sds-space-padding-minimal) var(--sds-space-padding-minimal)\n    var(--sds-space-padding-minimal) var(--sds-space-padding-small);\n  width: 100%;\n}\n\n  .sds-filter-list-section--expandable {\n    padding-right: 0;\n  }\n\n  .sds-filter-list-section__label {\n    font-size: var(--sds-typography-label-default-fontsize);\n    font-weight: var(--sds-typography-label-default-fontweight);\n    line-height: var(--sds-typography-label-default-lineheight);\n  }\n"],"mappings":";AAAA,CAAC;AACC,cAAY,IAAI;AAChB,WAAS;AACT,kBAAgB;AAChB,WAAS,IAAI;AACf;AAEE,CAAC;AACC,mBAAiB;AACjB,aAAW,IAAI;AACjB;AAEA,CAZD,gBAYkB,CAAC;AAChB,YAAU;AACV,SAAO;AACP,UAAQ;AACR,WAAS;AACT,UAAQ;AACR,YAAU;AACV,QAAM,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACpB,eAAa;AACb,gBAAc;AAChB;;;ACtBF,CAAC;AACC,eAAa;AACb,WAAS;AACT,kBAAgB;AAChB,OAAK,IAAI;AACT,mBAAiB;AACnB;AAEE,CAAC;AACC,eAAa;AACb,WAAS;AACT,aAAW,IAAI;AACf,mBAAiB;AACnB;;;ACbF,CAAC;AACC,uCAAqC;AAErC,eAAa;AACb,cAAY,IAAI;AAChB,iBAAe,IAAI;AACnB,WAAS;AACT,kBAAgB;AAChB,OAAK,IAAI;AACT,mBAAiB;AACjB,iBAAe,IAAI;AACnB,SAAO;AACT;AAEE,CAdD,oBAcsB,KAAK,CAAC,2BAA2B;AACpD,uCAAqC,KACnC;AAEJ;AAEA,CAN2B;AAOzB,cAAY;AACZ,gBAAc;AAChB;;;ACvBF,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,mBAAiB;AACjB,SAAO;AACT;AAEE,CAAC;AACC,uCAAqC;AAErC,eAAa;AACb,cAAY,IAAI;AAChB,iBAAe,IAAI;AACnB,WAAS;AACT,kBAAgB;AAChB,OAAK,IAAI;AACT,mBAAiB;AACjB,SAAO;AACT;AAEA,CAAC,wCAAwC;AACrC,CADH,wCAC4C;AACvC,cAAY,IAAI;AAChB,UAAQ;AACV;AAEJ,CANC,wCAMwC;AACnC,WAAS,IAAI;AACf;AAEJ,CAvBC,8BAuB8B,KAAK,CAAC,2BAA2B;AAC5D,uCAAqC,KACnC;AAEJ;AAEF,CAAC;AACC,eAAa;AACb,WAAS;AACT,aAAW,IAAI;AACf,mBAAiB;AACjB,SAAO,IAAI;AACX,UAAQ,IAAI;AACd;AAEA,CAAC;AACC,cAAY,OAAO,IAAI,wCACrB,IAAI;AACR;AAEA,CAAC;AACG,UAAQ;AACV;AAEF,CAAC;AACC,UAAQ;AACR,YAAU;AACV,cAAY,IAAI,IAAI,wCAClB,IAAI;AACR;AAEA,CAAC;AACG,UAAQ;AACV;AAEF,CAXC,gCAWgC,CAAC;AAC9B,YAAU;AACV,SAAO;AACP,UAAQ;AACR,WAAS;AACT,UAAQ;AACR,YAAU;AACV,QAAM,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACpB,eAAa;AACb,gBAAc;AAChB;;;AC3EJ,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,eAAa;AACb,mBAAiB;AACjB,OAAK,IAAI;AACT,SAAO;AACT;AAEE,CAAC,kCAAkC,CAAC;AAChC,gBAAc,IAAI;AACpB;;;ACXJ,CAAC;AACC,eAAa;AACb,WAAS;AACT,kBAAgB;AAChB,OAAK,IAAI;AACT,mBAAiB;AACjB,WAAS,IAAI,6BAA6B,IAAI,6BAC5C,IAAI,6BAA6B,IAAI;AACvC,SAAO;AACT;AAEE,CAAC;AACC,iBAAe;AACjB;AAEA,CAAC;AACC,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,eAAa,IAAI;AACnB;","names":[]}
+{"version":3,"sources":["../src/FilterList/filter-list.pcss","../src/components/FilterListIconLabel/filter-list-icon-label.pcss","../src/FilterListItem/filter-list-item.pcss","../src/components/FilterListExpand/filter-list-expand.pcss","../src/FilterListCategory/filter-list-category.pcss","../src/FilterListSection/filter-list-section.pcss"],"sourcesContent":[".sds-filter-list {\n  background: var(--sds-color-layout-background-default);\n  display: flex;\n  flex-direction: column;\n  padding: var(--sds-space-padding-small);\n}\n\n  .sds-filter-list__badge {\n    justify-content: center;\n    min-width: var(--sds-base-size-m1);\n  }\n\n  .sds-filter-list .sds-form-fieldset__legend {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n  }\n",".sds-filter-list-icon-label {\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  gap: var(--sds-space-gap-tiny);\n  justify-content: flex-start;\n}\n\n  .sds-filter-list-icon-label__icon {\n    align-items: center;\n    display: flex;\n    font-size: var(--sds-typography-fontsize-700);\n    justify-content: center;\n  }\n",".sds-filter-list-item {\n  --filter-list-item-background-color: transparent;\n\n  align-items: center;\n  background: var(--filter-list-item-background-color);\n  border-radius: var(--sds-space-border-radius-small);\n  display: flex;\n  flex-direction: row;\n  gap: var(--sds-space-gap-tiny);\n  justify-content: space-between;\n  padding-right: var(--sds-space-padding-small);\n  width: 100%;\n}\n\n  .sds-filter-list-item:has(.sds-filter-list-item__input:hover) {\n    --filter-list-item-background-color: var(\n      --sds-color-interaction-neutral-transparent-highlight\n    );\n  }\n\n  .sds-filter-list-item__input {\n    flex-basis: 100%;\n  }\n\n  .sds-filter-list-item__input-label {\n      display: flex;\n      gap: var(--sds-space-padding-tiny);\n    }\n",".sds-filter-list-expand {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  width: 100%;\n}\n\n  .sds-filter-list-expand__header {\n    --filter-list-item-background-color: transparent;\n\n    align-items: center;\n    background: var(--filter-list-item-background-color);\n    border-radius: var(--sds-space-border-radius-small);\n    display: flex;\n    flex-direction: row;\n    gap: var(--sds-space-gap-small);\n    justify-content: space-between;\n    width: 100%;\n  }\n\n  .sds-filter-list-expand__header-clickable:hover,\n      .sds-filter-list-expand__header-clickable:focus-visible {\n        background: var(--sds-color-interaction-neutral-transparent-highlight);\n        cursor: pointer;\n      }\n\n  .sds-filter-list-expand__header-clickable:focus-visible {\n        outline: var(--sds-focus-outline);\n      }\n\n  .sds-filter-list-expand__header:has(.sds-filter-list-item__input:hover) {\n      --filter-list-item-background-color: var(\n        --sds-color-interaction-neutral-transparent-highlight\n      );\n    }\n\n  .sds-filter-list-expand--icon-container {\n    align-items: center;\n    display: flex;\n    font-size: var(--sds-typography-fontsize-700);\n    justify-content: center;\n    width: var(--sds-typography-fontsize-900);\n    height: var(--sds-typography-fontsize-900);\n  }\n\n  .sds-filter-list-expand__icon {\n    transition: rotate var(--sds-effect-animation-duration-medium)\n      var(--sds-effect-animation-easing-default);\n  }\n\n  .sds-filter-list-expand__icon--expanded {\n      rotate: 180deg;\n    }\n\n  .sds-filter-list-expand__content {\n    height: 0;\n    overflow: hidden;\n    transition: all var(--sds-effect-animation-duration-medium)\n      var(--sds-effect-animation-easing-default);\n  }\n\n  .sds-filter-list-expand__content--open {\n      height: auto;\n    }\n\n  .sds-filter-list-expand__content .sds-form-fieldset__legend {\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      padding: 0;\n      margin: -1px;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n      white-space: nowrap;\n      border-width: 0;\n    }\n",".sds-filter-list-category {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--sds-space-gap-tiny);\n  width: 100%;\n}\n\n  .sds-filter-list-category__content .sds-filter-list-item {\n      padding-left: var(--sds-space-padding-small);\n    }\n",".sds-filter-list-section {\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  gap: var(--sds-space-gap-tiny);\n  justify-content: space-between;\n  padding: var(--sds-space-padding-minimal) var(--sds-space-padding-minimal)\n    var(--sds-space-padding-minimal) var(--sds-space-padding-small);\n  width: 100%;\n}\n\n  .sds-filter-list-section--expandable {\n    padding-right: 0;\n  }\n\n  .sds-filter-list-section__label {\n    font-size: var(--sds-typography-label-default-fontsize);\n    font-weight: var(--sds-typography-label-default-fontweight);\n    line-height: var(--sds-typography-label-default-lineheight);\n  }\n"],"mappings":";AAAA,CAAC;AACC,cAAY,IAAI;AAChB,WAAS;AACT,kBAAgB;AAChB,WAAS,IAAI;AACf;AAEE,CAAC;AACC,mBAAiB;AACjB,aAAW,IAAI;AACjB;AAEA,CAZD,gBAYkB,CAAC;AAChB,YAAU;AACV,SAAO;AACP,UAAQ;AACR,WAAS;AACT,UAAQ;AACR,YAAU;AACV,QAAM,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACpB,eAAa;AACb,gBAAc;AAChB;;;ACtBF,CAAC;AACC,eAAa;AACb,WAAS;AACT,kBAAgB;AAChB,OAAK,IAAI;AACT,mBAAiB;AACnB;AAEE,CAAC;AACC,eAAa;AACb,WAAS;AACT,aAAW,IAAI;AACf,mBAAiB;AACnB;;;ACbF,CAAC;AACC,uCAAqC;AAErC,eAAa;AACb,cAAY,IAAI;AAChB,iBAAe,IAAI;AACnB,WAAS;AACT,kBAAgB;AAChB,OAAK,IAAI;AACT,mBAAiB;AACjB,iBAAe,IAAI;AACnB,SAAO;AACT;AAEE,CAdD,oBAcsB,KAAK,CAAC,2BAA2B;AACpD,uCAAqC,KACnC;AAEJ;AAEA,CAN2B;AAOzB,cAAY;AACd;AAEA,CAAC;AACG,WAAS;AACT,OAAK,IAAI;AACX;;;AC3BJ,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,mBAAiB;AACjB,SAAO;AACT;AAEE,CAAC;AACC,uCAAqC;AAErC,eAAa;AACb,cAAY,IAAI;AAChB,iBAAe,IAAI;AACnB,WAAS;AACT,kBAAgB;AAChB,OAAK,IAAI;AACT,mBAAiB;AACjB,SAAO;AACT;AAEA,CAAC,wCAAwC;AACrC,CADH,wCAC4C;AACvC,cAAY,IAAI;AAChB,UAAQ;AACV;AAEJ,CANC,wCAMwC;AACnC,WAAS,IAAI;AACf;AAEJ,CAvBC,8BAuB8B,KAAK,CAAC,2BAA2B;AAC5D,uCAAqC,KACnC;AAEJ;AAEF,CAAC;AACC,eAAa;AACb,WAAS;AACT,aAAW,IAAI;AACf,mBAAiB;AACjB,SAAO,IAAI;AACX,UAAQ,IAAI;AACd;AAEA,CAAC;AACC,cAAY,OAAO,IAAI,wCACrB,IAAI;AACR;AAEA,CAAC;AACG,UAAQ;AACV;AAEF,CAAC;AACC,UAAQ;AACR,YAAU;AACV,cAAY,IAAI,IAAI,wCAClB,IAAI;AACR;AAEA,CAAC;AACG,UAAQ;AACV;AAEF,CAXC,gCAWgC,CAAC;AAC9B,YAAU;AACV,SAAO;AACP,UAAQ;AACR,WAAS;AACT,UAAQ;AACR,YAAU;AACV,QAAM,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACpB,eAAa;AACb,gBAAc;AAChB;;;AC3EJ,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,eAAa;AACb,mBAAiB;AACjB,OAAK,IAAI;AACT,SAAO;AACT;AAEE,CAAC,kCAAkC,CAAC;AAChC,gBAAc,IAAI;AACpB;;;ACXJ,CAAC;AACC,eAAa;AACb,WAAS;AACT,kBAAgB;AAChB,OAAK,IAAI;AACT,mBAAiB;AACjB,WAAS,IAAI,6BAA6B,IAAI,6BAC5C,IAAI,6BAA6B,IAAI;AACvC,SAAO;AACT;AAEE,CAAC;AACC,iBAAe;AACjB;AAEA,CAAC;AACC,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,eAAa,IAAI;AACnB;","names":[]}

package/dist/index.d.mts

@@ -9,7 +9,7 @@ declare const FilterList: ({ children, className }: FilterListProps) => react_js
 
 interface FilterListItemProps {
     type: "radio" | "checkbox";
-    label: string;
+    label: NonNullable<ReactNode>;
     icon?: ReactElement;
     value: string;
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;

package/dist/index.d.ts

@@ -9,7 +9,7 @@ declare const FilterList: ({ children, className }: FilterListProps) => react_js
 
 interface FilterListItemProps {
     type: "radio" | "checkbox";
-    label: string;
+    label: NonNullable<ReactNode>;
     icon?: ReactElement;
     value: string;
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;

package/dist/index.js

@@ -1 +1 @@
-"use strict";var e=require("clsx/lite"),s=require("react/jsx-runtime"),i=require("@sikt/sds-checkbox"),a=require("@sikt/sds-radio"),l=require("react"),t=require("@sikt/sds-badge"),n=require("@sikt/sds-button"),d=require("@sikt/sds-icons"),c=require("clsx");function r(e){return e&&e.__esModule?e:{default:e}}var o=r(c),x=({icon:e,label:i})=>s.jsxs("div",{className:"sds-filter-list-icon-label",children:[s.jsx("span",{className:"sds-filter-list-icon-label__icon",children:e}),s.jsx("span",{children:i})]});function h({header:e,clickableHeader:i=!1,initialExpanded:a=!1,onExpandToggle:t,ariaLabelExpandToggle:c,children:r}){const x=l.useId(),[h,p]=l.useState(a),u=()=>{const e=!h;p(e),t&&t(e)},b=()=>{u()},g=s.jsx(d.ExpandShowIcon,{className:o.default("sds-filter-list-expand__icon",h&&"sds-filter-list-expand__icon--expanded")});return s.jsxs("div",{className:"sds-filter-list-expand",children:[i?s.jsxs("div",{className:"sds-filter-list-expand__header sds-filter-list-expand__header-clickable",onClick:b,onKeyDown:e=>{const s=e.key;"Enter"!=s&&" "!==s||u()},tabIndex:0,role:"button",id:"".concat(x,"-title"),"aria-expanded":h,"aria-controls":"".concat(x,"-content"),children:[e,s.jsx("div",{className:"sds-filter-list-expand--icon-container",children:g})]}):s.jsxs("div",{className:"sds-filter-list-expand__header",id:"".concat(x,"-title"),children:[e,s.jsx(n.Button,{variant:"transparent",size:"small",icon:g,iconVariant:"only",onClick:b,"aria-expanded":h,"aria-controls":"".concat(x,"-content"),children:c})]}),s.jsx("div",{className:o.default("sds-filter-list-expand__content",h&&"sds-filter-list-expand__content--open"),children:s.jsx("div",{role:"region",id:"".concat(x,"-content"),"aria-labelledby":"".concat(x,"-title"),hidden:!h,children:r})})]})}exports.FilterList=({children:i,className:a})=>s.jsx("div",{className:e.clsx("sds-filter-list",a),children:i}),exports.FilterListCategory=({label:e,icon:a,expanded:n,ariaLabelExpandToggle:d,onExpandToggle:c,onCategoryToggle:r,indeterminate:o,checked:p,count:u,children:b})=>{const g=l.useId(),_=void 0!==u&&u>0;return s.jsx(h,{ariaLabelExpandToggle:d,initialExpanded:n,onExpandToggle:c,header:s.jsxs("div",{className:"sds-filter-list-category",children:[s.jsx(i.CheckboxInput,{className:"sds-filter-list-item__input","aria-describedby":g,label:a?s.jsx(x,{label:e,icon:a}):e,onChange:e=>{r&&r(e.target.checked)},indeterminate:o,checked:p}),_&&s.jsx(t.Badge,{visibility:"strong",className:"sds-filter-list__badge",id:g,children:u})]}),children:s.jsx("div",{className:"sds-filter-list-category__content",children:b})})},exports.FilterListItem=({type:e,label:t,icon:n,value:d,onChange:c,checked:r,count:o})=>{const h=l.useId(),p=void 0!==o?"".concat(t," (").concat(o,")"):t,u=n?s.jsx(x,{label:p,icon:n}):p;return s.jsxs("div",{className:"sds-filter-list-item",children:["radio"===e&&s.jsx(a.RadioInput,{className:"sds-filter-list-item__input",label:u,value:d,checked:r,"aria-describedby":h}),"checkbox"===e&&s.jsx(i.CheckboxInput,{className:"sds-filter-list-item__input",label:u,value:d,onChange:c,checked:r,"aria-describedby":h})]})},exports.FilterListSection=({label:e,children:i,expandable:a,count:l})=>{const n=void 0!==l&&l>0,d=s.jsxs("div",{className:c.clsx("sds-filter-list-section",a&&"sds-filter-list-section--expandable"),children:[s.jsx("span",{className:"sds-filter-list-section__label",children:e}),n&&s.jsx(t.Badge,{visibility:"strong",className:"sds-filter-list__badge",children:l})]});return a?s.jsx(h,{header:d,clickableHeader:!0,initialExpanded:a.expanded,onExpandToggle:a.onExpandToggle,children:i}):s.jsxs(s.Fragment,{children:[d,i]})};//# sourceMappingURL=index.js.map
+"use strict";var e=require("clsx/lite"),s=require("react/jsx-runtime"),i=require("@sikt/sds-checkbox"),l=require("@sikt/sds-radio"),a=require("@sikt/sds-badge"),n=require("react"),t=require("@sikt/sds-button"),d=require("@sikt/sds-icons"),c=require("clsx");function r(e){return e&&e.__esModule?e:{default:e}}var o=r(c),x=({icon:e,label:i})=>s.jsxs("div",{className:"sds-filter-list-icon-label",children:[s.jsx("span",{className:"sds-filter-list-icon-label__icon",children:e}),s.jsx("span",{children:i})]});function h({header:e,clickableHeader:i=!1,initialExpanded:l=!1,onExpandToggle:a,ariaLabelExpandToggle:c,children:r}){const x=n.useId(),[h,p]=n.useState(l),u=()=>{const e=!h;p(e),a&&a(e)},b=()=>{u()},g=s.jsx(d.ExpandShowIcon,{className:o.default("sds-filter-list-expand__icon",h&&"sds-filter-list-expand__icon--expanded")});return s.jsxs("div",{className:"sds-filter-list-expand",children:[i?s.jsxs("div",{className:"sds-filter-list-expand__header sds-filter-list-expand__header-clickable",onClick:b,onKeyDown:e=>{" "!==e.key&&"Enter"!==e.key||u()},tabIndex:0,role:"button",id:"".concat(x,"-title"),"aria-expanded":h,"aria-controls":"".concat(x,"-content"),children:[e,s.jsx("div",{className:"sds-filter-list-expand--icon-container",children:g})]}):s.jsxs("div",{className:"sds-filter-list-expand__header",id:"".concat(x,"-title"),children:[e,s.jsx(t.Button,{variant:"transparent",size:"small",icon:g,iconVariant:"only",onClick:b,"aria-expanded":h,"aria-controls":"".concat(x,"-content"),children:c})]}),s.jsx("div",{className:o.default("sds-filter-list-expand__content",h&&"sds-filter-list-expand__content--open"),children:s.jsx("div",{role:"region",id:"".concat(x,"-content"),"aria-labelledby":"".concat(x,"-title"),hidden:!h,children:r})})]})}exports.FilterList=({children:i,className:l})=>s.jsx("div",{className:e.clsx("sds-filter-list",l),children:i}),exports.FilterListCategory=({label:e,icon:l,expanded:t,ariaLabelExpandToggle:d,onExpandToggle:c,onCategoryToggle:r,indeterminate:o,checked:p,count:u,children:b})=>{const g=n.useId(),_=void 0!==u&&u>0;return s.jsx(h,{ariaLabelExpandToggle:d,initialExpanded:t,onExpandToggle:c,header:s.jsxs("div",{className:"sds-filter-list-category",children:[s.jsx(i.CheckboxInput,{className:"sds-filter-list-item__input","aria-describedby":_?g:void 0,label:l?s.jsx(x,{label:e,icon:l}):e,onChange:e=>{r&&r(e.target.checked)},indeterminate:o,checked:p}),_&&s.jsx(a.Badge,{visibility:"strong",className:"sds-filter-list__badge",id:g,children:u})]}),children:s.jsx("div",{className:"sds-filter-list-category__content",children:b})})},exports.FilterListItem=({type:e,label:a,icon:n,value:t,onChange:d,checked:c,count:r})=>{const o=void 0!==r?s.jsxs("span",{className:"sds-filter-list-item__input-label",children:[s.jsx("span",{children:a})," ",s.jsxs("span",{children:["(",r,")"]})]}):a,h=n?s.jsx(x,{label:o,icon:n}):o;return s.jsxs("div",{className:"sds-filter-list-item",children:["radio"===e&&s.jsx(l.RadioInput,{className:"sds-filter-list-item__input",label:h,value:t,checked:c}),"checkbox"===e&&s.jsx(i.CheckboxInput,{className:"sds-filter-list-item__input",label:h,value:t,onChange:d,checked:c})]})},exports.FilterListSection=({label:e,children:i,expandable:l,count:n})=>{const t=void 0!==n&&n>0,d=s.jsxs("div",{className:c.clsx("sds-filter-list-section",l&&"sds-filter-list-section--expandable"),children:[s.jsx("span",{className:"sds-filter-list-section__label",children:e}),t&&s.jsx(a.Badge,{visibility:"strong",className:"sds-filter-list__badge",children:n})]});return l?s.jsx(h,{header:d,clickableHeader:!0,initialExpanded:l.expanded,onExpandToggle:l.onExpandToggle,children:i}):s.jsxs(s.Fragment,{children:[d,i]})};//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/FilterList/FilterList.tsx","../src/components/FilterListIconLabel/FilterListIconLabel.tsx","../src/FilterListItem/FilterListItem.tsx","../src/components/FilterListExpand/FilterListExpand.tsx","../src/FilterListCategory/FilterListCategory.tsx","../src/FilterListSection/FilterListSection.tsx"],"names":["clsx","jsxs","jsx","useId","RadioInput","CheckboxInput","useState","ExpandShowIcon","Button","Badge","Fragment"],"mappings":"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","file":"index.js","sourcesContent":["import { clsx } from \"clsx/lite\";\nimport { ReactNode } from \"react\";\nimport \"./filter-list.pcss\";\n\nexport interface FilterListProps {\n  children: ReactNode;\n  className?: string;\n}\n\nexport const FilterList = ({ children, className }: FilterListProps) => {\n  return <div className={clsx(\"sds-filter-list\", className)}>{children}</div>;\n};\n","import { ReactNode } from \"react\";\nimport \"./filter-list-icon-label.pcss\";\n\nexport interface FilterListIconLabelProps {\n  icon: ReactNode;\n  label: string;\n}\n\nexport const FilterListIconLabel = ({\n  icon,\n  label,\n}: FilterListIconLabelProps) => {\n  return (\n    <div className=\"sds-filter-list-icon-label\">\n      <span className=\"sds-filter-list-icon-label__icon\">{icon}</span>\n      <span>{label}</span>\n    </div>\n  );\n};\n","import { CheckboxInput } from \"@sikt/sds-checkbox\";\nimport { RadioInput } from \"@sikt/sds-radio\";\nimport { ChangeEvent, ReactElement, useId } from \"react\";\nimport { FilterListIconLabel } from \"../components/FilterListIconLabel/FilterListIconLabel\";\nimport \"./filter-list-item.pcss\";\n\nexport interface FilterListItemProps {\n  type: \"radio\" | \"checkbox\";\n  label: string;\n  icon?: ReactElement;\n  value: string;\n  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;\n  checked?: boolean;\n  count?: number;\n}\n\nexport const FilterListItem = ({\n  type,\n  label,\n  icon,\n  value,\n  onChange,\n  checked,\n  count,\n}: FilterListItemProps) => {\n  const id = useId();\n  const hasCount = count !== undefined;\n\n  const inputLabel = hasCount ? `${label} (${count})` : label;\n  const iconLabel = icon ? (\n    <FilterListIconLabel label={inputLabel} icon={icon} />\n  ) : (\n    inputLabel\n  );\n\n  return (\n    <div className=\"sds-filter-list-item\">\n      {type === \"radio\" && (\n        <RadioInput\n          className=\"sds-filter-list-item__input\"\n          label={iconLabel}\n          value={value}\n          checked={checked}\n          aria-describedby={id}\n        />\n      )}\n\n      {type === \"checkbox\" && (\n        <CheckboxInput\n          className=\"sds-filter-list-item__input\"\n          label={iconLabel}\n          value={value}\n          onChange={onChange}\n          checked={checked}\n          aria-describedby={id}\n        />\n      )}\n    </div>\n  );\n};\n","import { Button } from \"@sikt/sds-button\";\nimport { ExpandShowIcon } from \"@sikt/sds-icons\";\nimport clsx from \"clsx\";\nimport { ReactNode, useId, useState } from \"react\";\nimport \"./filter-list-expand.pcss\";\n\ninterface FilterListExpandProps {\n  header: ReactNode;\n  clickableHeader?: boolean;\n  initialExpanded?: boolean;\n  onExpandToggle?: (expanded: boolean) => void;\n  ariaLabelExpandToggle?: NonNullable<string>;\n  children: ReactNode;\n}\n\nexport function FilterListExpand({\n  header,\n  clickableHeader = false,\n  initialExpanded = false,\n  onExpandToggle,\n  ariaLabelExpandToggle,\n  children,\n}: FilterListExpandProps) {\n  const id = useId();\n  const [expanded, setExpanded] = useState(initialExpanded);\n\n  const onToggle = () => {\n    const newState = !expanded;\n    setExpanded(newState);\n    if (onExpandToggle) {\n      onExpandToggle(newState);\n    }\n  };\n\n  const handleToggleByClick = () => {\n    onToggle();\n  };\n\n  const handleToggleByKeyDown = (event: KeyboardEvent) => {\n    const key = event.key;\n    if (key == \"Enter\" || key === \" \") {\n      onToggle();\n    }\n  };\n\n  const icon = (\n    <ExpandShowIcon\n      className={clsx(\n        \"sds-filter-list-expand__icon\",\n        expanded && \"sds-filter-list-expand__icon--expanded\",\n      )}\n    />\n  );\n\n  return (\n    <div className=\"sds-filter-list-expand\">\n      {clickableHeader ? (\n        <div\n          className=\"sds-filter-list-expand__header sds-filter-list-expand__header-clickable\"\n          onClick={handleToggleByClick}\n          onKeyDown={handleToggleByKeyDown}\n          tabIndex={0}\n          role=\"button\"\n          id={`${id}-title`}\n          aria-expanded={expanded}\n          aria-controls={`${id}-content`}\n        >\n          {header}\n          <div className=\"sds-filter-list-expand--icon-container\">{icon}</div>\n        </div>\n      ) : (\n        <div className=\"sds-filter-list-expand__header\" id={`${id}-title`}>\n          {header}\n          <Button\n            variant=\"transparent\"\n            size=\"small\"\n            icon={icon}\n            iconVariant=\"only\"\n            onClick={handleToggleByClick}\n            aria-expanded={expanded}\n            aria-controls={`${id}-content`}\n          >\n            {ariaLabelExpandToggle}\n          </Button>\n        </div>\n      )}\n\n      <div\n        className={clsx(\n          \"sds-filter-list-expand__content\",\n          expanded && \"sds-filter-list-expand__content--open\",\n        )}\n      >\n        <div\n          role=\"region\"\n          id={`${id}-content`}\n          aria-labelledby={`${id}-title`}\n          hidden={!expanded}\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n","import { Badge } from \"@sikt/sds-badge\";\nimport { CheckboxInput } from \"@sikt/sds-checkbox\";\nimport { ReactNode, useId } from \"react\";\nimport { FilterListExpand } from \"../components/FilterListExpand/FilterListExpand\";\nimport { FilterListIconLabel } from \"../components/FilterListIconLabel/FilterListIconLabel\";\nimport \"./filter-list-category.pcss\";\n\nexport interface FilterListCategoryProps {\n  label: string;\n  icon?: ReactNode;\n  expanded?: boolean;\n  onExpandToggle?: (expanded: boolean) => void;\n  ariaLabelExpandToggle: NonNullable<string>;\n  onCategoryToggle?: (checked: boolean) => void;\n  indeterminate: boolean;\n  checked: boolean;\n  count?: number;\n  children: ReactNode;\n}\n\nexport const FilterListCategory = ({\n  label,\n  icon,\n  expanded,\n  ariaLabelExpandToggle,\n  onExpandToggle,\n  onCategoryToggle,\n  indeterminate,\n  checked,\n  count,\n  children,\n}: FilterListCategoryProps) => {\n  const id = useId();\n  const hasCount = count !== undefined && count > 0;\n\n  return (\n    <FilterListExpand\n      ariaLabelExpandToggle={ariaLabelExpandToggle}\n      initialExpanded={expanded}\n      onExpandToggle={onExpandToggle}\n      header={\n        <div className=\"sds-filter-list-category\">\n          <CheckboxInput\n            className=\"sds-filter-list-item__input\"\n            aria-describedby={id}\n            label={\n              icon ? <FilterListIconLabel label={label} icon={icon} /> : label\n            }\n            onChange={(event) => {\n              if (onCategoryToggle) {\n                onCategoryToggle(event.target.checked);\n              }\n            }}\n            indeterminate={indeterminate}\n            checked={checked}\n          />\n          {hasCount && (\n            <Badge\n              visibility=\"strong\"\n              className=\"sds-filter-list__badge\"\n              id={id}\n            >\n              {count}\n            </Badge>\n          )}\n        </div>\n      }\n    >\n      <div className=\"sds-filter-list-category__content\">{children}</div>\n    </FilterListExpand>\n  );\n};\n","import { Badge } from \"@sikt/sds-badge\";\nimport { clsx } from \"clsx\";\nimport { ReactNode } from \"react\";\nimport { FilterListExpand } from \"../components/FilterListExpand/FilterListExpand\";\nimport \"./filter-list-section.pcss\";\n\nexport interface FilterListSectionProps {\n  label: string;\n  children: ReactNode;\n  expandable?: {\n    expanded: boolean;\n    onExpandToggle?: (expanded: boolean) => void;\n  };\n  count?: number;\n}\n\nexport const FilterListSection = ({\n  label,\n  children,\n  expandable,\n  count,\n}: FilterListSectionProps) => {\n  const hasCount = count !== undefined && count > 0;\n\n  const header = (\n    <div\n      className={clsx(\n        \"sds-filter-list-section\",\n        expandable && \"sds-filter-list-section--expandable\",\n      )}\n    >\n      <span className=\"sds-filter-list-section__label\">{label}</span>\n      {hasCount && (\n        <Badge visibility=\"strong\" className=\"sds-filter-list__badge\">\n          {count}\n        </Badge>\n      )}\n    </div>\n  );\n\n  return expandable ? (\n    <FilterListExpand\n      header={header}\n      clickableHeader\n      initialExpanded={expandable.expanded}\n      onExpandToggle={expandable.onExpandToggle}\n    >\n      {children}\n    </FilterListExpand>\n  ) : (\n    <>\n      {header}\n      {children}\n    </>\n  );\n};\n"]}
+{"version":3,"sources":["../src/FilterList/FilterList.tsx","../src/components/FilterListIconLabel/FilterListIconLabel.tsx","../src/FilterListItem/FilterListItem.tsx","../src/components/FilterListExpand/FilterListExpand.tsx","../src/FilterListCategory/FilterListCategory.tsx","../src/FilterListSection/FilterListSection.tsx"],"names":["clsx","jsxs","jsx","RadioInput","CheckboxInput","useId","useState","ExpandShowIcon","Button","Badge","Fragment"],"mappings":"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","file":"index.js","sourcesContent":["import { clsx } from \"clsx/lite\";\nimport { ReactNode } from \"react\";\nimport \"./filter-list.pcss\";\n\nexport interface FilterListProps {\n  children: ReactNode;\n  className?: string;\n}\n\nexport const FilterList = ({ children, className }: FilterListProps) => {\n  return <div className={clsx(\"sds-filter-list\", className)}>{children}</div>;\n};\n","import { ReactNode } from \"react\";\nimport \"./filter-list-icon-label.pcss\";\n\nexport interface FilterListIconLabelProps {\n  icon: ReactNode;\n  label: ReactNode;\n}\n\nexport const FilterListIconLabel = ({\n  icon,\n  label,\n}: FilterListIconLabelProps) => {\n  return (\n    <div className=\"sds-filter-list-icon-label\">\n      <span className=\"sds-filter-list-icon-label__icon\">{icon}</span>\n      <span>{label}</span>\n    </div>\n  );\n};\n","import { CheckboxInput } from \"@sikt/sds-checkbox\";\nimport { RadioInput } from \"@sikt/sds-radio\";\nimport { ChangeEvent, ReactElement, ReactNode } from \"react\";\nimport { FilterListIconLabel } from \"../components/FilterListIconLabel/FilterListIconLabel\";\nimport \"./filter-list-item.pcss\";\n\nexport interface FilterListItemProps {\n  type: \"radio\" | \"checkbox\";\n  label: NonNullable<ReactNode>;\n  icon?: ReactElement;\n  value: string;\n  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;\n  checked?: boolean;\n  count?: number;\n}\n\nexport const FilterListItem = ({\n  type,\n  label,\n  icon,\n  value,\n  onChange,\n  checked,\n  count,\n}: FilterListItemProps) => {\n  const hasCount = count !== undefined;\n\n  const inputLabel = hasCount ? (\n    <span className=\"sds-filter-list-item__input-label\">\n      <span>{label}</span> <span>({count})</span>\n    </span>\n  ) : (\n    label\n  );\n  const iconLabel = icon ? (\n    <FilterListIconLabel label={inputLabel} icon={icon} />\n  ) : (\n    inputLabel\n  );\n\n  return (\n    <div className=\"sds-filter-list-item\">\n      {type === \"radio\" && (\n        <RadioInput\n          className=\"sds-filter-list-item__input\"\n          label={iconLabel}\n          value={value}\n          checked={checked}\n        />\n      )}\n\n      {type === \"checkbox\" && (\n        <CheckboxInput\n          className=\"sds-filter-list-item__input\"\n          label={iconLabel}\n          value={value}\n          onChange={onChange}\n          checked={checked}\n        />\n      )}\n    </div>\n  );\n};\n","import { Button } from \"@sikt/sds-button\";\nimport { ExpandShowIcon } from \"@sikt/sds-icons\";\nimport clsx from \"clsx\";\nimport {\n  KeyboardEvent as ReactKeyboardEvent,\n  ReactNode,\n  useId,\n  useState,\n} from \"react\";\nimport \"./filter-list-expand.pcss\";\n\ninterface FilterListExpandProps {\n  header: ReactNode;\n  clickableHeader?: boolean;\n  initialExpanded?: boolean;\n  onExpandToggle?: (expanded: boolean) => void;\n  ariaLabelExpandToggle?: NonNullable<string>;\n  children: ReactNode;\n}\n\nexport function FilterListExpand({\n  header,\n  clickableHeader = false,\n  initialExpanded = false,\n  onExpandToggle,\n  ariaLabelExpandToggle,\n  children,\n}: FilterListExpandProps) {\n  const id = useId();\n  const [expanded, setExpanded] = useState(initialExpanded);\n\n  const onToggle = () => {\n    const newState = !expanded;\n    setExpanded(newState);\n    if (onExpandToggle) {\n      onExpandToggle(newState);\n    }\n  };\n\n  const handleToggleByClick = () => {\n    onToggle();\n  };\n\n  const handleToggleByKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {\n    if (event.key === \" \" || event.key === \"Enter\") {\n      onToggle();\n    }\n  };\n\n  const icon = (\n    <ExpandShowIcon\n      className={clsx(\n        \"sds-filter-list-expand__icon\",\n        expanded && \"sds-filter-list-expand__icon--expanded\",\n      )}\n    />\n  );\n\n  return (\n    <div className=\"sds-filter-list-expand\">\n      {clickableHeader ? (\n        <div\n          className=\"sds-filter-list-expand__header sds-filter-list-expand__header-clickable\"\n          onClick={handleToggleByClick}\n          onKeyDown={handleToggleByKeyDown}\n          tabIndex={0}\n          role=\"button\"\n          id={`${id}-title`}\n          aria-expanded={expanded}\n          aria-controls={`${id}-content`}\n        >\n          {header}\n          <div className=\"sds-filter-list-expand--icon-container\">{icon}</div>\n        </div>\n      ) : (\n        <div className=\"sds-filter-list-expand__header\" id={`${id}-title`}>\n          {header}\n          <Button\n            variant=\"transparent\"\n            size=\"small\"\n            icon={icon}\n            iconVariant=\"only\"\n            onClick={handleToggleByClick}\n            aria-expanded={expanded}\n            aria-controls={`${id}-content`}\n          >\n            {ariaLabelExpandToggle}\n          </Button>\n        </div>\n      )}\n\n      <div\n        className={clsx(\n          \"sds-filter-list-expand__content\",\n          expanded && \"sds-filter-list-expand__content--open\",\n        )}\n      >\n        <div\n          role=\"region\"\n          id={`${id}-content`}\n          aria-labelledby={`${id}-title`}\n          hidden={!expanded}\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n","import { Badge } from \"@sikt/sds-badge\";\nimport { CheckboxInput } from \"@sikt/sds-checkbox\";\nimport { ReactNode, useId } from \"react\";\nimport { FilterListExpand } from \"../components/FilterListExpand/FilterListExpand\";\nimport { FilterListIconLabel } from \"../components/FilterListIconLabel/FilterListIconLabel\";\nimport \"./filter-list-category.pcss\";\n\nexport interface FilterListCategoryProps {\n  label: string;\n  icon?: ReactNode;\n  expanded?: boolean;\n  onExpandToggle?: (expanded: boolean) => void;\n  ariaLabelExpandToggle: NonNullable<string>;\n  onCategoryToggle?: (checked: boolean) => void;\n  indeterminate: boolean;\n  checked: boolean;\n  count?: number;\n  children: ReactNode;\n}\n\nexport const FilterListCategory = ({\n  label,\n  icon,\n  expanded,\n  ariaLabelExpandToggle,\n  onExpandToggle,\n  onCategoryToggle,\n  indeterminate,\n  checked,\n  count,\n  children,\n}: FilterListCategoryProps) => {\n  const id = useId();\n  const hasCount = count !== undefined && count > 0;\n\n  return (\n    <FilterListExpand\n      ariaLabelExpandToggle={ariaLabelExpandToggle}\n      initialExpanded={expanded}\n      onExpandToggle={onExpandToggle}\n      header={\n        <div className=\"sds-filter-list-category\">\n          <CheckboxInput\n            className=\"sds-filter-list-item__input\"\n            aria-describedby={hasCount ? id : undefined}\n            label={\n              icon ? <FilterListIconLabel label={label} icon={icon} /> : label\n            }\n            onChange={(event) => {\n              if (onCategoryToggle) {\n                onCategoryToggle(event.target.checked);\n              }\n            }}\n            indeterminate={indeterminate}\n            checked={checked}\n          />\n          {hasCount && (\n            <Badge\n              visibility=\"strong\"\n              className=\"sds-filter-list__badge\"\n              id={id}\n            >\n              {count}\n            </Badge>\n          )}\n        </div>\n      }\n    >\n      <div className=\"sds-filter-list-category__content\">{children}</div>\n    </FilterListExpand>\n  );\n};\n","import { Badge } from \"@sikt/sds-badge\";\nimport { clsx } from \"clsx\";\nimport { ReactNode } from \"react\";\nimport { FilterListExpand } from \"../components/FilterListExpand/FilterListExpand\";\nimport \"./filter-list-section.pcss\";\n\nexport interface FilterListSectionProps {\n  label: string;\n  children: ReactNode;\n  expandable?: {\n    expanded: boolean;\n    onExpandToggle?: (expanded: boolean) => void;\n  };\n  count?: number;\n}\n\nexport const FilterListSection = ({\n  label,\n  children,\n  expandable,\n  count,\n}: FilterListSectionProps) => {\n  const hasCount = count !== undefined && count > 0;\n\n  const header = (\n    <div\n      className={clsx(\n        \"sds-filter-list-section\",\n        expandable && \"sds-filter-list-section--expandable\",\n      )}\n    >\n      <span className=\"sds-filter-list-section__label\">{label}</span>\n      {hasCount && (\n        <Badge visibility=\"strong\" className=\"sds-filter-list__badge\">\n          {count}\n        </Badge>\n      )}\n    </div>\n  );\n\n  return expandable ? (\n    <FilterListExpand\n      header={header}\n      clickableHeader\n      initialExpanded={expandable.expanded}\n      onExpandToggle={expandable.onExpandToggle}\n    >\n      {children}\n    </FilterListExpand>\n  ) : (\n    <>\n      {header}\n      {children}\n    </>\n  );\n};\n"]}

package/dist/index.mjs

@@ -1 +1 @@
-import{clsx as e}from"clsx/lite";import{jsx as i,jsxs as a,Fragment as l}from"react/jsx-runtime";import{CheckboxInput as s}from"@sikt/sds-checkbox";import{RadioInput as n}from"@sikt/sds-radio";import{useId as t,useState as d}from"react";import{Badge as c}from"@sikt/sds-badge";import{Button as r}from"@sikt/sds-button";import{ExpandShowIcon as o}from"@sikt/sds-icons";import m,{clsx as p}from"clsx";var h=({children:a,className:l})=>i("div",{className:e("sds-filter-list",l),children:a}),b=({icon:e,label:l})=>a("div",{className:"sds-filter-list-icon-label",children:[i("span",{className:"sds-filter-list-icon-label__icon",children:e}),i("span",{children:l})]}),x=({type:e,label:l,icon:d,value:c,onChange:r,checked:o,count:m})=>{const p=t(),h=void 0!==m?"".concat(l," (").concat(m,")"):l,x=d?i(b,{label:h,icon:d}):h;return a("div",{className:"sds-filter-list-item",children:["radio"===e&&i(n,{className:"sds-filter-list-item__input",label:x,value:c,checked:o,"aria-describedby":p}),"checkbox"===e&&i(s,{className:"sds-filter-list-item__input",label:x,value:c,onChange:r,checked:o,"aria-describedby":p})]})};function f({header:e,clickableHeader:l=!1,initialExpanded:s=!1,onExpandToggle:n,ariaLabelExpandToggle:c,children:p}){const h=t(),[b,x]=d(s),f=()=>{const e=!b;x(e),n&&n(e)},g=()=>{f()},_=i(o,{className:m("sds-filter-list-expand__icon",b&&"sds-filter-list-expand__icon--expanded")});return a("div",{className:"sds-filter-list-expand",children:[a("div",l?{className:"sds-filter-list-expand__header sds-filter-list-expand__header-clickable",onClick:g,onKeyDown:e=>{const i=e.key;"Enter"!=i&&" "!==i||f()},tabIndex:0,role:"button",id:"".concat(h,"-title"),"aria-expanded":b,"aria-controls":"".concat(h,"-content"),children:[e,i("div",{className:"sds-filter-list-expand--icon-container",children:_})]}:{className:"sds-filter-list-expand__header",id:"".concat(h,"-title"),children:[e,i(r,{variant:"transparent",size:"small",icon:_,iconVariant:"only",onClick:g,"aria-expanded":b,"aria-controls":"".concat(h,"-content"),children:c})]}),i("div",{className:m("sds-filter-list-expand__content",b&&"sds-filter-list-expand__content--open"),children:i("div",{role:"region",id:"".concat(h,"-content"),"aria-labelledby":"".concat(h,"-title"),hidden:!b,children:p})})]})}var g=({label:e,icon:l,expanded:n,ariaLabelExpandToggle:d,onExpandToggle:r,onCategoryToggle:o,indeterminate:m,checked:p,count:h,children:x})=>{const g=t(),_=void 0!==h&&h>0;return i(f,{ariaLabelExpandToggle:d,initialExpanded:n,onExpandToggle:r,header:a("div",{className:"sds-filter-list-category",children:[i(s,{className:"sds-filter-list-item__input","aria-describedby":g,label:l?i(b,{label:e,icon:l}):e,onChange:e=>{o&&o(e.target.checked)},indeterminate:m,checked:p}),_&&i(c,{visibility:"strong",className:"sds-filter-list__badge",id:g,children:h})]}),children:i("div",{className:"sds-filter-list-category__content",children:x})})},_=({label:e,children:s,expandable:n,count:t})=>{const d=void 0!==t&&t>0,r=a("div",{className:p("sds-filter-list-section",n&&"sds-filter-list-section--expandable"),children:[i("span",{className:"sds-filter-list-section__label",children:e}),d&&i(c,{visibility:"strong",className:"sds-filter-list__badge",children:t})]});return n?i(f,{header:r,clickableHeader:!0,initialExpanded:n.expanded,onExpandToggle:n.onExpandToggle,children:s}):a(l,{children:[r,s]})};export{h as FilterList,g as FilterListCategory,x as FilterListItem,_ as FilterListSection};//# sourceMappingURL=index.mjs.map
+import{clsx as e}from"clsx/lite";import{jsx as i,jsxs as l,Fragment as a}from"react/jsx-runtime";import{CheckboxInput as s}from"@sikt/sds-checkbox";import{RadioInput as n}from"@sikt/sds-radio";import{Badge as t}from"@sikt/sds-badge";import{useId as d,useState as c}from"react";import{Button as r}from"@sikt/sds-button";import{ExpandShowIcon as o}from"@sikt/sds-icons";import p,{clsx as m}from"clsx";var h=({children:l,className:a})=>i("div",{className:e("sds-filter-list",a),children:l}),b=({icon:e,label:a})=>l("div",{className:"sds-filter-list-icon-label",children:[i("span",{className:"sds-filter-list-icon-label__icon",children:e}),i("span",{children:a})]}),x=({type:e,label:a,icon:t,value:d,onChange:c,checked:r,count:o})=>{const p=void 0!==o?l("span",{className:"sds-filter-list-item__input-label",children:[i("span",{children:a})," ",l("span",{children:["(",o,")"]})]}):a,m=t?i(b,{label:p,icon:t}):p;return l("div",{className:"sds-filter-list-item",children:["radio"===e&&i(n,{className:"sds-filter-list-item__input",label:m,value:d,checked:r}),"checkbox"===e&&i(s,{className:"sds-filter-list-item__input",label:m,value:d,onChange:c,checked:r})]})};function f({header:e,clickableHeader:a=!1,initialExpanded:s=!1,onExpandToggle:n,ariaLabelExpandToggle:t,children:m}){const h=d(),[b,x]=c(s),f=()=>{const e=!b;x(e),n&&n(e)},_=()=>{f()},g=i(o,{className:p("sds-filter-list-expand__icon",b&&"sds-filter-list-expand__icon--expanded")});return l("div",{className:"sds-filter-list-expand",children:[l("div",a?{className:"sds-filter-list-expand__header sds-filter-list-expand__header-clickable",onClick:_,onKeyDown:e=>{" "!==e.key&&"Enter"!==e.key||f()},tabIndex:0,role:"button",id:"".concat(h,"-title"),"aria-expanded":b,"aria-controls":"".concat(h,"-content"),children:[e,i("div",{className:"sds-filter-list-expand--icon-container",children:g})]}:{className:"sds-filter-list-expand__header",id:"".concat(h,"-title"),children:[e,i(r,{variant:"transparent",size:"small",icon:g,iconVariant:"only",onClick:_,"aria-expanded":b,"aria-controls":"".concat(h,"-content"),children:t})]}),i("div",{className:p("sds-filter-list-expand__content",b&&"sds-filter-list-expand__content--open"),children:i("div",{role:"region",id:"".concat(h,"-content"),"aria-labelledby":"".concat(h,"-title"),hidden:!b,children:m})})]})}var _=({label:e,icon:a,expanded:n,ariaLabelExpandToggle:c,onExpandToggle:r,onCategoryToggle:o,indeterminate:p,checked:m,count:h,children:x})=>{const _=d(),g=void 0!==h&&h>0;return i(f,{ariaLabelExpandToggle:c,initialExpanded:n,onExpandToggle:r,header:l("div",{className:"sds-filter-list-category",children:[i(s,{className:"sds-filter-list-item__input","aria-describedby":g?_:void 0,label:a?i(b,{label:e,icon:a}):e,onChange:e=>{o&&o(e.target.checked)},indeterminate:p,checked:m}),g&&i(t,{visibility:"strong",className:"sds-filter-list__badge",id:_,children:h})]}),children:i("div",{className:"sds-filter-list-category__content",children:x})})},g=({label:e,children:s,expandable:n,count:d})=>{const c=void 0!==d&&d>0,r=l("div",{className:m("sds-filter-list-section",n&&"sds-filter-list-section--expandable"),children:[i("span",{className:"sds-filter-list-section__label",children:e}),c&&i(t,{visibility:"strong",className:"sds-filter-list__badge",children:d})]});return n?i(f,{header:r,clickableHeader:!0,initialExpanded:n.expanded,onExpandToggle:n.onExpandToggle,children:s}):l(a,{children:[r,s]})};export{h as FilterList,_ as FilterListCategory,x as FilterListItem,g as FilterListSection};//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/FilterList/FilterList.tsx","../src/components/FilterListIconLabel/FilterListIconLabel.tsx","../src/FilterListItem/FilterListItem.tsx","../src/components/FilterListExpand/FilterListExpand.tsx","../src/FilterListCategory/FilterListCategory.tsx","../src/FilterListSection/FilterListSection.tsx"],"names":["jsx","jsxs","useId","clsx","CheckboxInput","Badge"],"mappings":";AASO,IAAM,UAAa,GAAA,CAAC,EAAE,QAAA,EAAU,WAAiC,KAAA;AACtE,EAAA,2BAAQ,KAAI,EAAA,EAAA,SAAA,EAAW,KAAK,iBAAmB,EAAA,SAAS,GAAI,QAAS,EAAA,CAAA;AACvE;ACHO,IAAM,sBAAsB,CAAC;AAAA,EAClC,IAAA;AAAA,EACA;AACF,CAAgC,KAAA;AAC9B,EACE,uBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,4BACb,EAAA,QAAA,EAAA;AAAA,oBAAAA,GAAC,CAAA,MAAA,EAAA,EAAK,SAAU,EAAA,kCAAA,EAAoC,QAAK,EAAA,IAAA,EAAA,CAAA;AAAA,oBACzDA,GAAC,CAAA,MAAA,EAAA,EAAM,QAAM,EAAA,KAAA,EAAA;AAAA,GACf,EAAA,CAAA;AAEJ,CAAA;ACFO,IAAM,iBAAiB,CAAC;AAAA,EAC7B,IAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAA2B,KAAA;AACzB,EAAA,MAAM,KAAK,KAAM,EAAA;AACjB,EAAA,MAAM,WAAW,KAAU,KAAA,MAAA;AAE3B,EAAA,MAAM,aAAa,QAAW,GAAA,EAAA,CAAG,MAAK,CAAA,KAAA,EAAA,IAAA,CAAA,CAAK,cAAK,GAAM,CAAA,GAAA,KAAA;AACtD,EAAM,MAAA,SAAA,GAAY,uBAChBA,GAAAA,CAAC,uBAAoB,KAAO,EAAA,UAAA,EAAY,MAAY,CAEpD,GAAA,UAAA;AAGF,EAAA,uBACEC,IAAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,sBACZ,EAAA,QAAA,EAAA;AAAA,IAAA,IAAA,KAAS,2BACRD,GAAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,SAAU,EAAA,6BAAA;AAAA,QACV,KAAO,EAAA,SAAA;AAAA,QACP,KAAA;AAAA,QACA,OAAA;AAAA,QACA,kBAAkB,EAAA;AAAA;AAAA,KACpB;AAAA,IAGD,IAAA,KAAS,8BACRA,GAAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,SAAU,EAAA,6BAAA;AAAA,QACV,KAAO,EAAA,SAAA;AAAA,QACP,KAAA;AAAA,QACA,QAAA;AAAA,QACA,OAAA;AAAA,QACA,kBAAkB,EAAA;AAAA;AAAA;AACpB,GAEJ,EAAA,CAAA;AAEJ;AC5CO,SAAS,gBAAiB,CAAA;AAAA,EAC/B,MAAA;AAAA,EACA,eAAkB,GAAA,KAAA;AAAA,EAClB,eAAkB,GAAA,KAAA;AAAA,EAClB,cAAA;AAAA,EACA,qBAAA;AAAA,EACA;AACF,CAA0B,EAAA;AACxB,EAAA,MAAM,KAAKE,KAAM,EAAA;AACjB,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,eAAe,CAAA;AAExD,EAAA,MAAM,WAAW,MAAM;AACrB,IAAA,MAAM,WAAW,CAAC,QAAA;AAClB,IAAA,WAAA,CAAY,QAAQ,CAAA;AACpB,IAAA,IAAI,cAAgB,EAAA;AAClB,MAAA,cAAA,CAAe,QAAQ,CAAA;AAAA;AACzB,GACF;AAEA,EAAA,MAAM,sBAAsB,MAAM;AAChC,IAAS,QAAA,EAAA;AAAA,GACX;AAEA,EAAM,MAAA,qBAAA,GAAwB,CAAC,KAAyB,KAAA;AACtD,IAAA,MAAM,MAAM,KAAM,CAAA,GAAA;AAClB,IAAI,IAAA,GAAA,IAAO,OAAW,IAAA,GAAA,KAAQ,GAAK,EAAA;AACjC,MAAS,QAAA,EAAA;AAAA;AACX,GACF;AAEA,EAAA,MAAM,uBACJF,GAAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,SAAWG,EAAAA,KAAAA;AAAA,QACT,8BAAA;AAAA,QACA,QAAY,IAAA;AAAA;AACd;AAAA,GACF;AAGF,EAAA,uBACEF,IAAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,wBACZ,EAAA,QAAA,EAAA;AAAA,IAAA,eAAA,mBACCA,IAAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAU,EAAA,yEAAA;AAAA,QACV,OAAS,EAAA,mBAAA;AAAA,QACT,SAAW,EAAA,qBAAA;AAAA,QACX,QAAU,EAAA,CAAA;AAAA,QACV,IAAK,EAAA,QAAA;AAAA,QACL,EAAA,EAAI,GAAG,MAAE,CAAA,EAAA,EAAA,QAAA,CAAA;AAAA,QACT,eAAe,EAAA,QAAA;AAAA,QACf,eAAA,EAAe,GAAG,MAAE,CAAA,EAAA,EAAA,UAAA,CAAA;AAAA,QAEnB,QAAA,EAAA;AAAA,UAAA,MAAA;AAAA,0BACDD,GAAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,0CAA0C,QAAK,EAAA,IAAA,EAAA;AAAA;AAAA;AAAA,KAChE,mBAEAC,IAAC,CAAA,KAAA,EAAA,EAAI,WAAU,gCAAiC,EAAA,EAAA,EAAI,EAAG,CAAA,MAAA,CAAA,EAAA,EAAE,QACtD,CAAA,EAAA,QAAA,EAAA;AAAA,MAAA,MAAA;AAAA,sBACDD,GAAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,OAAQ,EAAA,aAAA;AAAA,UACR,IAAK,EAAA,OAAA;AAAA,UACL,IAAA;AAAA,UACA,WAAY,EAAA,MAAA;AAAA,UACZ,OAAS,EAAA,mBAAA;AAAA,UACT,eAAe,EAAA,QAAA;AAAA,UACf,eAAA,EAAe,GAAG,MAAE,CAAA,EAAA,EAAA,UAAA,CAAA;AAAA,UAEnB,QAAA,EAAA;AAAA;AAAA;AACH,KACF,EAAA,CAAA;AAAA,oBAGFA,GAAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAWG,EAAAA,KAAAA;AAAA,UACT,iCAAA;AAAA,UACA,QAAY,IAAA;AAAA,SACd;AAAA,QAEA,QAAAH,kBAAAA,GAAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,IAAK,EAAA,QAAA;AAAA,YACL,EAAA,EAAI,GAAG,MAAE,CAAA,EAAA,EAAA,UAAA,CAAA;AAAA,YACT,iBAAA,EAAiB,GAAG,MAAE,CAAA,EAAA,EAAA,QAAA,CAAA;AAAA,YACtB,QAAQ,CAAC,QAAA;AAAA,YAER;AAAA;AAAA;AACH;AAAA;AACF,GACF,EAAA,CAAA;AAEJ;ACpFO,IAAM,qBAAqB,CAAC;AAAA,EACjC,KAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,qBAAA;AAAA,EACA,cAAA;AAAA,EACA,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAA+B,KAAA;AAC7B,EAAA,MAAM,KAAKE,KAAM,EAAA;AACjB,EAAM,MAAA,QAAA,GAAW,KAAU,KAAA,MAAA,IAAa,KAAQ,GAAA,CAAA;AAEhD,EAAA,uBACEF,GAAAA;AAAA,IAAC,gBAAA;AAAA,IAAA;AAAA,MACC,qBAAA;AAAA,MACA,eAAiB,EAAA,QAAA;AAAA,MACjB,cAAA;AAAA,MACA,MACE,kBAAAC,IAAC,CAAA,KAAA,EAAA,EAAI,WAAU,0BACb,EAAA,QAAA,EAAA;AAAA,wBAAAD,GAAAA;AAAA,UAACI,aAAAA;AAAA,UAAA;AAAA,YACC,SAAU,EAAA,6BAAA;AAAA,YACV,kBAAkB,EAAA,EAAA;AAAA,YAClB,OACE,IAAO,mBAAAJ,IAAC,mBAAoB,EAAA,EAAA,KAAA,EAAc,MAAY,CAAK,GAAA,KAAA;AAAA,YAE7D,QAAA,EAAU,CAAC,KAAU,KAAA;AACnB,cAAA,IAAI,gBAAkB,EAAA;AACpB,gBAAiB,gBAAA,CAAA,KAAA,CAAM,OAAO,OAAO,CAAA;AAAA;AACvC,aACF;AAAA,YACA,aAAA;AAAA,YACA;AAAA;AAAA,SACF;AAAA,QACC,4BACCA,GAAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,UAAW,EAAA,QAAA;AAAA,YACX,SAAU,EAAA,wBAAA;AAAA,YACV,EAAA;AAAA,YAEC,QAAA,EAAA;AAAA;AAAA;AACH,OAEJ,EAAA,CAAA;AAAA,MAGF,QAAAA,kBAAAA,GAAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,qCAAqC,QAAS,EAAA;AAAA;AAAA,GAC/D;AAEJ;ACvDO,IAAM,oBAAoB,CAAC;AAAA,EAChC,KAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAA8B,KAAA;AAC5B,EAAM,MAAA,QAAA,GAAW,KAAU,KAAA,MAAA,IAAa,KAAQ,GAAA,CAAA;AAEhD,EAAA,MAAM,yBACJC,IAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAWE,EAAAA,MAAAA;AAAA,QACT,yBAAA;AAAA,QACA,UAAc,IAAA;AAAA,OAChB;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAH,GAAC,CAAA,MAAA,EAAA,EAAK,SAAU,EAAA,gCAAA,EAAkC,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,QACvD,QAAA,oBACCA,GAACK,CAAAA,KAAAA,EAAA,EAAM,UAAW,EAAA,QAAA,EAAS,SAAU,EAAA,wBAAA,EAClC,QACH,EAAA,KAAA,EAAA;AAAA;AAAA;AAAA,GAEJ;AAGF,EAAA,OAAO,6BACLL,GAAAA;AAAA,IAAC,gBAAA;AAAA,IAAA;AAAA,MACC,MAAA;AAAA,MACA,eAAe,EAAA,IAAA;AAAA,MACf,iBAAiB,UAAW,CAAA,QAAA;AAAA,MAC5B,gBAAgB,UAAW,CAAA,cAAA;AAAA,MAE1B;AAAA;AAAA,GACH,mBAEAC,IAAAA,CAAA,QACG,EAAA,EAAA,QAAA,EAAA;AAAA,IAAA,MAAA;AAAA,IACA;AAAA,GACH,EAAA,CAAA;AAEJ","file":"index.mjs","sourcesContent":["import { clsx } from \"clsx/lite\";\nimport { ReactNode } from \"react\";\nimport \"./filter-list.pcss\";\n\nexport interface FilterListProps {\n  children: ReactNode;\n  className?: string;\n}\n\nexport const FilterList = ({ children, className }: FilterListProps) => {\n  return <div className={clsx(\"sds-filter-list\", className)}>{children}</div>;\n};\n","import { ReactNode } from \"react\";\nimport \"./filter-list-icon-label.pcss\";\n\nexport interface FilterListIconLabelProps {\n  icon: ReactNode;\n  label: string;\n}\n\nexport const FilterListIconLabel = ({\n  icon,\n  label,\n}: FilterListIconLabelProps) => {\n  return (\n    <div className=\"sds-filter-list-icon-label\">\n      <span className=\"sds-filter-list-icon-label__icon\">{icon}</span>\n      <span>{label}</span>\n    </div>\n  );\n};\n","import { CheckboxInput } from \"@sikt/sds-checkbox\";\nimport { RadioInput } from \"@sikt/sds-radio\";\nimport { ChangeEvent, ReactElement, useId } from \"react\";\nimport { FilterListIconLabel } from \"../components/FilterListIconLabel/FilterListIconLabel\";\nimport \"./filter-list-item.pcss\";\n\nexport interface FilterListItemProps {\n  type: \"radio\" | \"checkbox\";\n  label: string;\n  icon?: ReactElement;\n  value: string;\n  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;\n  checked?: boolean;\n  count?: number;\n}\n\nexport const FilterListItem = ({\n  type,\n  label,\n  icon,\n  value,\n  onChange,\n  checked,\n  count,\n}: FilterListItemProps) => {\n  const id = useId();\n  const hasCount = count !== undefined;\n\n  const inputLabel = hasCount ? `${label} (${count})` : label;\n  const iconLabel = icon ? (\n    <FilterListIconLabel label={inputLabel} icon={icon} />\n  ) : (\n    inputLabel\n  );\n\n  return (\n    <div className=\"sds-filter-list-item\">\n      {type === \"radio\" && (\n        <RadioInput\n          className=\"sds-filter-list-item__input\"\n          label={iconLabel}\n          value={value}\n          checked={checked}\n          aria-describedby={id}\n        />\n      )}\n\n      {type === \"checkbox\" && (\n        <CheckboxInput\n          className=\"sds-filter-list-item__input\"\n          label={iconLabel}\n          value={value}\n          onChange={onChange}\n          checked={checked}\n          aria-describedby={id}\n        />\n      )}\n    </div>\n  );\n};\n","import { Button } from \"@sikt/sds-button\";\nimport { ExpandShowIcon } from \"@sikt/sds-icons\";\nimport clsx from \"clsx\";\nimport { ReactNode, useId, useState } from \"react\";\nimport \"./filter-list-expand.pcss\";\n\ninterface FilterListExpandProps {\n  header: ReactNode;\n  clickableHeader?: boolean;\n  initialExpanded?: boolean;\n  onExpandToggle?: (expanded: boolean) => void;\n  ariaLabelExpandToggle?: NonNullable<string>;\n  children: ReactNode;\n}\n\nexport function FilterListExpand({\n  header,\n  clickableHeader = false,\n  initialExpanded = false,\n  onExpandToggle,\n  ariaLabelExpandToggle,\n  children,\n}: FilterListExpandProps) {\n  const id = useId();\n  const [expanded, setExpanded] = useState(initialExpanded);\n\n  const onToggle = () => {\n    const newState = !expanded;\n    setExpanded(newState);\n    if (onExpandToggle) {\n      onExpandToggle(newState);\n    }\n  };\n\n  const handleToggleByClick = () => {\n    onToggle();\n  };\n\n  const handleToggleByKeyDown = (event: KeyboardEvent) => {\n    const key = event.key;\n    if (key == \"Enter\" || key === \" \") {\n      onToggle();\n    }\n  };\n\n  const icon = (\n    <ExpandShowIcon\n      className={clsx(\n        \"sds-filter-list-expand__icon\",\n        expanded && \"sds-filter-list-expand__icon--expanded\",\n      )}\n    />\n  );\n\n  return (\n    <div className=\"sds-filter-list-expand\">\n      {clickableHeader ? (\n        <div\n          className=\"sds-filter-list-expand__header sds-filter-list-expand__header-clickable\"\n          onClick={handleToggleByClick}\n          onKeyDown={handleToggleByKeyDown}\n          tabIndex={0}\n          role=\"button\"\n          id={`${id}-title`}\n          aria-expanded={expanded}\n          aria-controls={`${id}-content`}\n        >\n          {header}\n          <div className=\"sds-filter-list-expand--icon-container\">{icon}</div>\n        </div>\n      ) : (\n        <div className=\"sds-filter-list-expand__header\" id={`${id}-title`}>\n          {header}\n          <Button\n            variant=\"transparent\"\n            size=\"small\"\n            icon={icon}\n            iconVariant=\"only\"\n            onClick={handleToggleByClick}\n            aria-expanded={expanded}\n            aria-controls={`${id}-content`}\n          >\n            {ariaLabelExpandToggle}\n          </Button>\n        </div>\n      )}\n\n      <div\n        className={clsx(\n          \"sds-filter-list-expand__content\",\n          expanded && \"sds-filter-list-expand__content--open\",\n        )}\n      >\n        <div\n          role=\"region\"\n          id={`${id}-content`}\n          aria-labelledby={`${id}-title`}\n          hidden={!expanded}\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n","import { Badge } from \"@sikt/sds-badge\";\nimport { CheckboxInput } from \"@sikt/sds-checkbox\";\nimport { ReactNode, useId } from \"react\";\nimport { FilterListExpand } from \"../components/FilterListExpand/FilterListExpand\";\nimport { FilterListIconLabel } from \"../components/FilterListIconLabel/FilterListIconLabel\";\nimport \"./filter-list-category.pcss\";\n\nexport interface FilterListCategoryProps {\n  label: string;\n  icon?: ReactNode;\n  expanded?: boolean;\n  onExpandToggle?: (expanded: boolean) => void;\n  ariaLabelExpandToggle: NonNullable<string>;\n  onCategoryToggle?: (checked: boolean) => void;\n  indeterminate: boolean;\n  checked: boolean;\n  count?: number;\n  children: ReactNode;\n}\n\nexport const FilterListCategory = ({\n  label,\n  icon,\n  expanded,\n  ariaLabelExpandToggle,\n  onExpandToggle,\n  onCategoryToggle,\n  indeterminate,\n  checked,\n  count,\n  children,\n}: FilterListCategoryProps) => {\n  const id = useId();\n  const hasCount = count !== undefined && count > 0;\n\n  return (\n    <FilterListExpand\n      ariaLabelExpandToggle={ariaLabelExpandToggle}\n      initialExpanded={expanded}\n      onExpandToggle={onExpandToggle}\n      header={\n        <div className=\"sds-filter-list-category\">\n          <CheckboxInput\n            className=\"sds-filter-list-item__input\"\n            aria-describedby={id}\n            label={\n              icon ? <FilterListIconLabel label={label} icon={icon} /> : label\n            }\n            onChange={(event) => {\n              if (onCategoryToggle) {\n                onCategoryToggle(event.target.checked);\n              }\n            }}\n            indeterminate={indeterminate}\n            checked={checked}\n          />\n          {hasCount && (\n            <Badge\n              visibility=\"strong\"\n              className=\"sds-filter-list__badge\"\n              id={id}\n            >\n              {count}\n            </Badge>\n          )}\n        </div>\n      }\n    >\n      <div className=\"sds-filter-list-category__content\">{children}</div>\n    </FilterListExpand>\n  );\n};\n","import { Badge } from \"@sikt/sds-badge\";\nimport { clsx } from \"clsx\";\nimport { ReactNode } from \"react\";\nimport { FilterListExpand } from \"../components/FilterListExpand/FilterListExpand\";\nimport \"./filter-list-section.pcss\";\n\nexport interface FilterListSectionProps {\n  label: string;\n  children: ReactNode;\n  expandable?: {\n    expanded: boolean;\n    onExpandToggle?: (expanded: boolean) => void;\n  };\n  count?: number;\n}\n\nexport const FilterListSection = ({\n  label,\n  children,\n  expandable,\n  count,\n}: FilterListSectionProps) => {\n  const hasCount = count !== undefined && count > 0;\n\n  const header = (\n    <div\n      className={clsx(\n        \"sds-filter-list-section\",\n        expandable && \"sds-filter-list-section--expandable\",\n      )}\n    >\n      <span className=\"sds-filter-list-section__label\">{label}</span>\n      {hasCount && (\n        <Badge visibility=\"strong\" className=\"sds-filter-list__badge\">\n          {count}\n        </Badge>\n      )}\n    </div>\n  );\n\n  return expandable ? (\n    <FilterListExpand\n      header={header}\n      clickableHeader\n      initialExpanded={expandable.expanded}\n      onExpandToggle={expandable.onExpandToggle}\n    >\n      {children}\n    </FilterListExpand>\n  ) : (\n    <>\n      {header}\n      {children}\n    </>\n  );\n};\n"]}
+{"version":3,"sources":["../src/FilterList/FilterList.tsx","../src/components/FilterListIconLabel/FilterListIconLabel.tsx","../src/FilterListItem/FilterListItem.tsx","../src/components/FilterListExpand/FilterListExpand.tsx","../src/FilterListCategory/FilterListCategory.tsx","../src/FilterListSection/FilterListSection.tsx"],"names":["jsx","jsxs","clsx","useId","CheckboxInput","Badge"],"mappings":"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","file":"index.mjs","sourcesContent":["import { clsx } from \"clsx/lite\";\nimport { ReactNode } from \"react\";\nimport \"./filter-list.pcss\";\n\nexport interface FilterListProps {\n  children: ReactNode;\n  className?: string;\n}\n\nexport const FilterList = ({ children, className }: FilterListProps) => {\n  return <div className={clsx(\"sds-filter-list\", className)}>{children}</div>;\n};\n","import { ReactNode } from \"react\";\nimport \"./filter-list-icon-label.pcss\";\n\nexport interface FilterListIconLabelProps {\n  icon: ReactNode;\n  label: ReactNode;\n}\n\nexport const FilterListIconLabel = ({\n  icon,\n  label,\n}: FilterListIconLabelProps) => {\n  return (\n    <div className=\"sds-filter-list-icon-label\">\n      <span className=\"sds-filter-list-icon-label__icon\">{icon}</span>\n      <span>{label}</span>\n    </div>\n  );\n};\n","import { CheckboxInput } from \"@sikt/sds-checkbox\";\nimport { RadioInput } from \"@sikt/sds-radio\";\nimport { ChangeEvent, ReactElement, ReactNode } from \"react\";\nimport { FilterListIconLabel } from \"../components/FilterListIconLabel/FilterListIconLabel\";\nimport \"./filter-list-item.pcss\";\n\nexport interface FilterListItemProps {\n  type: \"radio\" | \"checkbox\";\n  label: NonNullable<ReactNode>;\n  icon?: ReactElement;\n  value: string;\n  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;\n  checked?: boolean;\n  count?: number;\n}\n\nexport const FilterListItem = ({\n  type,\n  label,\n  icon,\n  value,\n  onChange,\n  checked,\n  count,\n}: FilterListItemProps) => {\n  const hasCount = count !== undefined;\n\n  const inputLabel = hasCount ? (\n    <span className=\"sds-filter-list-item__input-label\">\n      <span>{label}</span> <span>({count})</span>\n    </span>\n  ) : (\n    label\n  );\n  const iconLabel = icon ? (\n    <FilterListIconLabel label={inputLabel} icon={icon} />\n  ) : (\n    inputLabel\n  );\n\n  return (\n    <div className=\"sds-filter-list-item\">\n      {type === \"radio\" && (\n        <RadioInput\n          className=\"sds-filter-list-item__input\"\n          label={iconLabel}\n          value={value}\n          checked={checked}\n        />\n      )}\n\n      {type === \"checkbox\" && (\n        <CheckboxInput\n          className=\"sds-filter-list-item__input\"\n          label={iconLabel}\n          value={value}\n          onChange={onChange}\n          checked={checked}\n        />\n      )}\n    </div>\n  );\n};\n","import { Button } from \"@sikt/sds-button\";\nimport { ExpandShowIcon } from \"@sikt/sds-icons\";\nimport clsx from \"clsx\";\nimport {\n  KeyboardEvent as ReactKeyboardEvent,\n  ReactNode,\n  useId,\n  useState,\n} from \"react\";\nimport \"./filter-list-expand.pcss\";\n\ninterface FilterListExpandProps {\n  header: ReactNode;\n  clickableHeader?: boolean;\n  initialExpanded?: boolean;\n  onExpandToggle?: (expanded: boolean) => void;\n  ariaLabelExpandToggle?: NonNullable<string>;\n  children: ReactNode;\n}\n\nexport function FilterListExpand({\n  header,\n  clickableHeader = false,\n  initialExpanded = false,\n  onExpandToggle,\n  ariaLabelExpandToggle,\n  children,\n}: FilterListExpandProps) {\n  const id = useId();\n  const [expanded, setExpanded] = useState(initialExpanded);\n\n  const onToggle = () => {\n    const newState = !expanded;\n    setExpanded(newState);\n    if (onExpandToggle) {\n      onExpandToggle(newState);\n    }\n  };\n\n  const handleToggleByClick = () => {\n    onToggle();\n  };\n\n  const handleToggleByKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {\n    if (event.key === \" \" || event.key === \"Enter\") {\n      onToggle();\n    }\n  };\n\n  const icon = (\n    <ExpandShowIcon\n      className={clsx(\n        \"sds-filter-list-expand__icon\",\n        expanded && \"sds-filter-list-expand__icon--expanded\",\n      )}\n    />\n  );\n\n  return (\n    <div className=\"sds-filter-list-expand\">\n      {clickableHeader ? (\n        <div\n          className=\"sds-filter-list-expand__header sds-filter-list-expand__header-clickable\"\n          onClick={handleToggleByClick}\n          onKeyDown={handleToggleByKeyDown}\n          tabIndex={0}\n          role=\"button\"\n          id={`${id}-title`}\n          aria-expanded={expanded}\n          aria-controls={`${id}-content`}\n        >\n          {header}\n          <div className=\"sds-filter-list-expand--icon-container\">{icon}</div>\n        </div>\n      ) : (\n        <div className=\"sds-filter-list-expand__header\" id={`${id}-title`}>\n          {header}\n          <Button\n            variant=\"transparent\"\n            size=\"small\"\n            icon={icon}\n            iconVariant=\"only\"\n            onClick={handleToggleByClick}\n            aria-expanded={expanded}\n            aria-controls={`${id}-content`}\n          >\n            {ariaLabelExpandToggle}\n          </Button>\n        </div>\n      )}\n\n      <div\n        className={clsx(\n          \"sds-filter-list-expand__content\",\n          expanded && \"sds-filter-list-expand__content--open\",\n        )}\n      >\n        <div\n          role=\"region\"\n          id={`${id}-content`}\n          aria-labelledby={`${id}-title`}\n          hidden={!expanded}\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n","import { Badge } from \"@sikt/sds-badge\";\nimport { CheckboxInput } from \"@sikt/sds-checkbox\";\nimport { ReactNode, useId } from \"react\";\nimport { FilterListExpand } from \"../components/FilterListExpand/FilterListExpand\";\nimport { FilterListIconLabel } from \"../components/FilterListIconLabel/FilterListIconLabel\";\nimport \"./filter-list-category.pcss\";\n\nexport interface FilterListCategoryProps {\n  label: string;\n  icon?: ReactNode;\n  expanded?: boolean;\n  onExpandToggle?: (expanded: boolean) => void;\n  ariaLabelExpandToggle: NonNullable<string>;\n  onCategoryToggle?: (checked: boolean) => void;\n  indeterminate: boolean;\n  checked: boolean;\n  count?: number;\n  children: ReactNode;\n}\n\nexport const FilterListCategory = ({\n  label,\n  icon,\n  expanded,\n  ariaLabelExpandToggle,\n  onExpandToggle,\n  onCategoryToggle,\n  indeterminate,\n  checked,\n  count,\n  children,\n}: FilterListCategoryProps) => {\n  const id = useId();\n  const hasCount = count !== undefined && count > 0;\n\n  return (\n    <FilterListExpand\n      ariaLabelExpandToggle={ariaLabelExpandToggle}\n      initialExpanded={expanded}\n      onExpandToggle={onExpandToggle}\n      header={\n        <div className=\"sds-filter-list-category\">\n          <CheckboxInput\n            className=\"sds-filter-list-item__input\"\n            aria-describedby={hasCount ? id : undefined}\n            label={\n              icon ? <FilterListIconLabel label={label} icon={icon} /> : label\n            }\n            onChange={(event) => {\n              if (onCategoryToggle) {\n                onCategoryToggle(event.target.checked);\n              }\n            }}\n            indeterminate={indeterminate}\n            checked={checked}\n          />\n          {hasCount && (\n            <Badge\n              visibility=\"strong\"\n              className=\"sds-filter-list__badge\"\n              id={id}\n            >\n              {count}\n            </Badge>\n          )}\n        </div>\n      }\n    >\n      <div className=\"sds-filter-list-category__content\">{children}</div>\n    </FilterListExpand>\n  );\n};\n","import { Badge } from \"@sikt/sds-badge\";\nimport { clsx } from \"clsx\";\nimport { ReactNode } from \"react\";\nimport { FilterListExpand } from \"../components/FilterListExpand/FilterListExpand\";\nimport \"./filter-list-section.pcss\";\n\nexport interface FilterListSectionProps {\n  label: string;\n  children: ReactNode;\n  expandable?: {\n    expanded: boolean;\n    onExpandToggle?: (expanded: boolean) => void;\n  };\n  count?: number;\n}\n\nexport const FilterListSection = ({\n  label,\n  children,\n  expandable,\n  count,\n}: FilterListSectionProps) => {\n  const hasCount = count !== undefined && count > 0;\n\n  const header = (\n    <div\n      className={clsx(\n        \"sds-filter-list-section\",\n        expandable && \"sds-filter-list-section--expandable\",\n      )}\n    >\n      <span className=\"sds-filter-list-section__label\">{label}</span>\n      {hasCount && (\n        <Badge visibility=\"strong\" className=\"sds-filter-list__badge\">\n          {count}\n        </Badge>\n      )}\n    </div>\n  );\n\n  return expandable ? (\n    <FilterListExpand\n      header={header}\n      clickableHeader\n      initialExpanded={expandable.expanded}\n      onExpandToggle={expandable.onExpandToggle}\n    >\n      {children}\n    </FilterListExpand>\n  ) : (\n    <>\n      {header}\n      {children}\n    </>\n  );\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikt/sds-filter-list",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "license": "UNLICENSED",
   "homepage": "https://designsystem.sikt.no/",
   "repository": {