@sikt/sds-filter-list 0.1.1 → 0.3.0

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 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.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
+
+- **filter-list:** hover background ([1077177](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/1077177018f1a8ca4559cfeb88408b7e1fc6e6dd))
+
+### Bug Fixes
+
+- **filter-list:** export props ([47e2856](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/47e285610d815da57da14dfb64ec9f2cc45eac8a))
+
+## [0.2.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-filter-list@0.1.1...@sikt/sds-filter-list@0.2.0) (2025-05-21)
+
+### Bug Fixes
+
+- **filter-list:** badge count style ([c4443ad](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/c4443ad23b983c574cb0115172cc952ccf1adc3e))
+- **filter-list:** label stretch full width ([5b49f4e](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/5b49f4ea1e461aab489430d1afd1f7600dbf6426))
+
 ## [0.1.1](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-filter-list@0.1.0...@sikt/sds-filter-list@0.1.1) (2025-05-21)
 
 ### Bug Fixes

package/dist/index.css

@@ -1,38 +1,13 @@
 /* src/FilterList/filter-list.pcss */
 .sds-filter-list {
-  display: flex;
-  flex-direction: column;
-  padding: var(--sds-space-padding-tiny);
   background: var(--sds-color-layout-background-default);
-}
-
-/* src/FilterListItem/filter-list-item.pcss */
-.sds-filter-list-item {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--sds-space-gap-tiny);
-  border-radius: var(--sds-space-border-radius-small);
-  padding-right: var(--sds-space-padding-small);
-  width: 100%;
-}
-.sds-filter-list-item:hover,
-.sds-filter-list-item:focus-visible {
-}
-.sds-filter-list-item__input {
   display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  gap: var(--sds-space-gap-tiny);
+  flex-direction: column;
+  padding: var(--sds-space-padding-small);
 }
-.sds-filter-list-item__count {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-end;
-  padding-right: var(--sds-space-padding-tiny);
+.sds-filter-list__badge {
+  justify-content: center;
+  min-width: var(--sds-base-size-m1);
 }
 
 /* src/components/FilterListIconLabel/filter-list-icon-label.pcss */
@@ -50,55 +25,66 @@
   justify-content: center;
 }
 
