@sikt/sds-filter-list 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 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.4.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-filter-list@0.3.0...@sikt/sds-filter-list@0.4.0) (2025-05-22)
+
+### ⚠ BREAKING CHANGES
+
+- **filter-list:** require ariaLabelExpandToggle for FilterListCategory
+
+### Bug Fixes
+
+- **filter-list:** add missing aria attributes to accordions ([ca7b564](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/ca7b564be814d31fbe2d5526d14bbdbe022bbe48))
+- **filter-list:** hover & hide legend ([b35a6ab](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/b35a6ab688033f71bb5eb24b9593c98029fc6191))
+- **filter-list:** open/close animation ([697868c](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/697868c0b417c57a6b9bb0eab72a40a447591621))
+- **filter-list:** require ariaLabelExpandToggle for FilterListCategory ([0abab22](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/0abab22f9f0b1897b6f05b4ec15afd321be60750))
+
 ## [0.3.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-filter-list@0.2.0...@sikt/sds-filter-list@0.3.0) (2025-05-21)
 
 ### Features

package/dist/index.css

@@ -9,6 +9,17 @@
   justify-content: center;
   min-width: var(--sds-base-size-m1);
 }
+.sds-filter-list .sds-form-fieldset__legend {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
 
 /* src/components/FilterListIconLabel/filter-list-icon-label.pcss */
 .sds-filter-list-icon-label {
@@ -43,12 +54,7 @@
 }
 .sds-filter-list-item__input {
   flex-basis: 100%;
-}
-.sds-filter-list-item__count {
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
+  font-variant: no-contextual;
 }
 
 /* src/components/FilterListExpand/filter-list-expand.pcss */
@@ -59,7 +65,9 @@
   width: 100%;
 }
 .sds-filter-list-expand__header {
+  --filter-list-item-background-color: transparent;
   align-items: center;
+  background: var(--filter-list-item-background-color);
   border-radius: var(--sds-space-border-radius-small);
   display: flex;
   flex-direction: row;
@@ -75,110 +83,52 @@
 .sds-filter-list-expand__header-clickable:focus-visible {
   outline: var(--sds-focus-outline);
 }
-.sds-filter-list-expand--button-container,
+.sds-filter-list-expand__header:has(.sds-filter-list-item__input:hover) {
+  --filter-list-item-background-color: var( --sds-color-interaction-neutral-transparent-highlight );
+}
 .sds-filter-list-expand--icon-container {
   align-items: center;
   display: flex;
-  justify-content: center;
-}
-.sds-filter-list-expand--icon-container {
   font-size: var(--sds-typography-fontsize-700);
+  justify-content: center;
   width: var(--sds-typography-fontsize-900);
   height: var(--sds-typography-fontsize-900);
 }
-.sds-filter-list-expand__icon--closed-no-anim,
-.sds-filter-list-expand__icon--closed {
-  rotate: 0deg;
+.sds-filter-list-expand__icon {
+  transition: rotate var(--sds-effect-animation-duration-medium) var(--sds-effect-animation-easing-default);
 }
-.sds-filter-list-expand__icon--open-no-anim,
-.sds-filter-list-expand__icon--open {
+.sds-filter-list-expand__icon--expanded {
   rotate: 180deg;
 }
-.sds-filter-list-expand__icon--closed,
-.sds-filter-list-expand__icon--open {
-  animation: var(--sds-effect-animation-duration-medium) forwards;
-}
-.sds-filter-list-expand__icon--closed {
-  animation-name: icon-close-keyframes;
-}
-.sds-filter-list-expand__icon--open {
-  animation-name: icon-open-keyframes;
-}
-@keyframes icon-close-keyframes {
-  from {
-    rotate: 180deg;
-  }
-  to {
-    rotate: 0deg;
-  }
-}
-@keyframes icon-open-keyframes {
-  from {
-    rotate: 0deg;
-  }
-  to {
-    rotate: 180deg;
-  }
-}
 .sds-filter-list-expand__content {
+  height: 0;
   overflow: hidden;
-  max-height: none;
-}
-.sds-filter-list-expand__content--closed-no-anim,
-.sds-filter-list-expand__content--closed {
-  max-height: 0;
-  display: none;
+  transition: all var(--sds-effect-animation-duration-long) var(--sds-effect-animation-easing-default);
 }
-.sds-filter-list-expand__content--open-no-anim,
 .sds-filter-list-expand__content--open {
-  display: inline;
-}
-.sds-filter-list-expand__content--closed,
-.sds-filter-list-expand__content--open {
-  animation: var(--sds-effect-animation-duration-medium) forwards;
-}
-.sds-filter-list-expand__content--closed {
-  animation-name: content-close-keyframes;
-}
-.sds-filter-list-expand__content--open {
-  animation-name: content-open-keyframes;
-}
-@keyframes content-close-keyframes {
-  from {
-    max-height: none;
-    display: inline;
-  }
-  to {
-    max-height: 0;
-    display: none;
-  }
-}
-@keyframes content-open-keyframes {
-  0% {
-    max-height: 0;
-    display: none;
-  }
-  1%, 100% {
-    max-height: none;
-    display: inline;
-  }
+  height: auto;
+}
+.sds-filter-list-expand__content .sds-form-fieldset__legend {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
 }
 
 /* src/FilterListCategory/filter-list-category.pcss */
 .sds-filter-list-category {
-  --filter-list-item-background-color: transparent;
   display: flex;
-  background: var(--filter-list-item-background-color);
-  border-radius: var(--sds-space-border-radius-small);
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   gap: var(--sds-space-gap-tiny);
   width: 100%;
 }
-.sds-filter-list-category:has(.sds-filter-list-item__input:hover) {
-  --filter-list-item-background-color: var( --sds-color-interaction-neutral-transparent-highlight );
-}
 .sds-filter-list-category__content .sds-filter-list-item {
   padding-left: var(--sds-space-padding-small);
 }

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",".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__count {\n    align-items: center;\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-end;\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    align-items: center;\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--button-container,\n  .sds-filter-list-expand--icon-container {\n    align-items: center;\n    display: flex;\n    justify-content: center;\n  }\n\n  .sds-filter-list-expand--icon-container {\n    font-size: var(--sds-typography-fontsize-700);\n    width: var(--sds-typography-fontsize-900);\n    height: var(--sds-typography-fontsize-900);\n  }\n\n  .sds-filter-list-expand__icon--closed-no-anim,\n    .sds-filter-list-expand__icon--closed {\n      rotate: 0deg;\n    }\n\n  .sds-filter-list-expand__icon--open-no-anim,\n    .sds-filter-list-expand__icon--open {\n      rotate: 180deg;\n    }\n\n  .sds-filter-list-expand__icon--closed,\n    .sds-filter-list-expand__icon--open {\n      animation: var(--sds-effect-animation-duration-medium) forwards;\n    }\n\n  .sds-filter-list-expand__icon--closed {\n      animation-name: icon-close-keyframes;\n    }\n\n  .sds-filter-list-expand__icon--open {\n      animation-name: icon-open-keyframes;\n    }\n\n  @keyframes icon-close-keyframes {\n      from {\n        rotate: 180deg;\n      }\n\n      to {\n        rotate: 0deg;\n      }\n    }\n\n  @keyframes icon-open-keyframes {\n      from {\n        rotate: 0deg;\n      }\n\n      to {\n        rotate: 180deg;\n      }\n    }\n\n  .sds-filter-list-expand__content {\n    overflow: hidden;\n    max-height: none;\n  }\n\n  .sds-filter-list-expand__content--closed-no-anim,\n    .sds-filter-list-expand__content--closed {\n      max-height: 0;\n      display: none;\n    }\n\n  .sds-filter-list-expand__content--open-no-anim,\n    .sds-filter-list-expand__content--open {\n      display: inline;\n    }\n\n  .sds-filter-list-expand__content--closed,\n    .sds-filter-list-expand__content--open {\n      animation: var(--sds-effect-animation-duration-medium) forwards;\n    }\n\n  .sds-filter-list-expand__content--closed {\n      animation-name: content-close-keyframes;\n    }\n\n  .sds-filter-list-expand__content--open {\n      animation-name: content-open-keyframes;\n    }\n\n  @keyframes content-close-keyframes {\n      from {\n        max-height: none;\n        display: inline;\n      }\n\n      to {\n        max-height: 0;\n        display: none;\n      }\n    }\n\n  @keyframes content-open-keyframes {\n      0% {\n        max-height: 0;\n        display: none;\n      }\n\n      1%,\n      100% {\n        max-height: none;\n        display: inline;\n      }\n    }\n",".sds-filter-list-category {\n  --filter-list-item-background-color: transparent;\n\n  display: flex;\n  background: var(--filter-list-item-background-color);\n  border-radius: var(--sds-space-border-radius-small);\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: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-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":"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","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    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-long)\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,sCAClB,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

@@ -23,13 +23,14 @@ interface FilterListCategoryProps {
     icon?: ReactNode;
     expanded?: boolean;
     onExpandToggle?: (expanded: boolean) => void;
+    ariaLabelExpandToggle: NonNullable<string>;
     onCategoryToggle?: (checked: boolean) => void;
     indeterminate: boolean;
     checked: boolean;
     count?: number;
     children: ReactNode;
 }
-declare const FilterListCategory: ({ label, icon, expanded, onExpandToggle, onCategoryToggle, indeterminate, checked, count, children, }: FilterListCategoryProps) => react_jsx_runtime.JSX.Element;
+declare const FilterListCategory: ({ label, icon, expanded, ariaLabelExpandToggle, onExpandToggle, onCategoryToggle, indeterminate, checked, count, children, }: FilterListCategoryProps) => react_jsx_runtime.JSX.Element;
 
 interface FilterListSectionProps {
     label: string;

package/dist/index.d.ts

@@ -23,13 +23,14 @@ interface FilterListCategoryProps {
     icon?: ReactNode;
     expanded?: boolean;
     onExpandToggle?: (expanded: boolean) => void;
+    ariaLabelExpandToggle: NonNullable<string>;
     onCategoryToggle?: (checked: boolean) => void;
     indeterminate: boolean;
     checked: boolean;
     count?: number;
     children: ReactNode;
 }
-declare const FilterListCategory: ({ label, icon, expanded, onExpandToggle, onCategoryToggle, indeterminate, checked, count, children, }: FilterListCategoryProps) => react_jsx_runtime.JSX.Element;
+declare const FilterListCategory: ({ label, icon, expanded, ariaLabelExpandToggle, onExpandToggle, onCategoryToggle, indeterminate, checked, count, children, }: FilterListCategoryProps) => react_jsx_runtime.JSX.Element;
 
 interface FilterListSectionProps {
     label: string;

package/dist/index.js

@@ -1 +1 @@
-"use strict";var e=require("clsx/lite"),s=require("react/jsx-runtime"),i=require("@sikt/sds-checkbox"),l=require("@sikt/sds-radio"),a=require("react"),n=require("@sikt/sds-badge"),t=require("@sikt/sds-button"),d=require("@sikt/sds-icons"),r=require("clsx");function c(e){return e&&e.__esModule?e:{default:e}}var o=c(r),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 p({header:e,clickableHeader:i=!1,buttonTitle:l,initialExpanded:n=!1,onExpandToggle:r,ariaLabelExpandToggle:c,children:x}){const[p,h]=a.useState(n),[_,u]=a.useState(!1),b=()=>{const e=!p;u(!0),h(e),r&&r(e)},m=()=>{b()},f=s.jsx(d.ExpandShowIcon,{className:o.default("sds-filter-list-expand__icon",p&&(_?"sds-filter-list-expand__icon--open":"sds-filter-list-expand__icon--open-no-anim"),!p&&(_?"sds-filter-list-expand__icon--closed":"sds-filter-list-expand__icon--closed-no-anim"))});return s.jsxs("div",{className:"sds-filter-list-expand",children:[i?s.jsxs("div",{onClick:m,onKeyDown:e=>{const s=e.key;"Enter"!=s&&" "!==s||b()},tabIndex:0,role:"button",className:"sds-filter-list-expand__header sds-filter-list-expand__header-clickable","aria-expanded":!!p,"aria-label":c,children:[e,s.jsx("div",{className:"sds-filter-list-expand--icon-container",children:f})]}):s.jsxs("div",{className:"sds-filter-list-expand__header",children:[e,s.jsx("div",{className:"sds-filter-list-expand--button-container",children:s.jsx(t.Button,{onClick:m,title:l,"aria-expanded":p,"aria-label":c,icon:f,iconVariant:"only",size:"small",variant:"transparent",children:l})})]}),s.jsx("div",{className:o.default("sds-filter-list-expand__content",p&&(_?"sds-filter-list-expand__content--open":"sds-filter-list-expand__content--open-no-anim"),!p&&(_?"sds-filter-list-expand__content--closed":"sds-filter-list-expand__content--closed-no-anim")),children:x})]})}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,onExpandToggle:d,onCategoryToggle:r,indeterminate:c,checked:o,count:h,children:_})=>{const u=a.useId(),b=void 0!==h&&h>0;return s.jsx(p,{ariaLabelExpandToggle:e,initialExpanded:t,onExpandToggle:d,header:s.jsxs("div",{className:"sds-filter-list-category",children:[s.jsx(i.CheckboxInput,{className:"sds-filter-list-item__input","aria-describedby":u,label:l?s.jsx(x,{label:e,icon:l}):e,onChange:e=>{r&&r(e.target.checked)},indeterminate:c,checked:o}),b&&s.jsx(n.Badge,{visibility:"strong",className:"sds-filter-list__badge",id:u,children:h})]}),children:s.jsx("div",{className:"sds-filter-list-category__content",children:_})})},exports.FilterListItem=({type:e,label:n,icon:t,value:d,onChange:r,checked:c,count:o})=>{const p=a.useId(),h=t?s.jsx(x,{label:n,icon:t}):n;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:d,checked:c,"aria-describedby":p}),"checkbox"===e&&s.jsx(i.CheckboxInput,{className:"sds-filter-list-item__input",label:h,value:d,onChange:r,checked:c,"aria-describedby":p}),void 0!==o&&s.jsx("div",{className:"sds-filter-list-item__count",id:p,children:o})]})},exports.FilterListSection=({label:e,children:i,expandable:l,count:a})=>{const t=void 0!==a&&a>0,d=s.jsxs("div",{className:r.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(n.Badge,{visibility:"strong",className:"sds-filter-list__badge",children:a})]});return l?s.jsx(p,{header:d,clickableHeader:!0,ariaLabelExpandToggle:e,initialExpanded:l.expanded,onExpandToggle:l.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"),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":"sds-filter-list-expand__content--closed"),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

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":";AASO,IAAM,UAAa,GAAA,CAAC,EAAE,QAAA,EAAU,WAAiC,KAAA;AACtE,EAAA,sCAAQ,KAAI,EAAA,EAAA,SAAA,EAAWA,UAAK,iBAAmB,EAAA,SAAS,GAAI,QAAS,EAAA,CAAA;AACvE;ACHO,IAAM,sBAAsB,CAAC;AAAA,EAClC,IAAA;AAAA,EACA;AACF,CAAgC,KAAA;AAC9B,EACE,uBAAAC,eAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,4BACb,EAAA,QAAA,EAAA;AAAA,oBAAAC,cAAC,CAAA,MAAA,EAAA,EAAK,SAAU,EAAA,kCAAA,EAAoC,QAAK,EAAA,IAAA,EAAA,CAAA;AAAA,oBACzDA,cAAC,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,KAAKC,WAAM,EAAA;AACjB,EAAA,MAAM,YAAY,IAChB,mBAAAD,eAAC,mBAAoB,EAAA,EAAA,KAAA,EAAc,MAAY,CAE/C,GAAA,KAAA;AAGF,EAAA,uBACED,eAAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,sBACZ,EAAA,QAAA,EAAA;AAAA,IAAA,IAAA,KAAS,2BACRC,cAAAA;AAAA,MAACE,mBAAA;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,8BACRF,cAAAA;AAAA,MAACG,yBAAA;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,KACpB;AAAA,IAGD,KAAA,KAAU,0BACTH,cAAAA,CAAC,SAAI,SAAU,EAAA,6BAAA,EAA8B,IAC1C,QACH,EAAA,KAAA,EAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ;AC9CO,SAAS,gBAAiB,CAAA;AAAA,EAC/B,MAAA;AAAA,EACA,eAAkB,GAAA,KAAA;AAAA,EAClB,WAAA;AAAA,EACA,eAAkB,GAAA,KAAA;AAAA,EAClB,cAAA;AAAA,EACA,qBAAA;AAAA,EACA;AACF,CAA0B,EAAA;AACxB,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAII,eAAS,eAAe,CAAA;AACxD,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIA,eAAS,KAAK,CAAA;AAE5C,EAAA,MAAM,WAAW,MAAM;AACrB,IAAA,MAAM,WAAW,CAAC,QAAA;AAClB,IAAA,UAAA,CAAW,IAAI,CAAA;AACf,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,uBACJJ,cAAAA;AAAA,IAACK,uBAAA;AAAA,IAAA;AAAA,MACC,SAAWP,EAAAA,sBAAAA;AAAA,QACT,8BAAA;AAAA,QAEA,QAAA,KACG,UACG,oCACA,GAAA,4CAAA,CAAA;AAAA,QACN,CAAC,QACE,KAAA,OAAA,GACG,sCACA,GAAA,8CAAA;AAAA;AACR;AAAA,GACF;AAGF,EAAA,uBACEC,eAAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,wBACZ,EAAA,QAAA,EAAA;AAAA,IAAA,eAAA,mBACCA,eAAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,OAAS,EAAA,mBAAA;AAAA,QACT,SAAW,EAAA,qBAAA;AAAA,QACX,QAAU,EAAA,CAAA;AAAA,QACV,IAAK,EAAA,QAAA;AAAA,QACL,SAAU,EAAA,yEAAA;AAAA,QACV,eAAA,EAAe,CAAC,CAAC,QAAA;AAAA,QACjB,YAAY,EAAA,qBAAA;AAAA,QAEX,QAAA,EAAA;AAAA,UAAA,MAAA;AAAA,0BACDC,cAAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,0CAA0C,QAAK,EAAA,IAAA,EAAA;AAAA;AAAA;AAAA,KAGhE,mBAAAD,eAAC,CAAA,KAAA,EAAA,EAAI,WAAU,gCACZ,EAAA,QAAA,EAAA;AAAA,MAAA,MAAA;AAAA,sBACDC,cAAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,4CACb,QAAAA,kBAAAA,cAAAA;AAAA,QAACM,gBAAA;AAAA,QAAA;AAAA,UACC,OAAS,EAAA,mBAAA;AAAA,UACT,KAAO,EAAA,WAAA;AAAA,UACP,eAAe,EAAA,QAAA;AAAA,UACf,YAAY,EAAA,qBAAA;AAAA,UACZ,IAAA;AAAA,UACA,WAAY,EAAA,MAAA;AAAA,UACZ,IAAK,EAAA,OAAA;AAAA,UACL,OAAQ,EAAA,aAAA;AAAA,UAEP,QAAA,EAAA;AAAA;AAAA,OAEL,EAAA;AAAA,KACF,EAAA,CAAA;AAAA,oBAGFN,cAAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAWF,EAAAA,sBAAAA;AAAA,UACT,iCAAA;AAAA,UACA,QAAA,KACG,UACG,uCACA,GAAA,+CAAA,CAAA;AAAA,UACN,CAAC,QACE,KAAA,OAAA,GACG,yCACA,GAAA,iDAAA;AAAA,SACR;AAAA,QAEC;AAAA;AAAA;AACH,GACF,EAAA,CAAA;AAEJ;AClGO,IAAM,qBAAqB,CAAC;AAAA,EACjC,KAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,cAAA;AAAA,EACA,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAA+B,KAAA;AAC7B,EAAA,MAAM,KAAKG,WAAM,EAAA;AACjB,EAAM,MAAA,QAAA,GAAW,KAAU,KAAA,MAAA,IAAa,KAAQ,GAAA,CAAA;AAEhD,EAAA,uBACED,cAAAA;AAAA,IAAC,gBAAA;AAAA,IAAA;AAAA,MACC,qBAAuB,EAAA,KAAA;AAAA,MACvB,eAAiB,EAAA,QAAA;AAAA,MACjB,cAAA;AAAA,MACA,MACE,kBAAAD,eAAC,CAAA,KAAA,EAAA,EAAI,WAAU,0BACb,EAAA,QAAA,EAAA;AAAA,wBAAAC,cAAAA;AAAA,UAACG,yBAAAA;AAAA,UAAA;AAAA,YACC,SAAU,EAAA,6BAAA;AAAA,YACV,kBAAkB,EAAA,EAAA;AAAA,YAClB,OACE,IAAO,mBAAAH,eAAC,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,cAAAA;AAAA,UAACO,cAAA;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,QAAAP,kBAAAA,cAAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,qCAAqC,QAAS,EAAA;AAAA;AAAA,GAC/D;AAEJ;ACrDO,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,yBACJD,eAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAWD,EAAAA,UAAAA;AAAA,QACT,yBAAA;AAAA,QACA,UAAc,IAAA;AAAA,OAChB;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAE,cAAC,CAAA,MAAA,EAAA,EAAK,SAAU,EAAA,gCAAA,EAAkC,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,QACvD,QAAA,oBACCA,cAACO,CAAAA,cAAAA,EAAA,EAAM,UAAW,EAAA,QAAA,EAAS,SAAU,EAAA,wBAAA,EAClC,QACH,EAAA,KAAA,EAAA;AAAA;AAAA;AAAA,GAEJ;AAGF,EAAA,OAAO,6BACLP,cAAAA;AAAA,IAAC,gBAAA;AAAA,IAAA;AAAA,MACC,MAAA;AAAA,MACA,eAAe,EAAA,IAAA;AAAA,MACf,qBAAuB,EAAA,KAAA;AAAA,MACvB,iBAAiB,UAAW,CAAA,QAAA;AAAA,MAC5B,gBAAgB,UAAW,CAAA,cAAA;AAAA,MAE1B;AAAA;AAAA,GACH,mBAEAD,eAAAA,CAAAS,mBACG,EAAA,EAAA,QAAA,EAAA;AAAA,IAAA,MAAA;AAAA,IACA;AAAA,GACH,EAAA,CAAA;AAEJ","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 iconLabel = icon ? (\n    <FilterListIconLabel label={label} icon={icon} />\n  ) : (\n    label\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\n      {count !== undefined && (\n        <div className=\"sds-filter-list-item__count\" id={id}>\n          {count}\n        </div>\n      )}\n    </div>\n  );\n};\n","import { Button } from \"@sikt/sds-button\";\nimport { ExpandShowIcon } from \"@sikt/sds-icons\";\nimport clsx from \"clsx\";\nimport { ReactNode, useState } from \"react\";\nimport \"./filter-list-expand.pcss\";\n\ninterface FilterListExpandProps {\n  header: ReactNode;\n  clickableHeader?: boolean;\n  buttonTitle?: string;\n  initialExpanded?: boolean;\n  onExpandToggle?: (expanded: boolean) => void;\n  ariaLabelExpandToggle: string;\n  children: ReactNode;\n}\n\nexport function FilterListExpand({\n  header,\n  clickableHeader = false,\n  buttonTitle,\n  initialExpanded = false,\n  onExpandToggle,\n  ariaLabelExpandToggle,\n  children,\n}: FilterListExpandProps) {\n  const [expanded, setExpanded] = useState(initialExpanded);\n  const [animate, setAnimate] = useState(false);\n\n  const onToggle = () => {\n    const newState = !expanded;\n    setAnimate(true);\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\n        expanded &&\n          (animate\n            ? \"sds-filter-list-expand__icon--open\"\n            : \"sds-filter-list-expand__icon--open-no-anim\"),\n        !expanded &&\n          (animate\n            ? \"sds-filter-list-expand__icon--closed\"\n            : \"sds-filter-list-expand__icon--closed-no-anim\"),\n      )}\n    />\n  );\n\n  return (\n    <div className=\"sds-filter-list-expand\">\n      {clickableHeader ? (\n        <div\n          onClick={handleToggleByClick}\n          onKeyDown={handleToggleByKeyDown}\n          tabIndex={0}\n          role=\"button\"\n          className=\"sds-filter-list-expand__header sds-filter-list-expand__header-clickable\"\n          aria-expanded={!!expanded}\n          aria-label={ariaLabelExpandToggle}\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\">\n          {header}\n          <div className=\"sds-filter-list-expand--button-container\">\n            <Button\n              onClick={handleToggleByClick}\n              title={buttonTitle}\n              aria-expanded={expanded}\n              aria-label={ariaLabelExpandToggle}\n              icon={icon as ReactNode}\n              iconVariant=\"only\"\n              size=\"small\"\n              variant=\"transparent\"\n            >\n              {buttonTitle}\n            </Button>\n          </div>\n        </div>\n      )}\n\n      <div\n        className={clsx(\n          \"sds-filter-list-expand__content\",\n          expanded &&\n            (animate\n              ? \"sds-filter-list-expand__content--open\"\n              : \"sds-filter-list-expand__content--open-no-anim\"),\n          !expanded &&\n            (animate\n              ? \"sds-filter-list-expand__content--closed\"\n              : \"sds-filter-list-expand__content--closed-no-anim\"),\n        )}\n      >\n        {children}\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  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  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={label}\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      ariaLabelExpandToggle={label}\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","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\n            ? \"sds-filter-list-expand__content--open\"\n            : \"sds-filter-list-expand__content--closed\",\n        )}\n        role=\"region\"\n        id={`${id}-content`}\n        aria-labelledby={`${id}-title`}\n        hidden={!expanded}\n      >\n        {children}\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"]}

package/dist/index.mjs

@@ -1 +1 @@
-import{clsx as e}from"clsx/lite";import{jsx as i,jsxs as s,Fragment as l}from"react/jsx-runtime";import{CheckboxInput as a}from"@sikt/sds-checkbox";import{RadioInput as n}from"@sikt/sds-radio";import{useId as t,useState as d}from"react";import{Badge as r}from"@sikt/sds-badge";import{Button as c}from"@sikt/sds-button";import{ExpandShowIcon as o}from"@sikt/sds-icons";import p,{clsx as m}from"clsx";var _=({children:s,className:l})=>i("div",{className:e("sds-filter-list",l),children:s}),h=({icon:e,label:l})=>s("div",{className:"sds-filter-list-icon-label",children:[i("span",{className:"sds-filter-list-icon-label__icon",children:e}),i("span",{children:l})]}),f=({type:e,label:l,icon:d,value:r,onChange:c,checked:o,count:p})=>{const m=t(),_=d?i(h,{label:l,icon:d}):l;return s("div",{className:"sds-filter-list-item",children:["radio"===e&&i(n,{className:"sds-filter-list-item__input",label:_,value:r,checked:o,"aria-describedby":m}),"checkbox"===e&&i(a,{className:"sds-filter-list-item__input",label:_,value:r,onChange:c,checked:o,"aria-describedby":m}),void 0!==p&&i("div",{className:"sds-filter-list-item__count",id:m,children:p})]})};function x({header:e,clickableHeader:l=!1,buttonTitle:a,initialExpanded:n=!1,onExpandToggle:t,ariaLabelExpandToggle:r,children:m}){const[_,h]=d(n),[f,x]=d(!1),b=()=>{const e=!_;x(!0),h(e),t&&t(e)},g=()=>{b()},v=i(o,{className:p("sds-filter-list-expand__icon",_&&(f?"sds-filter-list-expand__icon--open":"sds-filter-list-expand__icon--open-no-anim"),!_&&(f?"sds-filter-list-expand__icon--closed":"sds-filter-list-expand__icon--closed-no-anim"))});return s("div",{className:"sds-filter-list-expand",children:[s("div",l?{onClick:g,onKeyDown:e=>{const i=e.key;"Enter"!=i&&" "!==i||b()},tabIndex:0,role:"button",className:"sds-filter-list-expand__header sds-filter-list-expand__header-clickable","aria-expanded":!!_,"aria-label":r,children:[e,i("div",{className:"sds-filter-list-expand--icon-container",children:v})]}:{className:"sds-filter-list-expand__header",children:[e,i("div",{className:"sds-filter-list-expand--button-container",children:i(c,{onClick:g,title:a,"aria-expanded":_,"aria-label":r,icon:v,iconVariant:"only",size:"small",variant:"transparent",children:a})})]}),i("div",{className:p("sds-filter-list-expand__content",_&&(f?"sds-filter-list-expand__content--open":"sds-filter-list-expand__content--open-no-anim"),!_&&(f?"sds-filter-list-expand__content--closed":"sds-filter-list-expand__content--closed-no-anim")),children:m})]})}var b=({label:e,icon:l,expanded:n,onExpandToggle:d,onCategoryToggle:c,indeterminate:o,checked:p,count:m,children:_})=>{const f=t(),b=void 0!==m&&m>0;return i(x,{ariaLabelExpandToggle:e,initialExpanded:n,onExpandToggle:d,header:s("div",{className:"sds-filter-list-category",children:[i(a,{className:"sds-filter-list-item__input","aria-describedby":f,label:l?i(h,{label:e,icon:l}):e,onChange:e=>{c&&c(e.target.checked)},indeterminate:o,checked:p}),b&&i(r,{visibility:"strong",className:"sds-filter-list__badge",id:f,children:m})]}),children:i("div",{className:"sds-filter-list-category__content",children:_})})},g=({label:e,children:a,expandable:n,count:t})=>{const d=void 0!==t&&t>0,c=s("div",{className:m("sds-filter-list-section",n&&"sds-filter-list-section--expandable"),children:[i("span",{className:"sds-filter-list-section__label",children:e}),d&&i(r,{visibility:"strong",className:"sds-filter-list__badge",children:t})]});return n?i(x,{header:c,clickableHeader:!0,ariaLabelExpandToggle:e,initialExpanded:n.expanded,onExpandToggle:n.onExpandToggle,children:a}):s(l,{children:[c,a]})};export{_ as FilterList,b as FilterListCategory,f as FilterListItem,g as FilterListSection};//# sourceMappingURL=index.mjs.map
+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 p,{clsx as m}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:p})=>{const m=t(),h=void 0!==p?"".concat(l," (").concat(p,")"):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":m}),"checkbox"===e&&i(s,{className:"sds-filter-list-item__input",label:x,value:c,onChange:r,checked:o,"aria-describedby":m})]})};function f({header:e,clickableHeader:l=!1,initialExpanded:s=!1,onExpandToggle:n,ariaLabelExpandToggle:c,children:m}){const h=t(),[b,x]=d(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 a("div",{className:"sds-filter-list-expand",children:[a("div",l?{className:"sds-filter-list-expand__header sds-filter-list-expand__header-clickable",onClick:_,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: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:c})]}),i("div",{className:p("sds-filter-list-expand__content",b?"sds-filter-list-expand__content--open":"sds-filter-list-expand__content--closed"),role:"region",id:"".concat(h,"-content"),"aria-labelledby":"".concat(h,"-title"),hidden:!b,children:m})]})}var _=({label:e,icon:l,expanded:n,ariaLabelExpandToggle:d,onExpandToggle:r,onCategoryToggle:o,indeterminate:p,checked:m,count:h,children:x})=>{const _=t(),g=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":_,label:l?i(b,{label:e,icon:l}):e,onChange:e=>{o&&o(e.target.checked)},indeterminate:p,checked:m}),g&&i(c,{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:t})=>{const d=void 0!==t&&t>0,r=a("div",{className:m("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,_ 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","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: 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 iconLabel = icon ? (\n    <FilterListIconLabel label={label} icon={icon} />\n  ) : (\n    label\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\n      {count !== undefined && (\n        <div className=\"sds-filter-list-item__count\" id={id}>\n          {count}\n        </div>\n      )}\n    </div>\n  );\n};\n","import { Button } from \"@sikt/sds-button\";\nimport { ExpandShowIcon } from \"@sikt/sds-icons\";\nimport clsx from \"clsx\";\nimport { ReactNode, useState } from \"react\";\nimport \"./filter-list-expand.pcss\";\n\ninterface FilterListExpandProps {\n  header: ReactNode;\n  clickableHeader?: boolean;\n  buttonTitle?: string;\n  initialExpanded?: boolean;\n  onExpandToggle?: (expanded: boolean) => void;\n  ariaLabelExpandToggle: string;\n  children: ReactNode;\n}\n\nexport function FilterListExpand({\n  header,\n  clickableHeader = false,\n  buttonTitle,\n  initialExpanded = false,\n  onExpandToggle,\n  ariaLabelExpandToggle,\n  children,\n}: FilterListExpandProps) {\n  const [expanded, setExpanded] = useState(initialExpanded);\n  const [animate, setAnimate] = useState(false);\n\n  const onToggle = () => {\n    const newState = !expanded;\n    setAnimate(true);\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\n        expanded &&\n          (animate\n            ? \"sds-filter-list-expand__icon--open\"\n            : \"sds-filter-list-expand__icon--open-no-anim\"),\n        !expanded &&\n          (animate\n            ? \"sds-filter-list-expand__icon--closed\"\n            : \"sds-filter-list-expand__icon--closed-no-anim\"),\n      )}\n    />\n  );\n\n  return (\n    <div className=\"sds-filter-list-expand\">\n      {clickableHeader ? (\n        <div\n          onClick={handleToggleByClick}\n          onKeyDown={handleToggleByKeyDown}\n          tabIndex={0}\n          role=\"button\"\n          className=\"sds-filter-list-expand__header sds-filter-list-expand__header-clickable\"\n          aria-expanded={!!expanded}\n          aria-label={ariaLabelExpandToggle}\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\">\n          {header}\n          <div className=\"sds-filter-list-expand--button-container\">\n            <Button\n              onClick={handleToggleByClick}\n              title={buttonTitle}\n              aria-expanded={expanded}\n              aria-label={ariaLabelExpandToggle}\n              icon={icon as ReactNode}\n              iconVariant=\"only\"\n              size=\"small\"\n              variant=\"transparent\"\n            >\n              {buttonTitle}\n            </Button>\n          </div>\n        </div>\n      )}\n\n      <div\n        className={clsx(\n          \"sds-filter-list-expand__content\",\n          expanded &&\n            (animate\n              ? \"sds-filter-list-expand__content--open\"\n              : \"sds-filter-list-expand__content--open-no-anim\"),\n          !expanded &&\n            (animate\n              ? \"sds-filter-list-expand__content--closed\"\n              : \"sds-filter-list-expand__content--closed-no-anim\"),\n        )}\n      >\n        {children}\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  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  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={label}\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      ariaLabelExpandToggle={label}\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","useId","clsx","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: 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\n            ? \"sds-filter-list-expand__content--open\"\n            : \"sds-filter-list-expand__content--closed\",\n        )}\n        role=\"region\"\n        id={`${id}-content`}\n        aria-labelledby={`${id}-title`}\n        hidden={!expanded}\n      >\n        {children}\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"]}

package/package.json

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