@sikt/sds-filter-list 0.5.5 → 0.6.0
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 +10 -0
- package/README.md +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,16 @@
|
|
|
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.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
|
+
|
|
7
|
+
### ⚠ BREAKING CHANGES
|
|
8
|
+
|
|
9
|
+
- **deps:** update from @sikt/sds-badge to @sikt/sds-notification. requires installation & import of @sikt/sds-notification style sheets
|
|
10
|
+
|
|
11
|
+
### Bug Fixes
|
|
12
|
+
|
|
13
|
+
- **deps:** update from @sikt/sds-badge to @sikt/sds-notification ([fc70069](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/fc700692e32fe20f17f4838708108b5545752b8a))
|
|
14
|
+
|
|
5
15
|
## [0.5.5](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-filter-list@0.5.4...@sikt/sds-filter-list@0.5.5) (2026-01-21)
|
|
6
16
|
|
|
7
17
|
### Bug Fixes
|
package/README.md
CHANGED
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"),l=require("@sikt/sds-radio"),a=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:l})=>s.jsx("div",{className:e.clsx("sds-filter-list",l),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:a,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:a})," ",s.jsxs("span",{children:["(",c,")"]})]}):a,x=t?s.jsx(p,{label:o,icon:t}):o;return s.jsxs("div",{className:"sds-filter-list-item",children:["radio"===e&&s.jsx(l.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:l=!1,onExpandToggle:a,ariaLabelExpandToggle:r,children:c}){const x=t.useId(),p="".concat(x,"-title"),h="".concat(x,"-content"),[u,m]=t.useState(l),b=()=>{(()=>{const e=!u;m(e),a&&a(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:l,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:l?s.jsx(p,{label:e,icon:l}):e,onChange:e=>{c&&c(e.target.checked)},indeterminate:o,checked:x}),j&&s.jsx(a.Notification,{id:b,count:h})]}),children:s.jsx("div",{className:"sds-filter-list-category__content",children:m})})};m.displayName="FilterListCategory";var b=({label:e,children:i,expandable:l,count:t})=>{const n=void 0!==t&&t>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}),n&&s.jsx(a.Notification,{count:t})]});return l?s.jsx(u,{header:d,clickableHeader:!0,initialExpanded:l.expanded,onExpandToggle:l.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","Badge","Fragment"],"mappings":";AASO,IAAM,UAAa,GAAA,CAAC,EAAE,QAAA,EAAU,WAAiC,KAAA;AACtE,EAAA,sCAAQ,KAAI,EAAA,EAAA,SAAA,EAAWA,UAAK,iBAAmB,EAAA,SAAS,GAAI,QAAS,EAAA,CAAA;AACvE;AACA,UAAA,CAAW,WAAc,GAAA,YAAA;ACJlB,IAAM,sBAAsB,CAAC;AAAA,EAClC,IAAA;AAAA,EACA;AACF,CAAgC,KAAA;AAC9B,EACE,uBAAAC,eAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,4BACb,EAAA,QAAA,EAAA;AAAA,oBAAAC,cAAC,CAAA,MAAA,EAAA,EAAK,SAAU,EAAA,kCAAA,EAAoC,QAAK,EAAA,IAAA,EAAA,CAAA;AAAA,oBACzDA,cAAC,CAAA,MAAA,EAAA,EAAM,QAAM,EAAA,KAAA,EAAA;AAAA,GACf,EAAA,CAAA;AAEJ,CAAA;ACFO,IAAM,iBAAiB,CAAC;AAAA,EAC7B,IAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAA2B,KAAA;AACzB,EAAA,MAAM,WAAW,KAAU,KAAA,MAAA;AAE3B,EAAA,MAAM,aAAa,QACjB,mBAAAD,eAAC,CAAA,MAAA,EAAA,EAAK,WAAU,mCACd,EAAA,QAAA,EAAA;AAAA,oBAAAC,cAAAA,CAAC,UAAM,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,IAAO,GAAA;AAAA,oBAACD,gBAAC,MAAK,EAAA,EAAA,QAAA,EAAA;AAAA,MAAA,GAAA;AAAA,MAAE,KAAA;AAAA,MAAM;AAAA,KAAC,EAAA;AAAA,GAAA,EACtC,CAEA,GAAA,KAAA;AAEF,EAAM,MAAA,SAAA,GAAY,uBAChBC,cAAAA,CAAC,uBAAoB,KAAO,EAAA,UAAA,EAAY,MAAY,CAEpD,GAAA,UAAA;AAGF,EAAA,uBACED,eAAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,sBACZ,EAAA,QAAA,EAAA;AAAA,IAAA,IAAA,KAAS,2BACRC,cAAAA;AAAA,MAACC,mBAAA;AAAA,MAAA;AAAA,QACC,SAAU,EAAA,6BAAA;AAAA,QACV,KAAO,EAAA,SAAA;AAAA,QACP,KAAA;AAAA,QACA;AAAA;AAAA,KACF;AAAA,IAGD,IAAA,KAAS,8BACRD,cAAAA;AAAA,MAACE,yBAAA;AAAA,MAAA;AAAA,QACC,SAAU,EAAA,6BAAA;AAAA,QACV,KAAO,EAAA,SAAA;AAAA,QACP,KAAA;AAAA,QACA,QAAA;AAAA,QACA;AAAA;AAAA;AACF,GAEJ,EAAA,CAAA;AAEJ;AACA,cAAA,CAAe,WAAc,GAAA,gBAAA;AChDtB,SAAS,gBAAiB,CAAA;AAAA,EAC/B,MAAA;AAAA,EACA,eAAkB,GAAA,KAAA;AAAA,EAClB,eAAkB,GAAA,KAAA;AAAA,EAClB,cAAA;AAAA,EACA,qBAAA;AAAA,EACA;AACF,CAA0B,EAAA;AACxB,EAAA,MAAM,KAAKC,WAAM,EAAA;AACjB,EAAM,MAAA,OAAA,GAAU,GAAG,MAAE,CAAA,EAAA,EAAA,QAAA,CAAA;AACrB,EAAM,MAAA,SAAA,GAAY,GAAG,MAAE,CAAA,EAAA,EAAA,UAAA,CAAA;AACvB,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,eAAS,eAAe,CAAA;AAExD,EAAA,MAAM,WAAW,MAAM;AACrB,IAAA,MAAM,WAAW,CAAC,QAAA;AAClB,IAAA,WAAA,CAAY,QAAQ,CAAA;AACpB,IAAA,IAAI,cAAgB,EAAA;AAClB,MAAA,cAAA,CAAe,QAAQ,CAAA;AAAA;AACzB,GACF;AAEA,EAAA,MAAM,sBAAsB,MAAM;AAChC,IAAS,QAAA,EAAA;AAAA,GACX;AAEA,EAAA,MAAM,uBACJJ,cAAAA;AAAA,IAACK,uBAAA;AAAA,IAAA;AAAA,MACC,SAAWP,EAAAA,sBAAAA;AAAA,QACT,8BAAA;AAAA,QACA,QAAY,IAAA;AAAA;AACd;AAAA,GACF;AAGF,EAAA,uBACEC,eAAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,wBACZ,EAAA,QAAA,EAAA;AAAA,IAAA,eAAA,mBACCA,eAAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,SAAU,EAAA,yEAAA;AAAA,QACV,OAAS,EAAA,mBAAA;AAAA,QACT,EAAI,EAAA,OAAA;AAAA,QACJ,eAAe,EAAA,SAAA;AAAA,QACf,eAAe,EAAA,QAAA;AAAA,QAEd,QAAA,EAAA;AAAA,UAAA,MAAA;AAAA,0BACDC,cAAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,0CAA0C,QAAK,EAAA,IAAA,EAAA;AAAA;AAAA;AAAA,wBAGhED,eAAAA,CAAC,SAAI,SAAU,EAAA,gCAAA,EAAiC,IAAI,OACjD,EAAA,QAAA,EAAA;AAAA,MAAA,MAAA;AAAA,sBACDC,cAAAA;AAAA,QAACM,gBAAA;AAAA,QAAA;AAAA,UACC,OAAQ,EAAA,aAAA;AAAA,UACR,IAAK,EAAA,OAAA;AAAA,UACL,IAAA;AAAA,UACA,WAAY,EAAA,MAAA;AAAA,UACZ,OAAS,EAAA,mBAAA;AAAA,UACT,eAAe,EAAA,QAAA;AAAA,UACf,eAAe,EAAA,SAAA;AAAA,UAEd,QAAA,EAAA;AAAA;AAAA;AACH,KACF,EAAA,CAAA;AAAA,oBAGFN,cAAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAWF,EAAAA,sBAAAA;AAAA,UACT,iCAAA;AAAA,UACA,QAAY,IAAA;AAAA,SACd;AAAA,QAEA,QAAAE,kBAAAA,cAAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,IAAK,EAAA,QAAA;AAAA,YACL,EAAI,EAAA,SAAA;AAAA,YACJ,iBAAiB,EAAA,OAAA;AAAA,YACjB,QAAQ,CAAC,QAAA;AAAA,YAER;AAAA;AAAA;AACH;AAAA;AACF,GACF,EAAA,CAAA;AAEJ;AC5EO,IAAM,qBAAqB,CAAC;AAAA,EACjC,KAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,qBAAA;AAAA,EACA,cAAA;AAAA,EACA,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAA+B,KAAA;AAC7B,EAAA,MAAM,KAAKG,WAAM,EAAA;AACjB,EAAM,MAAA,QAAA,GAAW,KAAU,KAAA,MAAA,IAAa,KAAQ,GAAA,CAAA;AAEhD,EAAA,uBACEH,cAAAA;AAAA,IAAC,gBAAA;AAAA,IAAA;AAAA,MACC,qBAAA;AAAA,MACA,eAAiB,EAAA,QAAA;AAAA,MACjB,cAAA;AAAA,MACA,MACE,kBAAAD,eAAC,CAAA,KAAA,EAAA,EAAI,WAAU,0BACb,EAAA,QAAA,EAAA;AAAA,wBAAAC,cAAAA;AAAA,UAACE,yBAAAA;AAAA,UAAA;AAAA,YACC,SAAU,EAAA,6BAAA;AAAA,YACV,kBAAA,EAAkB,WAAW,EAAK,GAAA,MAAA;AAAA,YAClC,OACE,IAAO,mBAAAF,eAAC,mBAAoB,EAAA,EAAA,KAAA,EAAc,MAAY,CAAK,GAAA,KAAA;AAAA,YAE7D,QAAA,EAAU,CAAC,KAAU,KAAA;AACnB,cAAA,IAAI,gBAAkB,EAAA;AACpB,gBAAiB,gBAAA,CAAA,KAAA,CAAM,OAAO,OAAO,CAAA;AAAA;AACvC,aACF;AAAA,YACA,aAAA;AAAA,YACA;AAAA;AAAA,SACF;AAAA,QACC,4BACCA,cAAAA;AAAA,UAACO,cAAA;AAAA,UAAA;AAAA,YACC,UAAW,EAAA,QAAA;AAAA,YACX,SAAU,EAAA,wBAAA;AAAA,YACV,EAAA;AAAA,YACA,IAAM,EAAA,KAAA;AAAA,YACN,cAAY,EAAG,CAAA,MAAA,CAAA,KAAA;AAAA;AAAA;AACjB,OAEJ,EAAA,CAAA;AAAA,MAGF,QAAAP,kBAAAA,cAAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,qCAAqC,QAAS,EAAA;AAAA;AAAA,GAC/D;AAEJ;AACA,kBAAA,CAAmB,WAAc,GAAA,oBAAA;ACxD1B,IAAM,oBAAoB,CAAC;AAAA,EAChC,KAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAA8B,KAAA;AAC5B,EAAM,MAAA,QAAA,GAAW,KAAU,KAAA,MAAA,IAAa,KAAQ,GAAA,CAAA;AAEhD,EAAA,MAAM,yBACJD,eAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAWD,EAAAA,UAAAA;AAAA,QACT,yBAAA;AAAA,QACA,UAAc,IAAA;AAAA,OAChB;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAE,cAAC,CAAA,MAAA,EAAA,EAAK,SAAU,EAAA,gCAAA,EAAkC,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,QACvD,4BACCA,cAAAA;AAAA,UAACO,cAAAA;AAAA,UAAA;AAAA,YACC,UAAW,EAAA,QAAA;AAAA,YACX,SAAU,EAAA,wBAAA;AAAA,YACV,IAAM,EAAA,KAAA;AAAA,YACN,cAAY,EAAG,CAAA,MAAA,CAAA,KAAA;AAAA;AAAA;AACjB;AAAA;AAAA,GAEJ;AAGF,EAAA,OAAO,6BACLP,cAAAA;AAAA,IAAC,gBAAA;AAAA,IAAA;AAAA,MACC,MAAA;AAAA,MACA,eAAe,EAAA,IAAA;AAAA,MACf,iBAAiB,UAAW,CAAA,QAAA;AAAA,MAC5B,gBAAgB,UAAW,CAAA,cAAA;AAAA,MAE1B;AAAA;AAAA,GACH,mBAEAD,eAAAA,CAAAS,mBACG,EAAA,EAAA,QAAA,EAAA;AAAA,IAAA,MAAA;AAAA,IACA;AAAA,GACH,EAAA,CAAA;AAEJ;AACA,iBAAA,CAAkB,WAAc,GAAA,mBAAA","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 { Badge } from \"@sikt/sds-badge\";\nimport { CheckboxInput } from \"@sikt/sds-checkbox\";\nimport { ReactNode, useId } from \"react\";\nimport { FilterListExpand } from \"../components/FilterListExpand/FilterListExpand\";\nimport { FilterListIconLabel } from \"../components/FilterListIconLabel/FilterListIconLabel\";\nimport \"./filter-list-category.pcss\";\n\nexport interface FilterListCategoryProps {\n label: string;\n icon?: ReactNode;\n expanded?: boolean;\n onExpandToggle?: (expanded: boolean) => void;\n ariaLabelExpandToggle: NonNullable<string>;\n onCategoryToggle?: (checked: boolean) => void;\n indeterminate: boolean;\n checked: boolean;\n count?: number;\n children: ReactNode;\n}\n\nexport const FilterListCategory = ({\n label,\n icon,\n expanded,\n ariaLabelExpandToggle,\n onExpandToggle,\n onCategoryToggle,\n indeterminate,\n checked,\n count,\n children,\n}: FilterListCategoryProps) => {\n const id = useId();\n const hasCount = count !== undefined && count > 0;\n\n return (\n <FilterListExpand\n ariaLabelExpandToggle={ariaLabelExpandToggle}\n initialExpanded={expanded}\n onExpandToggle={onExpandToggle}\n header={\n <div className=\"sds-filter-list-category\">\n <CheckboxInput\n className=\"sds-filter-list-item__input\"\n aria-describedby={hasCount ? id : undefined}\n label={\n icon ? <FilterListIconLabel label={label} icon={icon} /> : label\n }\n onChange={(event) => {\n if (onCategoryToggle) {\n onCategoryToggle(event.target.checked);\n }\n }}\n indeterminate={indeterminate}\n checked={checked}\n />\n {hasCount && (\n <Badge\n visibility=\"strong\"\n className=\"sds-filter-list__badge\"\n id={id}\n icon={count}\n aria-label={`${count}`}\n />\n )}\n </div>\n }\n >\n <div className=\"sds-filter-list-category__content\">{children}</div>\n </FilterListExpand>\n );\n};\nFilterListCategory.displayName = \"FilterListCategory\";\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\n visibility=\"strong\"\n className=\"sds-filter-list__badge\"\n icon={count}\n aria-label={`${count}`}\n />\n )}\n </div>\n );\n\n return expandable ? (\n <FilterListExpand\n header={header}\n clickableHeader\n initialExpanded={expandable.expanded}\n onExpandToggle={expandable.onExpandToggle}\n >\n {children}\n </FilterListExpand>\n ) : (\n <>\n {header}\n {children}\n </>\n );\n};\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} 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"]}
|
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 l,Fragment as a}from"react/jsx-runtime";import{CheckboxInput as s}from"@sikt/sds-checkbox";import{RadioInput as n}from"@sikt/sds-radio";import{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:l,className:a})=>i("div",{className:e("sds-filter-list",a),children:l});h.displayName="FilterList";var x=({icon:e,label:a})=>l("div",{className:"sds-filter-list-icon-label",children:[i("span",{className:"sds-filter-list-icon-label__icon",children:e}),i("span",{children:a})]}),f=({type:e,label:a,icon:t,value:d,onChange:r,checked:c,count:o})=>{const p=void 0!==o?l("span",{className:"sds-filter-list-item__input-label",children:[i("span",{children:a})," ",l("span",{children:["(",o,")"]})]}):a,m=t?i(x,{label:p,icon:t}):p;return l("div",{className:"sds-filter-list-item",children:["radio"===e&&i(n,{className:"sds-filter-list-item__input",label:m,value:d,checked:c}),"checkbox"===e&&i(s,{className:"sds-filter-list-item__input",label:m,value:d,onChange:r,checked:c})]})};function b({header:e,clickableHeader:a=!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 l("div",{className:"sds-filter-list-expand",children:[a?l("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})]}):l("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:a,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:l("div",{className:"sds-filter-list-category",children:[i(s,{className:"sds-filter-list-item__input","aria-describedby":g?_:void 0,label:a?i(x,{label:e,icon:a}):e,onChange:e=>{o&&o(e.target.checked)},indeterminate:p,checked:m}),g&&i(t,{id:_,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=l("div",{className:m("sds-filter-list-section",n&&"sds-filter-list-section--expandable"),children:[i("span",{className:"sds-filter-list-section__label",children:e}),r&&i(t,{count:d})]});return n?i(b,{header:c,clickableHeader:!0,initialExpanded:n.expanded,onExpandToggle:n.onExpandToggle,children:s}):l(a,{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","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};\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 { Badge } from \"@sikt/sds-badge\";\nimport { CheckboxInput } from \"@sikt/sds-checkbox\";\nimport { ReactNode, useId } from \"react\";\nimport { FilterListExpand } from \"../components/FilterListExpand/FilterListExpand\";\nimport { FilterListIconLabel } from \"../components/FilterListIconLabel/FilterListIconLabel\";\nimport \"./filter-list-category.pcss\";\n\nexport interface FilterListCategoryProps {\n label: string;\n icon?: ReactNode;\n expanded?: boolean;\n onExpandToggle?: (expanded: boolean) => void;\n ariaLabelExpandToggle: NonNullable<string>;\n onCategoryToggle?: (checked: boolean) => void;\n indeterminate: boolean;\n checked: boolean;\n count?: number;\n children: ReactNode;\n}\n\nexport const FilterListCategory = ({\n label,\n icon,\n expanded,\n ariaLabelExpandToggle,\n onExpandToggle,\n onCategoryToggle,\n indeterminate,\n checked,\n count,\n children,\n}: FilterListCategoryProps) => {\n const id = useId();\n const hasCount = count !== undefined && count > 0;\n\n return (\n <FilterListExpand\n ariaLabelExpandToggle={ariaLabelExpandToggle}\n initialExpanded={expanded}\n onExpandToggle={onExpandToggle}\n header={\n <div className=\"sds-filter-list-category\">\n <CheckboxInput\n className=\"sds-filter-list-item__input\"\n aria-describedby={hasCount ? id : undefined}\n label={\n icon ? <FilterListIconLabel label={label} icon={icon} /> : label\n }\n onChange={(event) => {\n if (onCategoryToggle) {\n onCategoryToggle(event.target.checked);\n }\n }}\n indeterminate={indeterminate}\n checked={checked}\n />\n {hasCount && (\n <Badge\n visibility=\"strong\"\n className=\"sds-filter-list__badge\"\n id={id}\n icon={count}\n aria-label={`${count}`}\n />\n )}\n </div>\n }\n >\n <div className=\"sds-filter-list-category__content\">{children}</div>\n </FilterListExpand>\n );\n};\nFilterListCategory.displayName = \"FilterListCategory\";\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\n visibility=\"strong\"\n className=\"sds-filter-list__badge\"\n icon={count}\n aria-label={`${count}`}\n />\n )}\n </div>\n );\n\n return expandable ? (\n <FilterListExpand\n header={header}\n clickableHeader\n initialExpanded={expandable.expanded}\n onExpandToggle={expandable.onExpandToggle}\n >\n {children}\n </FilterListExpand>\n ) : (\n <>\n {header}\n {children}\n </>\n );\n};\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} 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"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sikt/sds-filter-list",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.0",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"homepage": "https://designsystem.sikt.no/",
|
|
6
6
|
"repository": {
|
|
@@ -35,11 +35,11 @@
|
|
|
35
35
|
"build": "tsup"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@sikt/sds-badge": "^2.2.1",
|
|
39
38
|
"@sikt/sds-button": "^4.2.0",
|
|
40
39
|
"@sikt/sds-checkbox": "^3.2.0",
|
|
41
40
|
"@sikt/sds-core": "^4.7.0",
|
|
42
41
|
"@sikt/sds-icons": "^3.1.0",
|
|
42
|
+
"@sikt/sds-notification": "^1.0.0",
|
|
43
43
|
"@sikt/sds-radio": "^4.0.0"
|
|
44
44
|
},
|
|
45
45
|
"peerDependencies": {
|