-/* src/FilterListCategory/filter-list-category.pcss */
-.sds-filter-list-category__header {
+/* src/FilterListItem/filter-list-item.pcss */
+.sds-filter-list-item {
+  --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;
-  align-items: center;
-  justify-content: space-between;
   gap: var(--sds-space-gap-tiny);
+  justify-content: space-between;
+  padding-right: var(--sds-space-padding-small);
   width: 100%;
 }
-.sds-filter-list-category__header-label {
+.sds-filter-list-item:has(.sds-filter-list-item__input:hover) {
+  --filter-list-item-background-color: var( --sds-color-interaction-neutral-transparent-highlight );
+}
+.sds-filter-list-item__input {
+  flex-basis: 100%;
+}
+.sds-filter-list-item__count {
+  align-items: center;
   display: flex;
   flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  gap: var(--sds-space-gap-tiny);
-}
-.sds-filter-list-category__content {
-  padding-left: var(--sds-space-padding-small);
+  justify-content: flex-end;
 }
 
 /* src/components/FilterListExpand/filter-list-expand.pcss */
 .sds-filter-list-expand {
   display: flex;
-  width: 100%;
-  justify-content: flex-start;
   flex-direction: column;
+  justify-content: flex-start;
+  width: 100%;
 }
 .sds-filter-list-expand__header {
+  align-items: center;
+  border-radius: var(--sds-space-border-radius-small);
   display: flex;
-  width: 100%;
   flex-direction: row;
-  justify-content: space-between;
   gap: var(--sds-space-gap-small);
-  border-radius: var(--sds-space-border-radius-small);
-  padding-right: var(--sds-space-padding-minimal);
+  justify-content: space-between;
+  width: 100%;
 }
 .sds-filter-list-expand__header-clickable:hover,
 .sds-filter-list-expand__header-clickable:focus-visible {
+  background: var(--sds-color-interaction-neutral-transparent-highlight);
   cursor: pointer;
-  background: var(--sds-color-interaction-primary-subtle-highlight);
+}
+.sds-filter-list-expand__header-clickable:focus-visible {
+  outline: var(--sds-focus-outline);
 }
 .sds-filter-list-expand--button-container,
 .sds-filter-list-expand--icon-container {
+  align-items: center;
   display: flex;
   justify-content: center;
-  align-items: center;
 }
 .sds-filter-list-expand--icon-container {
   font-size: var(--sds-typography-fontsize-700);
+  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 {
@@ -178,20 +164,41 @@
   }
 }
 
-/* src/FilterListSection/filter-list-section.pcss */
-.sds-filter-list-section__header {
+/* 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%;
-  padding: var(--sds-space-padding-small) 0;
 }
-.sds-filter-list-section__header--expandable {
+.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);
 }
-.sds-filter-list-section__header--default {
-  padding: var(--sds-space-padding-small);
+
+/* src/FilterListSection/filter-list-section.pcss */
+.sds-filter-list-section {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: var(--sds-space-gap-tiny);
+  justify-content: space-between;
+  padding: var(--sds-space-padding-minimal) var(--sds-space-padding-minimal) var(--sds-space-padding-minimal) var(--sds-space-padding-small);
+  width: 100%;
+}
+.sds-filter-list-section--expandable {
+  padding-right: 0;
+}
+.sds-filter-list-section__label {
+  font-size: var(--sds-typography-label-default-fontsize);
+  font-weight: var(--sds-typography-label-default-fontweight);
+  line-height: var(--sds-typography-label-default-lineheight);
 }
 /*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/FilterList/filter-list.pcss","../src/FilterListItem/filter-list-item.pcss","../src/components/FilterListIconLabel/filter-list-icon-label.pcss","../src/FilterListCategory/filter-list-category.pcss","../src/components/FilterListExpand/filter-list-expand.pcss","../src/FilterListSection/filter-list-section.pcss"],"sourcesContent":[".sds-filter-list {\n  display: flex;\n  flex-direction: column;\n  padding: var(--sds-space-padding-tiny);\n  background: var(--sds-color-layout-background-default);\n}\n",".sds-filter-list-item {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--sds-space-gap-tiny);\n  border-radius: var(--sds-space-border-radius-small);\n  padding-right: var(--sds-space-padding-small);\n  width: 100%;\n}\n\n  .sds-filter-list-item:hover,\n  .sds-filter-list-item:focus-visible {\n    /* todo - uncomment when clickable */\n\n    /* background: var(--sds-color-interaction-primary-subtle-highlight); */\n  }\n\n  .sds-filter-list-item__input {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-start;\n    gap: var(--sds-space-gap-tiny);\n  }\n\n  .sds-filter-list-item__count {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-end;\n    padding-right: var(--sds-space-padding-tiny);\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-category__header {\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__header-label {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      justify-content: flex-start;\n      gap: var(--sds-space-gap-tiny);\n    }\n  .sds-filter-list-category__content {\n    padding-left: var(--sds-space-padding-small);\n  }\n",".sds-filter-list-expand {\n  display: flex;\n  width: 100%;\n  justify-content: flex-start;\n  flex-direction: column;\n}\n\n  .sds-filter-list-expand__header {\n    display: flex;\n    width: 100%;\n    flex-direction: row;\n    justify-content: space-between;\n    gap: var(--sds-space-gap-small);\n    border-radius: var(--sds-space-border-radius-small);\n    padding-right: var(--sds-space-padding-minimal);\n  }\n\n  .sds-filter-list-expand__header-clickable:hover,\n      .sds-filter-list-expand__header-clickable:focus-visible {\n        cursor: pointer;\n        background: var(--sds-color-interaction-primary-subtle-highlight);\n      }\n\n  .sds-filter-list-expand--button-container,\n  .sds-filter-list-expand--icon-container {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .sds-filter-list-expand--icon-container {\n    font-size: var(--sds-typography-fontsize-700);\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-section__header {\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    padding: var(--sds-space-padding-small) 0;\n  }\n\n    .sds-filter-list-section__header--expandable {\n      padding-left: var(--sds-space-padding-small);\n    }\n\n    .sds-filter-list-section__header--default {\n      padding: var(--sds-space-padding-small);\n    }\n"],"mappings":";AAAA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,WAAS,IAAI;AACb,cAAY,IAAI;AAClB;;;ACLA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,eAAa;AACb,mBAAiB;AACjB,OAAK,IAAI;AACT,iBAAe,IAAI;AACnB,iBAAe,IAAI;AACnB,SAAO;AACT;AAEE,CAXD,oBAWsB;AACrB,CAZD,oBAYsB;AAIrB;AAEA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,eAAa;AACb,mBAAiB;AACjB,OAAK,IAAI;AACX;AAEA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,eAAa;AACb,mBAAiB;AACjB,iBAAe,IAAI;AACrB;;;AChCF,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;AACG,WAAS;AACT,kBAAgB;AAChB,eAAa;AACb,mBAAiB;AACjB,OAAK,IAAI;AACT,SAAO;AACT;AAEE,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,eAAa;AACb,mBAAiB;AACjB,OAAK,IAAI;AACX;AACF,CAAC;AACC,gBAAc,IAAI;AACpB;;;AClBF,CAAC;AACC,WAAS;AACT,SAAO;AACP,mBAAiB;AACjB,kBAAgB;AAClB;AAEE,CAAC;AACC,WAAS;AACT,SAAO;AACP,kBAAgB;AAChB,mBAAiB;AACjB,OAAK,IAAI;AACT,iBAAe,IAAI;AACnB,iBAAe,IAAI;AACrB;AAEA,CAAC,wCAAwC;AACrC,CADH,wCAC4C;AACvC,UAAQ;AACR,cAAY,IAAI;AAClB;AAEJ,CAAC;AACD,CAAC;AACC,WAAS;AACT,mBAAiB;AACjB,eAAa;AACf;AAEA,CANC;AAOC,aAAW,IAAI;AACjB;AAEA,CAAC;AACC,CAAC;AACC,UAAQ;AACV;AAEF,CAAC;AACC,CAAC;AACC,UAAQ;AACV;AAEF,CATG;AAUD,CALC;AAMC,aAAW,IAAI,wCAAwC;AACzD;AAEF,CAdG;AAeC,kBAAgB;AAClB;AAEF,CAbG;AAcC,kBAAgB;AAClB;AAEF,WAPoB;AAQhB;AACE,YAAQ;AACV;AAEA;AACE,YAAQ;AACV;AACF;AAEF,WAboB;AAchB;AACE,YAAQ;AACV;AAEA;AACE,YAAQ;AACV;AACF;AAEF,CAAC;AACC,YAAU;AACV,cAAY;AACd;AAEA,CAAC;AACC,CAAC;AACC,cAAY;AACZ,WAAS;AACX;AAEF,CAAC;AACC,CAAC;AACC,WAAS;AACX;AAEF,CAVG;AAWD,CALC;AAMC,aAAW,IAAI,wCAAwC;AACzD;AAEF,CAfG;AAgBC,kBAAgB;AAClB;AAEF,CAbG;AAcC,kBAAgB;AAClB;AAEF,WAPoB;AAQhB;AACE,gBAAY;AACZ,aAAS;AACX;AAEA;AACE,gBAAY;AACZ,aAAS;AACX;AACF;AAEF,WAfoB;AAgBhB;AACE,gBAAY;AACZ,aAAS;AACX;AAEA;AAEE,gBAAY;AACZ,aAAS;AACX;AACF;;;ACjIJ,CAAC;AACG,WAAS;AACT,kBAAgB;AAChB,eAAa;AACb,mBAAiB;AACjB,OAAK,IAAI;AACT,SAAO;AACP,WAAS,IAAI,2BAA2B;AAC1C;AAEE,CAAC;AACC,gBAAc,IAAI;AACpB;AAEA,CAAC;AACC,WAAS,IAAI;AACf;","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",".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":[]}

package/dist/index.d.mts

@@ -42,4 +42,4 @@ interface FilterListSectionProps {
 }
 declare const FilterListSection: ({ label, children, expandable, count, }: FilterListSectionProps) => react_jsx_runtime.JSX.Element;
 
-export { FilterList, FilterListCategory, FilterListItem, type FilterListItemProps, type FilterListProps, FilterListSection };
+export { FilterList, FilterListCategory, type FilterListCategoryProps, FilterListItem, type FilterListItemProps, type FilterListProps, FilterListSection, type FilterListSectionProps };

package/dist/index.d.ts

@@ -42,4 +42,4 @@ interface FilterListSectionProps {
 }
 declare const FilterListSection: ({ label, children, expandable, count, }: FilterListSectionProps) => react_jsx_runtime.JSX.Element;
 
-export { FilterList, FilterListCategory, FilterListItem, type FilterListItemProps, type FilterListProps, FilterListSection };
+export { FilterList, FilterListCategory, type FilterListCategoryProps, FilterListItem, type FilterListItemProps, type FilterListProps, FilterListSection, type FilterListSectionProps };

package/dist/index.js

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

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\";\n\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\";\n\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\n      className=\"sds-filter-list-icon-label\"\n      data-testid=\"filter-list-icon-label\"\n    >\n      <span className=\"sds-filter-list-icon-label__icon\">{icon}</span>\n      <span>{label}</span>\n    </div>\n  );\n};\n","import \"./filter-list-item.pcss\";\nimport { CheckboxInput } from \"@sikt/sds-checkbox\";\nimport { RadioInput } from \"@sikt/sds-radio\";\nimport { ChangeEvent, ReactElement, useId } from \"react\";\nimport { FilterListIconLabel } from \"../components/FilterListIconLabel/FilterListIconLabel\";\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      <div className=\"sds-filter-list-item__input\">\n        {type === \"radio\" && (\n          <RadioInput\n            tabIndex={0}\n            data-testid=\"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            tabIndex={0}\n            data-testid=\"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      {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\";\n\nimport \"./filter-list-expand.pcss\";\nimport { ReactNode, useState } from \"react\";\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          data-testid=\"toggle-expand-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              tabIndex={0}\n              onClick={handleToggleByClick}\n              className=\"sds-filter-list-expand__button\"\n              data-testid=\"toggle-expand-button\"\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        data-testid=\"content\"\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 \"./filter-list-category.pcss\";\nimport { CheckboxInput } from \"@sikt/sds-checkbox\";\nimport { ReactNode, useId } from \"react\";\nimport { FilterListExpand } from \"../components/FilterListExpand/FilterListExpand\";\nimport { FilterListIconLabel } from \"../components/FilterListIconLabel/FilterListIconLabel\";\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\n  return (\n    <FilterListExpand\n      ariaLabelExpandToggle={label}\n      initialExpanded={expanded}\n      onExpandToggle={onExpandToggle}\n      header={\n        <div className=\"sds-filter-list-category__header\">\n          <div className=\"sds-filter-list-category__header-label\">\n            <CheckboxInput\n              tabIndex={0}\n              data-testid=\"filter-list-category_check\"\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          </div>\n          {count !== undefined && count > 0 ? (\n            <Badge id={id} visibility=\"strong\">\n              {count}\n            </Badge>\n          ) : (\n            \"\"\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, useId } from \"react\";\n\nimport \"./filter-list-section.pcss\";\nimport { FilterListExpand } from \"../components/FilterListExpand/FilterListExpand\";\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 id = useId();\n\n  const header = (\n    <div\n      aria-describedby={id}\n      data-testid=\"filter-list-section-header\"\n      className={clsx(\n        \"sds-filter-list-section__header\",\n        expandable\n          ? \"sds-filter-list-section__header--expandable\"\n          : \"sds-filter-list-section__header--default\",\n      )}\n    >\n      <span className=\"sds-typography--strong\">{label}</span>\n\n      {count !== undefined && count > 0 ? (\n        <Badge visibility=\"strong\" data-testid=\"header-badge\" id={id}>\n          {count}\n        </Badge>\n      ) : (\n        \"\"\n      )}\n    </div>\n  );\n\n  return (\n    <div>\n      {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    </div>\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 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"]}

package/dist/index.mjs

@@ -1 +1 @@
-import{clsx as e}from"clsx/lite";import{jsx as i,jsxs as t,Fragment as a}from"react/jsx-runtime";import{CheckboxInput as l}from"@sikt/sds-checkbox";import{RadioInput as s}from"@sikt/sds-radio";import{useId as d,useState as n}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 h}from"clsx";var m=({children:t,className:a})=>i("div",{className:e("sds-filter-list",a),children:t}),b=({icon:e,label:a})=>t("div",{className:"sds-filter-list-icon-label","data-testid":"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:n,value:r,onChange:c,checked:o,count:p})=>{const h=d(),m=n?i(b,{label:a,icon:n}):a;return t("div",{className:"sds-filter-list-item",children:[t("div",{className:"sds-filter-list-item__input",children:["radio"===e&&i(s,{tabIndex:0,"data-testid":"filter-list-item-input",label:m,value:r,checked:o,"aria-describedby":h}),"checkbox"===e&&i(l,{tabIndex:0,"data-testid":"filter-list-item-input",label:m,value:r,onChange:c,checked:o,"aria-describedby":h})]}),void 0!==p&&i("div",{className:"sds-filter-list-item__count",id:h,children:p})]})};function _({header:e,clickableHeader:a=!1,buttonTitle:l,initialExpanded:s=!1,onExpandToggle:d,ariaLabelExpandToggle:r,children:h}){const[m,b]=n(s),[x,_]=n(!1),f=()=>{const e=!m;_(!0),b(e),d&&d(e)},g=()=>{f()},v=i(o,{className:p("sds-filter-list-expand__icon",m&&(x?"sds-filter-list-expand__icon--open":"sds-filter-list-expand__icon--open-no-anim"),!m&&(x?"sds-filter-list-expand__icon--closed":"sds-filter-list-expand__icon--closed-no-anim"))});return t("div",{className:"sds-filter-list-expand",children:[t("div",a?{onClick:g,onKeyDown:e=>{const i=e.key;"Enter"!=i&&" "!==i||f()},tabIndex:0,role:"button","data-testid":"toggle-expand-button",className:"sds-filter-list-expand__header sds-filter-list-expand__header-clickable","aria-expanded":!!m,"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,{tabIndex:0,onClick:g,className:"sds-filter-list-expand__button","data-testid":"toggle-expand-button",title:l,"aria-expanded":m,"aria-label":r,icon:v,iconVariant:"only",size:"small",variant:"transparent",children:l})})]}),i("div",{"data-testid":"content",className:p("sds-filter-list-expand__content",m&&(x?"sds-filter-list-expand__content--open":"sds-filter-list-expand__content--open-no-anim"),!m&&(x?"sds-filter-list-expand__content--closed":"sds-filter-list-expand__content--closed-no-anim")),children:h})]})}var f=({label:e,icon:a,expanded:s,onExpandToggle:n,onCategoryToggle:c,indeterminate:o,checked:p,count:h,children:m})=>{const x=d();return i(_,{ariaLabelExpandToggle:e,initialExpanded:s,onExpandToggle:n,header:t("div",{className:"sds-filter-list-category__header",children:[i("div",{className:"sds-filter-list-category__header-label",children:i(l,{tabIndex:0,"data-testid":"filter-list-category_check","aria-describedby":x,label:a?i(b,{label:e,icon:a}):e,onChange:e=>{c&&c(e.target.checked)},indeterminate:o,checked:p})}),void 0!==h&&h>0?i(r,{id:x,visibility:"strong",children:h}):""]}),children:i("div",{className:"sds-filter-list-category__content",children:m})})},g=({label:e,children:l,expandable:s,count:n})=>{const c=d(),o=t("div",{"aria-describedby":c,"data-testid":"filter-list-section-header",className:h("sds-filter-list-section__header",s?"sds-filter-list-section__header--expandable":"sds-filter-list-section__header--default"),children:[i("span",{className:"sds-typography--strong",children:e}),void 0!==n&&n>0?i(r,{visibility:"strong","data-testid":"header-badge",id:c,children:n}):""]});return i("div",{children:s?i(_,{header:o,clickableHeader:!0,ariaLabelExpandToggle:e,initialExpanded:s.expanded,onExpandToggle:s.onExpandToggle,children:l}):t(a,{children:[o,l]})})};export{m as FilterList,f as FilterListCategory,x as FilterListItem,g as FilterListSection};//# sourceMappingURL=index.mjs.map
+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

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\";\n\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\";\n\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\n      className=\"sds-filter-list-icon-label\"\n      data-testid=\"filter-list-icon-label\"\n    >\n      <span className=\"sds-filter-list-icon-label__icon\">{icon}</span>\n      <span>{label}</span>\n    </div>\n  );\n};\n","import \"./filter-list-item.pcss\";\nimport { CheckboxInput } from \"@sikt/sds-checkbox\";\nimport { RadioInput } from \"@sikt/sds-radio\";\nimport { ChangeEvent, ReactElement, useId } from \"react\";\nimport { FilterListIconLabel } from \"../components/FilterListIconLabel/FilterListIconLabel\";\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      <div className=\"sds-filter-list-item__input\">\n        {type === \"radio\" && (\n          <RadioInput\n            tabIndex={0}\n            data-testid=\"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            tabIndex={0}\n            data-testid=\"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      {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\";\n\nimport \"./filter-list-expand.pcss\";\nimport { ReactNode, useState } from \"react\";\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          data-testid=\"toggle-expand-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              tabIndex={0}\n              onClick={handleToggleByClick}\n              className=\"sds-filter-list-expand__button\"\n              data-testid=\"toggle-expand-button\"\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        data-testid=\"content\"\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 \"./filter-list-category.pcss\";\nimport { CheckboxInput } from \"@sikt/sds-checkbox\";\nimport { ReactNode, useId } from \"react\";\nimport { FilterListExpand } from \"../components/FilterListExpand/FilterListExpand\";\nimport { FilterListIconLabel } from \"../components/FilterListIconLabel/FilterListIconLabel\";\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\n  return (\n    <FilterListExpand\n      ariaLabelExpandToggle={label}\n      initialExpanded={expanded}\n      onExpandToggle={onExpandToggle}\n      header={\n        <div className=\"sds-filter-list-category__header\">\n          <div className=\"sds-filter-list-category__header-label\">\n            <CheckboxInput\n              tabIndex={0}\n              data-testid=\"filter-list-category_check\"\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          </div>\n          {count !== undefined && count > 0 ? (\n            <Badge id={id} visibility=\"strong\">\n              {count}\n            </Badge>\n          ) : (\n            \"\"\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, useId } from \"react\";\n\nimport \"./filter-list-section.pcss\";\nimport { FilterListExpand } from \"../components/FilterListExpand/FilterListExpand\";\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 id = useId();\n\n  const header = (\n    <div\n      aria-describedby={id}\n      data-testid=\"filter-list-section-header\"\n      className={clsx(\n        \"sds-filter-list-section__header\",\n        expandable\n          ? \"sds-filter-list-section__header--expandable\"\n          : \"sds-filter-list-section__header--default\",\n      )}\n    >\n      <span className=\"sds-typography--strong\">{label}</span>\n\n      {count !== undefined && count > 0 ? (\n        <Badge visibility=\"strong\" data-testid=\"header-badge\" id={id}>\n          {count}\n        </Badge>\n      ) : (\n        \"\"\n      )}\n    </div>\n  );\n\n  return (\n    <div>\n      {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    </div>\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: 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"]}

package/package.json

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