@sikt/sds-filter-list 0.6.0 → 0.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/dist/index.css +1 -0
- package/dist/index.css.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
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.
|
|
4
4
|
|
|
5
|
+
## [0.6.1](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-filter-list@0.6.0...@sikt/sds-filter-list@0.6.1) (2026-03-03)
|
|
6
|
+
|
|
7
|
+
### Bug Fixes
|
|
8
|
+
|
|
9
|
+
- **filter-list:** align label count ([25c4443](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/25c4443d15e1d4040f9d398202aa2d4b7d23da63))
|
|
10
|
+
- **filter-list:** change notification color ([5e6021b](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/5e6021b6aeca1218982e4020d45a97dec8daf126))
|
|
11
|
+
|
|
5
12
|
## [0.6.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-filter-list@0.5.5...@sikt/sds-filter-list@0.6.0) (2026-01-28)
|
|
6
13
|
|
|
7
14
|
### ⚠ BREAKING CHANGES
|
package/dist/index.css
CHANGED
package/dist/index.css.map
CHANGED
|
@@ -1 +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 display: flex;\n flex-direction: column;\n padding: var(--sds-space-padding-small);\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 white-space: nowrap;\n border-width: 0;\n }\n",".sds-filter-list-icon-label {\n align-items: center;\n display: flex;\n flex-direction: row;\n gap: var(--sds-space-gap-tiny);\n justify-content: flex-start;\n}\n\n .sds-filter-list-icon-label__icon {\n align-items: center;\n display: flex;\n font-size: var(--sds-typography-fontsize-700);\n justify-content: center;\n }\n",".sds-filter-list-item {\n --filter-list-item-background-color: transparent;\n\n align-items: center;\n background: var(--filter-list-item-background-color);\n border-radius: var(--sds-space-border-radius-small);\n display: flex;\n flex-direction: row;\n gap: var(--sds-space-gap-tiny);\n justify-content: space-between;\n padding-right: var(--sds-space-padding-small);\n width: 100%;\n}\n\n .sds-filter-list-item:has(.sds-filter-list-item__input:hover) {\n --filter-list-item-background-color: var(\n --sds-color-interaction-neutral-transparent-highlight\n );\n }\n\n .sds-filter-list-item__input {\n flex-basis: 100%;\n }\n\n .sds-filter-list-item__input-label {\n display: flex;\n gap: var(--sds-space-padding-tiny);\n }\n",".sds-filter-list-expand {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n width: 100%;\n}\n\n .sds-filter-list-expand__header {\n --filter-list-item-background-color: transparent;\n\n align-items: center;\n background: var(--filter-list-item-background-color);\n border-radius: var(--sds-space-border-radius-small);\n display: flex;\n flex-direction: row;\n gap: var(--sds-space-gap-small);\n justify-content: space-between;\n width: 100%;\n }\n\n .sds-filter-list-expand__header-clickable {\n border: unset;\n padding: unset;\n }\n\n .sds-filter-list-expand__header-clickable:hover,\n .sds-filter-list-expand__header-clickable:focus-visible {\n background: var(--sds-color-interaction-neutral-transparent-highlight);\n cursor: pointer;\n }\n\n .sds-filter-list-expand__header-clickable:focus-visible {\n outline: var(--sds-focus-outline);\n }\n\n .sds-filter-list-expand__header:has(.sds-filter-list-item__input:hover) {\n --filter-list-item-background-color: var(\n --sds-color-interaction-neutral-transparent-highlight\n );\n }\n\n .sds-filter-list-expand--icon-container {\n align-items: center;\n display: flex;\n font-size: var(--sds-typography-fontsize-700);\n justify-content: center;\n width: var(--sds-typography-fontsize-900);\n height: var(--sds-typography-fontsize-900);\n }\n\n .sds-filter-list-expand__icon {\n transition: rotate var(--sds-effect-animation-duration-medium)\n var(--sds-effect-animation-easing-default);\n }\n\n .sds-filter-list-expand__icon--expanded {\n rotate: 180deg;\n }\n\n .sds-filter-list-expand__content {\n height: 0;\n overflow: hidden;\n transition: all var(--sds-effect-animation-duration-medium)\n var(--sds-effect-animation-easing-default);\n }\n\n .sds-filter-list-expand__content--open {\n height: auto;\n }\n\n .sds-filter-list-expand__content .sds-form-fieldset__legend {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n 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,WAAS;AACT,kBAAgB;AAChB,WAAS,IAAI;AACf;AAEE,CAND,gBAMkB,CAAC;AAChB,YAAU;AACV,SAAO;AACP,UAAQ;AACR,WAAS;AACT,UAAQ;AACR,YAAU;AACV,eAAa;AACb,gBAAc;AAChB;;;ACfF,CAAC;AACC,eAAa;AACb,WAAS;AACT,kBAAgB;AAChB,OAAK,IAAI;AACT,mBAAiB;AACnB;AAEE,CAAC;AACC,eAAa;AACb,WAAS;AACT,aAAW,IAAI;AACf,mBAAiB;AACnB;;;ACbF,CAAC;AACC,uCAAqC;AAErC,eAAa;AACb,cAAY,IAAI;AAChB,iBAAe,IAAI;AACnB,WAAS;AACT,kBAAgB;AAChB,OAAK,IAAI;AACT,mBAAiB;AACjB,iBAAe,IAAI;AACnB,SAAO;AACT;AAEE,CAdD,oBAcsB,KAAK,CAAC,2BAA2B;AACpD,uCAAqC,KACnC;AAEJ;AAEA,CAN2B;AAOzB,cAAY;AACd;AAEA,CAAC;AACG,WAAS;AACT,OAAK,IAAI;AACX;;;
|
|
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 display: flex;\n flex-direction: column;\n padding: var(--sds-space-padding-small);\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 white-space: nowrap;\n border-width: 0;\n }\n",".sds-filter-list-icon-label {\n align-items: center;\n display: flex;\n flex-direction: row;\n gap: var(--sds-space-gap-tiny);\n justify-content: flex-start;\n}\n\n .sds-filter-list-icon-label__icon {\n align-items: center;\n display: flex;\n font-size: var(--sds-typography-fontsize-700);\n justify-content: center;\n }\n",".sds-filter-list-item {\n --filter-list-item-background-color: transparent;\n\n align-items: center;\n background: var(--filter-list-item-background-color);\n border-radius: var(--sds-space-border-radius-small);\n display: flex;\n flex-direction: row;\n gap: var(--sds-space-gap-tiny);\n justify-content: space-between;\n padding-right: var(--sds-space-padding-small);\n width: 100%;\n}\n\n .sds-filter-list-item:has(.sds-filter-list-item__input:hover) {\n --filter-list-item-background-color: var(\n --sds-color-interaction-neutral-transparent-highlight\n );\n }\n\n .sds-filter-list-item__input {\n flex-basis: 100%;\n }\n\n .sds-filter-list-item__input-label {\n align-items: center;\n display: flex;\n gap: var(--sds-space-padding-tiny);\n }\n",".sds-filter-list-expand {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n width: 100%;\n}\n\n .sds-filter-list-expand__header {\n --filter-list-item-background-color: transparent;\n\n align-items: center;\n background: var(--filter-list-item-background-color);\n border-radius: var(--sds-space-border-radius-small);\n display: flex;\n flex-direction: row;\n gap: var(--sds-space-gap-small);\n justify-content: space-between;\n width: 100%;\n }\n\n .sds-filter-list-expand__header-clickable {\n border: unset;\n padding: unset;\n }\n\n .sds-filter-list-expand__header-clickable:hover,\n .sds-filter-list-expand__header-clickable:focus-visible {\n background: var(--sds-color-interaction-neutral-transparent-highlight);\n cursor: pointer;\n }\n\n .sds-filter-list-expand__header-clickable:focus-visible {\n outline: var(--sds-focus-outline);\n }\n\n .sds-filter-list-expand__header:has(.sds-filter-list-item__input:hover) {\n --filter-list-item-background-color: var(\n --sds-color-interaction-neutral-transparent-highlight\n );\n }\n\n .sds-filter-list-expand--icon-container {\n align-items: center;\n display: flex;\n font-size: var(--sds-typography-fontsize-700);\n justify-content: center;\n width: var(--sds-typography-fontsize-900);\n height: var(--sds-typography-fontsize-900);\n }\n\n .sds-filter-list-expand__icon {\n transition: rotate var(--sds-effect-animation-duration-medium)\n var(--sds-effect-animation-easing-default);\n }\n\n .sds-filter-list-expand__icon--expanded {\n rotate: 180deg;\n }\n\n .sds-filter-list-expand__content {\n height: 0;\n overflow: hidden;\n transition: all var(--sds-effect-animation-duration-medium)\n var(--sds-effect-animation-easing-default);\n }\n\n .sds-filter-list-expand__content--open {\n height: auto;\n }\n\n .sds-filter-list-expand__content .sds-form-fieldset__legend {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n 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,WAAS;AACT,kBAAgB;AAChB,WAAS,IAAI;AACf;AAEE,CAND,gBAMkB,CAAC;AAChB,YAAU;AACV,SAAO;AACP,UAAQ;AACR,WAAS;AACT,UAAQ;AACR,YAAU;AACV,eAAa;AACb,gBAAc;AAChB;;;ACfF,CAAC;AACC,eAAa;AACb,WAAS;AACT,kBAAgB;AAChB,OAAK,IAAI;AACT,mBAAiB;AACnB;AAEE,CAAC;AACC,eAAa;AACb,WAAS;AACT,aAAW,IAAI;AACf,mBAAiB;AACnB;;;ACbF,CAAC;AACC,uCAAqC;AAErC,eAAa;AACb,cAAY,IAAI;AAChB,iBAAe,IAAI;AACnB,WAAS;AACT,kBAAgB;AAChB,OAAK,IAAI;AACT,mBAAiB;AACjB,iBAAe,IAAI;AACnB,SAAO;AACT;AAEE,CAdD,oBAcsB,KAAK,CAAC,2BAA2B;AACpD,uCAAqC,KACnC;AAEJ;AAEA,CAN2B;AAOzB,cAAY;AACd;AAEA,CAAC;AACG,eAAa;AACb,WAAS;AACT,OAAK,IAAI;AACX;;;AC5BJ,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;AACG,UAAQ;AACR,WAAS;AACX;AAEF,CALC,wCAKwC;AACrC,CANH,wCAM4C;AACvC,cAAY,IAAI;AAChB,UAAQ;AACV;AAEJ,CAXC,wCAWwC;AACnC,WAAS,IAAI;AACf;AAEJ,CA5BC,8BA4B8B,KAAK,CAAC,2BAA2B;AAC5D,uCAAqC,KACnC;AAEJ;AAEF,CAAC;AACC,eAAa;AACb,WAAS;AACT,aAAW,IAAI;AACf,mBAAiB;AACjB,SAAO,IAAI;AACX,UAAQ,IAAI;AACd;AAEA,CAAC;AACC,cAAY,OAAO,IAAI,wCACrB,IAAI;AACR;AAEA,CAAC;AACG,UAAQ;AACV;AAEF,CAAC;AACC,UAAQ;AACR,YAAU;AACV,cAAY,IAAI,IAAI,wCAClB,IAAI;AACR;AAEA,CAAC;AACG,UAAQ;AACV;AAEF,CAXC,gCAWgC,CAAC;AAC9B,YAAU;AACV,SAAO;AACP,UAAQ;AACR,WAAS;AACT,UAAQ;AACR,YAAU;AACV,eAAa;AACb,gBAAc;AAChB;;;AC/EJ,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.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("clsx/lite"),s=require("react/jsx-runtime"),i=require("@sikt/sds-checkbox"),
|
|
1
|
+
"use strict";var e=require("clsx/lite"),s=require("react/jsx-runtime"),i=require("@sikt/sds-checkbox"),a=require("@sikt/sds-radio"),l=require("@sikt/sds-notification"),t=require("react"),n=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=({children:i,className:a})=>s.jsx("div",{className:e.clsx("sds-filter-list",a),children:i});x.displayName="FilterList";var p=({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})]}),h=({type:e,label:l,icon:t,value:n,onChange:d,checked:r,count:c})=>{const o=void 0!==c?s.jsxs("span",{className:"sds-filter-list-item__input-label",children:[s.jsx("span",{children:l})," ",s.jsxs("span",{children:["(",c,")"]})]}):l,x=t?s.jsx(p,{label:o,icon:t}):o;return s.jsxs("div",{className:"sds-filter-list-item",children:["radio"===e&&s.jsx(a.RadioInput,{className:"sds-filter-list-item__input",label:x,value:n,checked:r}),"checkbox"===e&&s.jsx(i.CheckboxInput,{className:"sds-filter-list-item__input",label:x,value:n,onChange:d,checked:r})]})};function u({header:e,clickableHeader:i=!1,initialExpanded:a=!1,onExpandToggle:l,ariaLabelExpandToggle:r,children:c}){const x=t.useId(),p="".concat(x,"-title"),h="".concat(x,"-content"),[u,m]=t.useState(a),b=()=>{(()=>{const e=!u;m(e),l&&l(e)})()},j=s.jsx(d.ExpandShowIcon,{className:o.default("sds-filter-list-expand__icon",u&&"sds-filter-list-expand__icon--expanded")});return s.jsxs("div",{className:"sds-filter-list-expand",children:[i?s.jsxs("button",{className:"sds-filter-list-expand__header sds-filter-list-expand__header-clickable",onClick:b,id:p,"aria-controls":h,"aria-expanded":u,children:[e,s.jsx("div",{className:"sds-filter-list-expand--icon-container",children:j})]}):s.jsxs("div",{className:"sds-filter-list-expand__header",id:p,children:[e,s.jsx(n.Button,{variant:"transparent",size:"small",icon:j,iconVariant:"only",onClick:b,"aria-expanded":u,"aria-controls":h,children:r})]}),s.jsx("div",{className:o.default("sds-filter-list-expand__content",u&&"sds-filter-list-expand__content--open"),children:s.jsx("div",{role:"region",id:h,"aria-labelledby":p,hidden:!u,children:c})})]})}h.displayName="FilterListItem";var m=({label:e,icon:a,expanded:n,ariaLabelExpandToggle:d,onExpandToggle:r,onCategoryToggle:c,indeterminate:o,checked:x,count:h,children:m})=>{const b=t.useId(),j=void 0!==h&&h>0;return s.jsx(u,{ariaLabelExpandToggle:d,initialExpanded:n,onExpandToggle:r,header:s.jsxs("div",{className:"sds-filter-list-category",children:[s.jsx(i.CheckboxInput,{className:"sds-filter-list-item__input","aria-describedby":j?b:void 0,label:a?s.jsx(p,{label:e,icon:a}):e,onChange:e=>{c&&c(e.target.checked)},indeterminate:o,checked:x}),j&&s.jsx(l.Notification,{id:b,variant:"brand",count:h})]}),children:s.jsx("div",{className:"sds-filter-list-category__content",children:m})})};m.displayName="FilterListCategory";var b=({label:e,children:i,expandable:a,count:t})=>{const n=void 0!==t&&t>0,d=s.jsxs("div",{className:r.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(l.Notification,{variant:"brand",count:t})]});return a?s.jsx(u,{header:d,clickableHeader:!0,initialExpanded:a.expanded,onExpandToggle:a.onExpandToggle,children:i}):s.jsxs(s.Fragment,{children:[d,i]})};b.displayName="FilterListSection",exports.FilterList=x,exports.FilterListCategory=m,exports.FilterListItem=h,exports.FilterListSection=b;//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +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","RadioInput","CheckboxInput","useId","useState","ExpandShowIcon","Button","Notification","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};\nFilterList.displayName = \"FilterList\";\n","import { ReactNode } from \"react\";\nimport \"./filter-list-icon-label.pcss\";\n\nexport interface FilterListIconLabelProps {\n icon: ReactNode;\n label: ReactNode;\n}\n\nexport const FilterListIconLabel = ({\n icon,\n label,\n}: FilterListIconLabelProps) => {\n return (\n <div className=\"sds-filter-list-icon-label\">\n <span className=\"sds-filter-list-icon-label__icon\">{icon}</span>\n <span>{label}</span>\n </div>\n );\n};\n","import { CheckboxInput } from \"@sikt/sds-checkbox\";\nimport { RadioInput } from \"@sikt/sds-radio\";\nimport { ChangeEvent, ReactElement, ReactNode } from \"react\";\nimport { FilterListIconLabel } from \"../components/FilterListIconLabel/FilterListIconLabel\";\nimport \"./filter-list-item.pcss\";\n\nexport interface FilterListItemProps {\n type: \"radio\" | \"checkbox\";\n label: NonNullable<ReactNode>;\n icon?: ReactElement;\n value: string;\n onChange?: (event: ChangeEvent<HTMLInputElement>) => void;\n checked?: boolean;\n count?: number;\n}\n\nexport const FilterListItem = ({\n type,\n label,\n icon,\n value,\n onChange,\n checked,\n count,\n}: FilterListItemProps) => {\n const hasCount = count !== undefined;\n\n const inputLabel = hasCount ? (\n <span className=\"sds-filter-list-item__input-label\">\n <span>{label}</span> <span>({count})</span>\n </span>\n ) : (\n label\n );\n const iconLabel = icon ? (\n <FilterListIconLabel label={inputLabel} icon={icon} />\n ) : (\n inputLabel\n );\n\n return (\n <div className=\"sds-filter-list-item\">\n {type === \"radio\" && (\n <RadioInput\n className=\"sds-filter-list-item__input\"\n label={iconLabel}\n value={value}\n checked={checked}\n />\n )}\n\n {type === \"checkbox\" && (\n <CheckboxInput\n className=\"sds-filter-list-item__input\"\n label={iconLabel}\n value={value}\n onChange={onChange}\n checked={checked}\n />\n )}\n </div>\n );\n};\nFilterListItem.displayName = \"FilterListItem\";\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 titleId = `${id}-title`;\n const contentId = `${id}-content`;\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 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 <button\n className=\"sds-filter-list-expand__header sds-filter-list-expand__header-clickable\"\n onClick={handleToggleByClick}\n id={titleId}\n aria-controls={contentId}\n aria-expanded={expanded}\n >\n {header}\n <div className=\"sds-filter-list-expand--icon-container\">{icon}</div>\n </button>\n ) : (\n <div className=\"sds-filter-list-expand__header\" id={titleId}>\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={contentId}\n >\n {ariaLabelExpandToggle}\n </Button>\n </div>\n )}\n\n <div\n className={clsx(\n \"sds-filter-list-expand__content\",\n expanded && \"sds-filter-list-expand__content--open\",\n )}\n >\n <div\n role=\"region\"\n id={contentId}\n aria-labelledby={titleId}\n hidden={!expanded}\n >\n {children}\n </div>\n </div>\n </div>\n );\n}\n","import { CheckboxInput } from \"@sikt/sds-checkbox\";\nimport { Notification } from \"@sikt/sds-notification\";\nimport { ReactNode, useId } from \"react\";\nimport { FilterListExpand } from \"../components/FilterListExpand/FilterListExpand\";\nimport { FilterListIconLabel } from \"../components/FilterListIconLabel/FilterListIconLabel\";\nimport \"./filter-list-category.pcss\";\n\nexport interface FilterListCategoryProps {\n label: string;\n icon?: ReactNode;\n expanded?: boolean;\n onExpandToggle?: (expanded: boolean) => void;\n ariaLabelExpandToggle: NonNullable<string>;\n onCategoryToggle?: (checked: boolean) => void;\n indeterminate: boolean;\n checked: boolean;\n count?: number;\n children: ReactNode;\n}\n\nexport const FilterListCategory = ({\n label,\n icon,\n expanded,\n ariaLabelExpandToggle,\n onExpandToggle,\n onCategoryToggle,\n indeterminate,\n checked,\n count,\n children,\n}: FilterListCategoryProps) => {\n const id = useId();\n const hasCount = count !== undefined && count > 0;\n\n return (\n <FilterListExpand\n ariaLabelExpandToggle={ariaLabelExpandToggle}\n initialExpanded={expanded}\n onExpandToggle={onExpandToggle}\n header={\n <div className=\"sds-filter-list-category\">\n <CheckboxInput\n className=\"sds-filter-list-item__input\"\n aria-describedby={hasCount ? id : undefined}\n label={\n icon ? <FilterListIconLabel label={label} icon={icon} /> : label\n }\n onChange={(event) => {\n if (onCategoryToggle) {\n onCategoryToggle(event.target.checked);\n }\n }}\n indeterminate={indeterminate}\n checked={checked}\n />\n {hasCount && <Notification id={id} count={count} />}\n </div>\n }\n >\n <div className=\"sds-filter-list-category__content\">{children}</div>\n </FilterListExpand>\n );\n};\nFilterListCategory.displayName = \"FilterListCategory\";\n","import { Notification } from \"@sikt/sds-notification\";\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 && <Notification count={count} />}\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};\nFilterListSection.displayName = \"FilterListSection\";\n"]}
|
|
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","RadioInput","CheckboxInput","useId","useState","ExpandShowIcon","Button","Notification","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};\nFilterList.displayName = \"FilterList\";\n","import { ReactNode } from \"react\";\nimport \"./filter-list-icon-label.pcss\";\n\nexport interface FilterListIconLabelProps {\n icon: ReactNode;\n label: ReactNode;\n}\n\nexport const FilterListIconLabel = ({\n icon,\n label,\n}: FilterListIconLabelProps) => {\n return (\n <div className=\"sds-filter-list-icon-label\">\n <span className=\"sds-filter-list-icon-label__icon\">{icon}</span>\n <span>{label}</span>\n </div>\n );\n};\n","import { CheckboxInput } from \"@sikt/sds-checkbox\";\nimport { RadioInput } from \"@sikt/sds-radio\";\nimport { ChangeEvent, ReactElement, ReactNode } from \"react\";\nimport { FilterListIconLabel } from \"../components/FilterListIconLabel/FilterListIconLabel\";\nimport \"./filter-list-item.pcss\";\n\nexport interface FilterListItemProps {\n type: \"radio\" | \"checkbox\";\n label: NonNullable<ReactNode>;\n icon?: ReactElement;\n value: string;\n onChange?: (event: ChangeEvent<HTMLInputElement>) => void;\n checked?: boolean;\n count?: number;\n}\n\nexport const FilterListItem = ({\n type,\n label,\n icon,\n value,\n onChange,\n checked,\n count,\n}: FilterListItemProps) => {\n const hasCount = count !== undefined;\n\n const inputLabel = hasCount ? (\n <span className=\"sds-filter-list-item__input-label\">\n <span>{label}</span> <span>({count})</span>\n </span>\n ) : (\n label\n );\n const iconLabel = icon ? (\n <FilterListIconLabel label={inputLabel} icon={icon} />\n ) : (\n inputLabel\n );\n\n return (\n <div className=\"sds-filter-list-item\">\n {type === \"radio\" && (\n <RadioInput\n className=\"sds-filter-list-item__input\"\n label={iconLabel}\n value={value}\n checked={checked}\n />\n )}\n\n {type === \"checkbox\" && (\n <CheckboxInput\n className=\"sds-filter-list-item__input\"\n label={iconLabel}\n value={value}\n onChange={onChange}\n checked={checked}\n />\n )}\n </div>\n );\n};\nFilterListItem.displayName = \"FilterListItem\";\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 titleId = `${id}-title`;\n const contentId = `${id}-content`;\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 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 <button\n className=\"sds-filter-list-expand__header sds-filter-list-expand__header-clickable\"\n onClick={handleToggleByClick}\n id={titleId}\n aria-controls={contentId}\n aria-expanded={expanded}\n >\n {header}\n <div className=\"sds-filter-list-expand--icon-container\">{icon}</div>\n </button>\n ) : (\n <div className=\"sds-filter-list-expand__header\" id={titleId}>\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={contentId}\n >\n {ariaLabelExpandToggle}\n </Button>\n </div>\n )}\n\n <div\n className={clsx(\n \"sds-filter-list-expand__content\",\n expanded && \"sds-filter-list-expand__content--open\",\n )}\n >\n <div\n role=\"region\"\n id={contentId}\n aria-labelledby={titleId}\n hidden={!expanded}\n >\n {children}\n </div>\n </div>\n </div>\n );\n}\n","import { CheckboxInput } from \"@sikt/sds-checkbox\";\nimport { Notification } from \"@sikt/sds-notification\";\nimport { ReactNode, useId } from \"react\";\nimport { FilterListExpand } from \"../components/FilterListExpand/FilterListExpand\";\nimport { FilterListIconLabel } from \"../components/FilterListIconLabel/FilterListIconLabel\";\nimport \"./filter-list-category.pcss\";\n\nexport interface FilterListCategoryProps {\n label: string;\n icon?: ReactNode;\n expanded?: boolean;\n onExpandToggle?: (expanded: boolean) => void;\n ariaLabelExpandToggle: NonNullable<string>;\n onCategoryToggle?: (checked: boolean) => void;\n indeterminate: boolean;\n checked: boolean;\n count?: number;\n children: ReactNode;\n}\n\nexport const FilterListCategory = ({\n label,\n icon,\n expanded,\n ariaLabelExpandToggle,\n onExpandToggle,\n onCategoryToggle,\n indeterminate,\n checked,\n count,\n children,\n}: FilterListCategoryProps) => {\n const id = useId();\n const hasCount = count !== undefined && count > 0;\n\n return (\n <FilterListExpand\n ariaLabelExpandToggle={ariaLabelExpandToggle}\n initialExpanded={expanded}\n onExpandToggle={onExpandToggle}\n header={\n <div className=\"sds-filter-list-category\">\n <CheckboxInput\n className=\"sds-filter-list-item__input\"\n aria-describedby={hasCount ? id : undefined}\n label={\n icon ? <FilterListIconLabel label={label} icon={icon} /> : label\n }\n onChange={(event) => {\n if (onCategoryToggle) {\n onCategoryToggle(event.target.checked);\n }\n }}\n indeterminate={indeterminate}\n checked={checked}\n />\n {hasCount && <Notification id={id} variant=\"brand\" count={count} />}\n </div>\n }\n >\n <div className=\"sds-filter-list-category__content\">{children}</div>\n </FilterListExpand>\n );\n};\nFilterListCategory.displayName = \"FilterListCategory\";\n","import { Notification } from \"@sikt/sds-notification\";\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 && <Notification variant=\"brand\" count={count} />}\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};\nFilterListSection.displayName = \"FilterListSection\";\n"]}
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{clsx as e}from"clsx/lite";import{jsx as i,jsxs as
|
|
1
|
+
import{clsx as e}from"clsx/lite";import{jsx as i,jsxs as a,Fragment as l}from"react/jsx-runtime";import{CheckboxInput as s}from"@sikt/sds-checkbox";import{RadioInput as n}from"@sikt/sds-radio";import{Notification as t}from"@sikt/sds-notification";import{useId as d,useState as r}from"react";import{Button as c}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});h.displayName="FilterList";var x=({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})]}),f=({type:e,label:l,icon:t,value:d,onChange:r,checked:c,count:o})=>{const p=void 0!==o?a("span",{className:"sds-filter-list-item__input-label",children:[i("span",{children:l})," ",a("span",{children:["(",o,")"]})]}):l,m=t?i(x,{label:p,icon:t}):p;return a("div",{className:"sds-filter-list-item",children:["radio"===e&&i(n,{className:"sds-filter-list-item__input",label:m,value:d,checked:c}),"checkbox"===e&&i(s,{className:"sds-filter-list-item__input",label:m,value:d,onChange:r,checked:c})]})};function b({header:e,clickableHeader:l=!1,initialExpanded:s=!1,onExpandToggle:n,ariaLabelExpandToggle:t,children:m}){const h=d(),x="".concat(h,"-title"),f="".concat(h,"-content"),[b,_]=r(s),g=()=>{(()=>{const e=!b;_(e),n&&n(e)})()},v=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:[l?a("button",{className:"sds-filter-list-expand__header sds-filter-list-expand__header-clickable",onClick:g,id:x,"aria-controls":f,"aria-expanded":b,children:[e,i("div",{className:"sds-filter-list-expand--icon-container",children:v})]}):a("div",{className:"sds-filter-list-expand__header",id:x,children:[e,i(c,{variant:"transparent",size:"small",icon:v,iconVariant:"only",onClick:g,"aria-expanded":b,"aria-controls":f,children:t})]}),i("div",{className:p("sds-filter-list-expand__content",b&&"sds-filter-list-expand__content--open"),children:i("div",{role:"region",id:f,"aria-labelledby":x,hidden:!b,children:m})})]})}f.displayName="FilterListItem";var _=({label:e,icon:l,expanded:n,ariaLabelExpandToggle:r,onExpandToggle:c,onCategoryToggle:o,indeterminate:p,checked:m,count:h,children:f})=>{const _=d(),g=void 0!==h&&h>0;return i(b,{ariaLabelExpandToggle:r,initialExpanded:n,onExpandToggle:c,header:a("div",{className:"sds-filter-list-category",children:[i(s,{className:"sds-filter-list-item__input","aria-describedby":g?_:void 0,label:l?i(x,{label:e,icon:l}):e,onChange:e=>{o&&o(e.target.checked)},indeterminate:p,checked:m}),g&&i(t,{id:_,variant:"brand",count:h})]}),children:i("div",{className:"sds-filter-list-category__content",children:f})})};_.displayName="FilterListCategory";var g=({label:e,children:s,expandable:n,count:d})=>{const r=void 0!==d&&d>0,c=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}),r&&i(t,{variant:"brand",count:d})]});return n?i(b,{header:c,clickableHeader:!0,initialExpanded:n.expanded,onExpandToggle:n.onExpandToggle,children:s}):a(l,{children:[c,s]})};g.displayName="FilterListSection";export{h as FilterList,_ as FilterListCategory,f as FilterListItem,g as FilterListSection};//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +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","Notification"],"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};\nFilterList.displayName = \"FilterList\";\n","import { ReactNode } from \"react\";\nimport \"./filter-list-icon-label.pcss\";\n\nexport interface FilterListIconLabelProps {\n icon: ReactNode;\n label: ReactNode;\n}\n\nexport const FilterListIconLabel = ({\n icon,\n label,\n}: FilterListIconLabelProps) => {\n return (\n <div className=\"sds-filter-list-icon-label\">\n <span className=\"sds-filter-list-icon-label__icon\">{icon}</span>\n <span>{label}</span>\n </div>\n );\n};\n","import { CheckboxInput } from \"@sikt/sds-checkbox\";\nimport { RadioInput } from \"@sikt/sds-radio\";\nimport { ChangeEvent, ReactElement, ReactNode } from \"react\";\nimport { FilterListIconLabel } from \"../components/FilterListIconLabel/FilterListIconLabel\";\nimport \"./filter-list-item.pcss\";\n\nexport interface FilterListItemProps {\n type: \"radio\" | \"checkbox\";\n label: NonNullable<ReactNode>;\n icon?: ReactElement;\n value: string;\n onChange?: (event: ChangeEvent<HTMLInputElement>) => void;\n checked?: boolean;\n count?: number;\n}\n\nexport const FilterListItem = ({\n type,\n label,\n icon,\n value,\n onChange,\n checked,\n count,\n}: FilterListItemProps) => {\n const hasCount = count !== undefined;\n\n const inputLabel = hasCount ? (\n <span className=\"sds-filter-list-item__input-label\">\n <span>{label}</span> <span>({count})</span>\n </span>\n ) : (\n label\n );\n const iconLabel = icon ? (\n <FilterListIconLabel label={inputLabel} icon={icon} />\n ) : (\n inputLabel\n );\n\n return (\n <div className=\"sds-filter-list-item\">\n {type === \"radio\" && (\n <RadioInput\n className=\"sds-filter-list-item__input\"\n label={iconLabel}\n value={value}\n checked={checked}\n />\n )}\n\n {type === \"checkbox\" && (\n <CheckboxInput\n className=\"sds-filter-list-item__input\"\n label={iconLabel}\n value={value}\n onChange={onChange}\n checked={checked}\n />\n )}\n </div>\n );\n};\nFilterListItem.displayName = \"FilterListItem\";\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 titleId = `${id}-title`;\n const contentId = `${id}-content`;\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 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 <button\n className=\"sds-filter-list-expand__header sds-filter-list-expand__header-clickable\"\n onClick={handleToggleByClick}\n id={titleId}\n aria-controls={contentId}\n aria-expanded={expanded}\n >\n {header}\n <div className=\"sds-filter-list-expand--icon-container\">{icon}</div>\n </button>\n ) : (\n <div className=\"sds-filter-list-expand__header\" id={titleId}>\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={contentId}\n >\n {ariaLabelExpandToggle}\n </Button>\n </div>\n )}\n\n <div\n className={clsx(\n \"sds-filter-list-expand__content\",\n expanded && \"sds-filter-list-expand__content--open\",\n )}\n >\n <div\n role=\"region\"\n id={contentId}\n aria-labelledby={titleId}\n hidden={!expanded}\n >\n {children}\n </div>\n </div>\n </div>\n );\n}\n","import { CheckboxInput } from \"@sikt/sds-checkbox\";\nimport { Notification } from \"@sikt/sds-notification\";\nimport { ReactNode, useId } from \"react\";\nimport { FilterListExpand } from \"../components/FilterListExpand/FilterListExpand\";\nimport { FilterListIconLabel } from \"../components/FilterListIconLabel/FilterListIconLabel\";\nimport \"./filter-list-category.pcss\";\n\nexport interface FilterListCategoryProps {\n label: string;\n icon?: ReactNode;\n expanded?: boolean;\n onExpandToggle?: (expanded: boolean) => void;\n ariaLabelExpandToggle: NonNullable<string>;\n onCategoryToggle?: (checked: boolean) => void;\n indeterminate: boolean;\n checked: boolean;\n count?: number;\n children: ReactNode;\n}\n\nexport const FilterListCategory = ({\n label,\n icon,\n expanded,\n ariaLabelExpandToggle,\n onExpandToggle,\n onCategoryToggle,\n indeterminate,\n checked,\n count,\n children,\n}: FilterListCategoryProps) => {\n const id = useId();\n const hasCount = count !== undefined && count > 0;\n\n return (\n <FilterListExpand\n ariaLabelExpandToggle={ariaLabelExpandToggle}\n initialExpanded={expanded}\n onExpandToggle={onExpandToggle}\n header={\n <div className=\"sds-filter-list-category\">\n <CheckboxInput\n className=\"sds-filter-list-item__input\"\n aria-describedby={hasCount ? id : undefined}\n label={\n icon ? <FilterListIconLabel label={label} icon={icon} /> : label\n }\n onChange={(event) => {\n if (onCategoryToggle) {\n onCategoryToggle(event.target.checked);\n }\n }}\n indeterminate={indeterminate}\n checked={checked}\n />\n {hasCount && <Notification id={id} count={count} />}\n </div>\n }\n >\n <div className=\"sds-filter-list-category__content\">{children}</div>\n </FilterListExpand>\n );\n};\nFilterListCategory.displayName = \"FilterListCategory\";\n","import { Notification } from \"@sikt/sds-notification\";\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 && <Notification count={count} />}\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};\nFilterListSection.displayName = \"FilterListSection\";\n"]}
|
|
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","Notification"],"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};\nFilterList.displayName = \"FilterList\";\n","import { ReactNode } from \"react\";\nimport \"./filter-list-icon-label.pcss\";\n\nexport interface FilterListIconLabelProps {\n icon: ReactNode;\n label: ReactNode;\n}\n\nexport const FilterListIconLabel = ({\n icon,\n label,\n}: FilterListIconLabelProps) => {\n return (\n <div className=\"sds-filter-list-icon-label\">\n <span className=\"sds-filter-list-icon-label__icon\">{icon}</span>\n <span>{label}</span>\n </div>\n );\n};\n","import { CheckboxInput } from \"@sikt/sds-checkbox\";\nimport { RadioInput } from \"@sikt/sds-radio\";\nimport { ChangeEvent, ReactElement, ReactNode } from \"react\";\nimport { FilterListIconLabel } from \"../components/FilterListIconLabel/FilterListIconLabel\";\nimport \"./filter-list-item.pcss\";\n\nexport interface FilterListItemProps {\n type: \"radio\" | \"checkbox\";\n label: NonNullable<ReactNode>;\n icon?: ReactElement;\n value: string;\n onChange?: (event: ChangeEvent<HTMLInputElement>) => void;\n checked?: boolean;\n count?: number;\n}\n\nexport const FilterListItem = ({\n type,\n label,\n icon,\n value,\n onChange,\n checked,\n count,\n}: FilterListItemProps) => {\n const hasCount = count !== undefined;\n\n const inputLabel = hasCount ? (\n <span className=\"sds-filter-list-item__input-label\">\n <span>{label}</span> <span>({count})</span>\n </span>\n ) : (\n label\n );\n const iconLabel = icon ? (\n <FilterListIconLabel label={inputLabel} icon={icon} />\n ) : (\n inputLabel\n );\n\n return (\n <div className=\"sds-filter-list-item\">\n {type === \"radio\" && (\n <RadioInput\n className=\"sds-filter-list-item__input\"\n label={iconLabel}\n value={value}\n checked={checked}\n />\n )}\n\n {type === \"checkbox\" && (\n <CheckboxInput\n className=\"sds-filter-list-item__input\"\n label={iconLabel}\n value={value}\n onChange={onChange}\n checked={checked}\n />\n )}\n </div>\n );\n};\nFilterListItem.displayName = \"FilterListItem\";\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 titleId = `${id}-title`;\n const contentId = `${id}-content`;\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 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 <button\n className=\"sds-filter-list-expand__header sds-filter-list-expand__header-clickable\"\n onClick={handleToggleByClick}\n id={titleId}\n aria-controls={contentId}\n aria-expanded={expanded}\n >\n {header}\n <div className=\"sds-filter-list-expand--icon-container\">{icon}</div>\n </button>\n ) : (\n <div className=\"sds-filter-list-expand__header\" id={titleId}>\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={contentId}\n >\n {ariaLabelExpandToggle}\n </Button>\n </div>\n )}\n\n <div\n className={clsx(\n \"sds-filter-list-expand__content\",\n expanded && \"sds-filter-list-expand__content--open\",\n )}\n >\n <div\n role=\"region\"\n id={contentId}\n aria-labelledby={titleId}\n hidden={!expanded}\n >\n {children}\n </div>\n </div>\n </div>\n );\n}\n","import { CheckboxInput } from \"@sikt/sds-checkbox\";\nimport { Notification } from \"@sikt/sds-notification\";\nimport { ReactNode, useId } from \"react\";\nimport { FilterListExpand } from \"../components/FilterListExpand/FilterListExpand\";\nimport { FilterListIconLabel } from \"../components/FilterListIconLabel/FilterListIconLabel\";\nimport \"./filter-list-category.pcss\";\n\nexport interface FilterListCategoryProps {\n label: string;\n icon?: ReactNode;\n expanded?: boolean;\n onExpandToggle?: (expanded: boolean) => void;\n ariaLabelExpandToggle: NonNullable<string>;\n onCategoryToggle?: (checked: boolean) => void;\n indeterminate: boolean;\n checked: boolean;\n count?: number;\n children: ReactNode;\n}\n\nexport const FilterListCategory = ({\n label,\n icon,\n expanded,\n ariaLabelExpandToggle,\n onExpandToggle,\n onCategoryToggle,\n indeterminate,\n checked,\n count,\n children,\n}: FilterListCategoryProps) => {\n const id = useId();\n const hasCount = count !== undefined && count > 0;\n\n return (\n <FilterListExpand\n ariaLabelExpandToggle={ariaLabelExpandToggle}\n initialExpanded={expanded}\n onExpandToggle={onExpandToggle}\n header={\n <div className=\"sds-filter-list-category\">\n <CheckboxInput\n className=\"sds-filter-list-item__input\"\n aria-describedby={hasCount ? id : undefined}\n label={\n icon ? <FilterListIconLabel label={label} icon={icon} /> : label\n }\n onChange={(event) => {\n if (onCategoryToggle) {\n onCategoryToggle(event.target.checked);\n }\n }}\n indeterminate={indeterminate}\n checked={checked}\n />\n {hasCount && <Notification id={id} variant=\"brand\" count={count} />}\n </div>\n }\n >\n <div className=\"sds-filter-list-category__content\">{children}</div>\n </FilterListExpand>\n );\n};\nFilterListCategory.displayName = \"FilterListCategory\";\n","import { Notification } from \"@sikt/sds-notification\";\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 && <Notification variant=\"brand\" count={count} />}\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};\nFilterListSection.displayName = \"FilterListSection\";\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sikt/sds-filter-list",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.1",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"homepage": "https://designsystem.sikt.no/",
|
|
6
6
|
"repository": {
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"@sikt/sds-checkbox": "^3.2.0",
|
|
40
40
|
"@sikt/sds-core": "^4.7.0",
|
|
41
41
|
"@sikt/sds-icons": "^3.1.0",
|
|
42
|
-
"@sikt/sds-notification": "^1.
|
|
42
|
+
"@sikt/sds-notification": "^1.1.0",
|
|
43
43
|
"@sikt/sds-radio": "^4.0.0"
|
|
44
44
|
},
|
|
45
45
|
"peerDependencies": {
|