@helsenorge/designsystem-react 14.7.0 → 14.7.2
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/lib/CHANGELOG.md +17 -0
- package/lib/Chip.js +60 -0
- package/lib/Chip.js.map +1 -0
- package/lib/DrawerNavigation.js +81 -0
- package/lib/DrawerNavigation.js.map +1 -0
- package/lib/DrawerNavigation2.js +5 -0
- package/lib/DrawerNavigation2.js.map +1 -0
- package/lib/Filter.js +44 -0
- package/lib/Filter.js.map +1 -0
- package/lib/FilterButton.js +40 -0
- package/lib/FilterButton.js.map +1 -0
- package/lib/FilterButtonAndChipsWrapper.js +14 -0
- package/lib/FilterButtonAndChipsWrapper.js.map +1 -0
- package/lib/FilterDrawer.js +91 -0
- package/lib/FilterDrawer.js.map +1 -0
- package/lib/FilterLinkList.js +61 -0
- package/lib/FilterLinkList.js.map +1 -0
- package/lib/FilterLinkList2.js +5 -0
- package/lib/FilterLinkList2.js.map +1 -0
- package/lib/FilterOverviewLinkList.js +22 -0
- package/lib/FilterOverviewLinkList.js.map +1 -0
- package/lib/FilterOverviewSearch.js +16 -0
- package/lib/FilterOverviewSearch.js.map +1 -0
- package/lib/FilterResultCountAndSortWrapper.js +19 -0
- package/lib/FilterResultCountAndSortWrapper.js.map +1 -0
- package/lib/FilterSearch.js +87 -0
- package/lib/FilterSearch.js.map +1 -0
- package/lib/FilterSearch2.js +5 -0
- package/lib/FilterSearch2.js.map +1 -0
- package/lib/FilterSort.js +30 -0
- package/lib/FilterSort.js.map +1 -0
- package/lib/FilterStateWrapper.js +13 -0
- package/lib/FilterStateWrapper.js.map +1 -0
- package/lib/FormGroup.js +1 -1
- package/lib/Search.js +26 -0
- package/lib/Search.js.map +1 -0
- package/lib/components/Chip/index.js +1 -59
- package/lib/components/Filter/DrawerNavigation/index.js +2 -80
- package/lib/components/Filter/FilterButton/index.d.ts +3 -0
- package/lib/components/Filter/FilterButton/index.js +2 -0
- package/lib/components/Filter/FilterButtonAndChipsWrapper/index.d.ts +3 -0
- package/lib/components/Filter/FilterButtonAndChipsWrapper/index.js +2 -0
- package/lib/components/Filter/FilterDrawer/index.d.ts +3 -0
- package/lib/components/Filter/FilterDrawer/index.js +2 -0
- package/lib/components/Filter/FilterLinkList/index.d.ts +3 -0
- package/lib/components/Filter/FilterLinkList/index.js +3 -0
- package/lib/components/Filter/FilterOverviewLinkList/index.d.ts +3 -0
- package/lib/components/Filter/FilterOverviewLinkList/index.js +2 -0
- package/lib/components/Filter/FilterOverviewSearch/index.d.ts +3 -0
- package/lib/components/Filter/FilterOverviewSearch/index.js +2 -0
- package/lib/components/Filter/FilterResultCountAndSortWrapper/index.d.ts +3 -0
- package/lib/components/Filter/FilterResultCountAndSortWrapper/index.js +2 -0
- package/lib/components/Filter/FilterSearch/index.d.ts +3 -0
- package/lib/components/Filter/FilterSearch/index.js +2 -0
- package/lib/components/Filter/FilterSort/index.d.ts +3 -0
- package/lib/components/Filter/FilterSort/index.js +2 -0
- package/lib/components/Filter/FilterSort/styles.module.scss +4 -0
- package/lib/components/Filter/FilterStateWrapper/FilterStateWrapper.d.ts +9 -0
- package/lib/components/Filter/FilterStateWrapper/index.d.ts +3 -0
- package/lib/components/Filter/FilterStateWrapper/index.js +2 -0
- package/lib/components/Filter/FilterStateWrapper/styles.module.scss +7 -0
- package/lib/components/Filter/FilterStateWrapper/styles.module.scss.d.ts +9 -0
- package/lib/components/Filter/getFilterChips/index.d.ts +3 -0
- package/lib/components/Filter/getFilterChips/index.js +2 -0
- package/lib/components/Filter/index.d.ts +25 -0
- package/lib/components/Filter/index.js +31 -2
- package/lib/components/Filter/index.js.map +1 -1
- package/lib/components/Icons/Filter.js +1 -43
- package/lib/components/Icons/Search.js +1 -25
- package/lib/getFilterChips.js +30 -0
- package/lib/getFilterChips.js.map +1 -0
- package/lib/resourceHelper.js +31 -0
- package/lib/resourceHelper.js.map +1 -0
- package/lib/resources/HN.Designsystem.Filter.en-GB.json.d.ts +13 -0
- package/lib/resources/HN.Designsystem.Filter.nb-NO.json.d.ts +13 -0
- package/package.json +1 -1
- package/lib/components/Chip/index.js.map +0 -1
- package/lib/components/Filter/DrawerNavigation/index.js.map +0 -1
- package/lib/components/Icons/Filter.js.map +0 -1
- package/lib/components/Icons/Search.js.map +0 -1
package/lib/CHANGELOG.md
CHANGED
|
@@ -1,4 +1,21 @@
|
|
|
1
1
|
|
|
2
|
+
## [14.7.2](https://github.com/helsenorge/designsystem/compare/v14.7.1...v14.7.2) (2026-05-06)
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* **filterstatewrapper:** nytt wrapper komponent ([dd3b33f](https://github.com/helsenorge/designsystem/commit/dd3b33f5027a0d7636f2955896c62488f183af03)), closes [#377502](https://github.com/helsenorge/designsystem/issues/377502)
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
* **datepicker:** importer kastet feilmelding ([4646797](https://github.com/helsenorge/designsystem/commit/4646797552b27e4c8cd25bd5e8ae2d5f4f647007)), closes [#377492](https://github.com/helsenorge/designsystem/issues/377492)
|
|
11
|
+
|
|
12
|
+
## [14.7.1](https://github.com/helsenorge/designsystem/compare/v14.7.0...v14.7.1) (2026-05-05)
|
|
13
|
+
|
|
14
|
+
### Bug Fixes
|
|
15
|
+
|
|
16
|
+
* **filter:** fikset manglende export ([2bc9c41](https://github.com/helsenorge/designsystem/commit/2bc9c41d796b142c327c7b378687002caea9d5df)), closes [#377337](https://github.com/helsenorge/designsystem/issues/377337)
|
|
17
|
+
* **filtersort:** option alignes feils på windows ([b38115a](https://github.com/helsenorge/designsystem/commit/b38115a9421eb5f5c0b0ad1bb692016daffbd8ce)), closes [#377337](https://github.com/helsenorge/designsystem/issues/377337)
|
|
18
|
+
|
|
2
19
|
## [14.7.0](https://github.com/helsenorge/designsystem/compare/v14.6.0...v14.7.0) (2026-05-04)
|
|
3
20
|
|
|
4
21
|
### Features
|
package/lib/Chip.js
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { a as IconSize, n as AnalyticsId, s as LanguageLocales } from "./constants2.js";
|
|
2
|
+
import { t as Icon_default } from "./Icon.js";
|
|
3
|
+
import { n as useLanguage } from "./useLanguage.js";
|
|
4
|
+
import { t as X_default } from "./X.js";
|
|
5
|
+
import classNames from "classnames";
|
|
6
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
import styles from "./components/Chip/styles.module.scss";
|
|
8
|
+
var HN_Designsystem_Chip_en_GB_default = { removeAriaLabel: "Remove" };
|
|
9
|
+
var HN_Designsystem_Chip_nb_NO_default = { removeAriaLabel: "Fjern" };
|
|
10
|
+
const getResources = (language) => {
|
|
11
|
+
switch (language) {
|
|
12
|
+
case LanguageLocales.ENGLISH: return HN_Designsystem_Chip_en_GB_default;
|
|
13
|
+
case LanguageLocales.NORWEGIAN:
|
|
14
|
+
default: return HN_Designsystem_Chip_nb_NO_default;
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
var Chip = (props) => {
|
|
18
|
+
const { onClick, children, onChipClick, onCloseClick, chipButtonProps, closeButtonProps, testId, withCloseButton = true, resources } = props;
|
|
19
|
+
const { language } = useLanguage(LanguageLocales.NORWEGIAN);
|
|
20
|
+
const defaultResources = getResources(language);
|
|
21
|
+
const mergedResources = {
|
|
22
|
+
...defaultResources,
|
|
23
|
+
...resources,
|
|
24
|
+
removeAriaLabel: closeButtonProps?.["aria-label"] || resources?.removeAriaLabel || `${defaultResources.removeAriaLabel} ${children}`
|
|
25
|
+
};
|
|
26
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
27
|
+
className: styles["chip"],
|
|
28
|
+
children: [/* @__PURE__ */ jsx("button", {
|
|
29
|
+
...chipButtonProps,
|
|
30
|
+
className: classNames(styles["chip__chip"]),
|
|
31
|
+
onClick: onClick ? onClick : onChipClick,
|
|
32
|
+
type: "button",
|
|
33
|
+
"data-testid": testId,
|
|
34
|
+
"data-analyticsid": AnalyticsId.Tag,
|
|
35
|
+
children: /* @__PURE__ */ jsx("span", {
|
|
36
|
+
className: classNames(styles["chip__chip__inner"], { [styles["chip__chip__inner--without-close"]]: !withCloseButton }),
|
|
37
|
+
children
|
|
38
|
+
})
|
|
39
|
+
}), withCloseButton && /* @__PURE__ */ jsx("button", {
|
|
40
|
+
...closeButtonProps,
|
|
41
|
+
"aria-label": mergedResources.removeAriaLabel,
|
|
42
|
+
className: classNames(styles["chip__close"]),
|
|
43
|
+
onClick: onClick ? onClick : onCloseClick,
|
|
44
|
+
type: "button",
|
|
45
|
+
"data-testid": `${testId}-close`,
|
|
46
|
+
"data-analyticsid": AnalyticsId.Tag,
|
|
47
|
+
children: /* @__PURE__ */ jsx("span", {
|
|
48
|
+
className: styles["chip__close__inner"],
|
|
49
|
+
children: /* @__PURE__ */ jsx(Icon_default, {
|
|
50
|
+
svgIcon: X_default,
|
|
51
|
+
size: IconSize.XXSmall
|
|
52
|
+
})
|
|
53
|
+
})
|
|
54
|
+
})]
|
|
55
|
+
});
|
|
56
|
+
};
|
|
57
|
+
var Chip_default$1 = Chip;
|
|
58
|
+
export { Chip_default$1 as t };
|
|
59
|
+
|
|
60
|
+
//# sourceMappingURL=Chip.js.map
|
package/lib/Chip.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Chip.js","names":["Chip: React.FC<ChipProps>","mergedResources: HNDesignsystemChip"],"sources":["../src/resources/HN.Designsystem.Chip.en-GB.json","../src/resources/HN.Designsystem.Chip.nb-NO.json","../src/components/Chip/resourceHelper.ts","../src/components/Chip/Chip.tsx","../src/components/Chip/index.ts"],"sourcesContent":["{\n \"removeAriaLabel\": \"Remove\"\n}\n","{\n \"removeAriaLabel\": \"Fjern\"\n}\n","import type { HNDesignsystemChip } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Chip.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Chip.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemChip => {\n switch (language) {\n case LanguageLocales.ENGLISH:\n return enGB;\n case LanguageLocales.NORWEGIAN:\n default:\n return nbNO;\n }\n};\n","import classNames from 'classnames';\n\nimport type { HNDesignsystemChip } from '../../resources/Resources';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport Icon, { IconSize } from '../Icon';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface ChipProps {\n /** @deprecated Called when action is set and the chip is clicked on. action must also be set. */\n onClick?: () => void;\n /** Sets the text of the chip */\n children: string;\n /** Wether or not to have a close button */\n withCloseButton?: boolean;\n /** onClick handler for text-part of the chip */\n onChipClick?: () => void;\n /** Button props for main chip button */\n chipButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n /** onClick handler for close button */\n onCloseClick?: () => void;\n /** Button props for the close button */\n closeButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n /** Sets the data-testid attribute on the expander button. */\n testId?: string;\n /** Resources for the component */\n resources?: Partial<HNDesignsystemChip>;\n}\n\nconst Chip: React.FC<ChipProps> = props => {\n const {\n onClick,\n children,\n onChipClick,\n onCloseClick,\n chipButtonProps,\n closeButtonProps,\n testId,\n withCloseButton = true,\n resources,\n } = props;\n const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n const defaultResources = getResources(language);\n const mergedResources: HNDesignsystemChip = {\n ...defaultResources,\n ...resources,\n removeAriaLabel: closeButtonProps?.['aria-label'] || resources?.removeAriaLabel || `${defaultResources.removeAriaLabel} ${children}`,\n };\n\n return (\n <div className={styles['chip']}>\n <button\n {...chipButtonProps}\n className={classNames(styles['chip__chip'])}\n onClick={onClick ? onClick : onChipClick}\n type=\"button\"\n data-testid={testId}\n data-analyticsid={AnalyticsId.Tag}\n >\n <span\n className={classNames(styles['chip__chip__inner'], {\n [styles['chip__chip__inner--without-close']]: !withCloseButton,\n })}\n >\n {children}\n </span>\n </button>\n {withCloseButton && (\n <button\n {...closeButtonProps}\n aria-label={mergedResources.removeAriaLabel}\n className={classNames(styles['chip__close'])}\n onClick={onClick ? onClick : onCloseClick}\n type=\"button\"\n data-testid={`${testId}-close`}\n data-analyticsid={AnalyticsId.Tag}\n >\n <span className={styles['chip__close__inner']}>\n <Icon svgIcon={X} size={IconSize.XXSmall} />\n </span>\n </button>\n )}\n </div>\n );\n};\n\nexport default Chip;\n","import Chip from './Chip';\nexport * from './Chip';\nexport default Chip;\n"],"mappings":";;;;;;;;;AEMA,MAAa,gBAAgB,aAAkD;AAC7E,SAAQ,UAAR;EACE,KAAK,gBAAgB,QACnB,QAAO;EACT,KAAK,gBAAgB;EACrB,QACE,QAAO;;;ACqBb,IAAMA,QAA4B,UAAS;CACzC,MAAM,EACJ,SACA,UACA,aACA,cACA,iBACA,kBACA,QACA,kBAAkB,MAClB,cACE;CACJ,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAC5E,MAAM,mBAAmB,aAAa,SAAS;CAC/C,MAAMC,kBAAsC;EAC1C,GAAG;EACH,GAAG;EACH,iBAAiB,mBAAmB,iBAAiB,WAAW,mBAAmB,GAAG,iBAAiB,gBAAgB,GAAG;EAC3H;AAED,QACE,qBAAC,OAAA;EAAI,WAAW,OAAO;aACrB,oBAAC,UAAA;GACC,GAAI;GACJ,WAAW,WAAW,OAAO,cAAc;GAC3C,SAAS,UAAU,UAAU;GAC7B,MAAK;GACL,eAAa;GACb,oBAAkB,YAAY;aAE9B,oBAAC,QAAA;IACC,WAAW,WAAW,OAAO,sBAAsB,GAChD,OAAO,sCAAsC,CAAC,iBAChD,CAAC;IAED;KACI;IACA,EACR,mBACC,oBAAC,UAAA;GACC,GAAI;GACJ,cAAY,gBAAgB;GAC5B,WAAW,WAAW,OAAO,eAAe;GAC5C,SAAS,UAAU,UAAU;GAC7B,MAAK;GACL,eAAa,GAAG,OAAO;GACvB,oBAAkB,YAAY;aAE9B,oBAAC,QAAA;IAAK,WAAW,OAAO;cACtB,oBAAC,cAAA;KAAK,SAAS;KAAG,MAAM,SAAS;MAAW;KACvC;IACA,CAAA;GAEP;;ACpFV,IAAA,iBDwFe"}
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import { t as Drawer_default } from "./Drawer.js";
|
|
2
|
+
import { Children, createContext, isValidElement, useCallback, useContext, useMemo, useState } from "react";
|
|
3
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
const DrawerNavigationContext = createContext(null);
|
|
5
|
+
function useDrawerNavigation() {
|
|
6
|
+
const context = useContext(DrawerNavigationContext);
|
|
7
|
+
if (!context) throw new Error("useDrawerNavigation must be used inside a <DrawerNavigation> component");
|
|
8
|
+
return context;
|
|
9
|
+
}
|
|
10
|
+
function DrawerView(_props) {
|
|
11
|
+
return null;
|
|
12
|
+
}
|
|
13
|
+
function parseChildren(children) {
|
|
14
|
+
const views = [];
|
|
15
|
+
const other = [];
|
|
16
|
+
Children.forEach(children, (child) => {
|
|
17
|
+
if (isValidElement(child) && child.type === DrawerView) views.push({
|
|
18
|
+
id: child.props.id,
|
|
19
|
+
title: child.props.title,
|
|
20
|
+
home: child.props.home,
|
|
21
|
+
children: child.props.children,
|
|
22
|
+
onCloseButton: child.props.onCloseButton,
|
|
23
|
+
footer: child.props.footer,
|
|
24
|
+
drawerContentClassname: child.props.drawerContentClassname
|
|
25
|
+
});
|
|
26
|
+
else other.push(child);
|
|
27
|
+
});
|
|
28
|
+
return {
|
|
29
|
+
views,
|
|
30
|
+
other
|
|
31
|
+
};
|
|
32
|
+
}
|
|
33
|
+
function DrawerNavigation({ children, isOpen, initialView, onCloseButton, footer }) {
|
|
34
|
+
const { views, other } = useMemo(() => parseChildren(children), [children]);
|
|
35
|
+
const homeView = views.find((v) => v.home) ?? views[0];
|
|
36
|
+
const [viewStack, setViewStack] = useState([homeView?.id]);
|
|
37
|
+
const goToView = useCallback((id) => {
|
|
38
|
+
if (views.some((v) => v.id === id)) setViewStack((stack) => [...stack, id]);
|
|
39
|
+
}, [views]);
|
|
40
|
+
const goBack = useCallback(() => {
|
|
41
|
+
setViewStack((stack) => stack.length > 1 ? stack.slice(0, -1) : stack);
|
|
42
|
+
}, []);
|
|
43
|
+
const goToViewAndClearStack = useCallback((id) => {
|
|
44
|
+
if (views.some((v) => v.id === id)) setViewStack(id === homeView?.id ? [homeView.id] : [homeView?.id, id]);
|
|
45
|
+
}, [views, homeView]);
|
|
46
|
+
const currentViewId = viewStack[viewStack.length - 1];
|
|
47
|
+
const currentView = views.find((v) => v.id === currentViewId);
|
|
48
|
+
const navigate = useMemo(() => ({
|
|
49
|
+
goBack,
|
|
50
|
+
goToView,
|
|
51
|
+
goToViewAndClearStack
|
|
52
|
+
}), [
|
|
53
|
+
goBack,
|
|
54
|
+
goToView,
|
|
55
|
+
goToViewAndClearStack
|
|
56
|
+
]);
|
|
57
|
+
const [prevIsOpen, setPrevIsOpen] = useState(isOpen);
|
|
58
|
+
if (prevIsOpen !== isOpen) {
|
|
59
|
+
setPrevIsOpen(isOpen);
|
|
60
|
+
if (!isOpen) setViewStack([homeView?.id]);
|
|
61
|
+
else if (initialView && views.some((v) => v.id === initialView)) setViewStack(initialView === homeView?.id ? [homeView.id] : [homeView?.id, initialView]);
|
|
62
|
+
}
|
|
63
|
+
return /* @__PURE__ */ jsxs(DrawerNavigationContext.Provider, {
|
|
64
|
+
value: navigate,
|
|
65
|
+
children: [/* @__PURE__ */ jsx(Drawer_default, {
|
|
66
|
+
isOpen,
|
|
67
|
+
title: currentView?.title ?? "Filter",
|
|
68
|
+
withBackButton: viewStack.length > 1,
|
|
69
|
+
onRequestBack: goBack,
|
|
70
|
+
onRequestClose: currentView?.onCloseButton ?? onCloseButton,
|
|
71
|
+
footerContent: currentView?.footer ?? footer,
|
|
72
|
+
contentClassName: currentView?.drawerContentClassname,
|
|
73
|
+
children: currentView?.children
|
|
74
|
+
}), other]
|
|
75
|
+
});
|
|
76
|
+
}
|
|
77
|
+
DrawerNavigation.View = DrawerView;
|
|
78
|
+
var DrawerNavigation_default = DrawerNavigation;
|
|
79
|
+
export { DrawerNavigationContext as n, useDrawerNavigation as r, DrawerNavigation_default as t };
|
|
80
|
+
|
|
81
|
+
//# sourceMappingURL=DrawerNavigation.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DrawerNavigation.js","names":["views: DrawerViewProps[]","other: React.ReactNode[]"],"sources":["../src/components/Filter/DrawerNavigation/useDrawerNavigation.ts","../src/components/Filter/DrawerNavigation/DrawerNavigation.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nexport interface NavigateProps<ViewId extends string = string> {\n goToView: (id: ViewId) => void;\n goBack: () => void;\n goToViewAndClearStack: (id: ViewId) => void;\n}\n\nexport const DrawerNavigationContext = createContext<NavigateProps | null>(null);\n\nexport function useDrawerNavigation<ViewId extends string = string>(): NavigateProps<ViewId> {\n const context = useContext(DrawerNavigationContext);\n if (!context) {\n throw new Error('useDrawerNavigation must be used inside a <DrawerNavigation> component');\n }\n return context as NavigateProps<ViewId>;\n}\n","import type React from 'react';\nimport { Children, isValidElement, useCallback, useMemo, useState } from 'react';\n\nimport { type NavigateProps, DrawerNavigationContext } from './useDrawerNavigation';\nimport Drawer from '../../Drawer';\n\nexport interface DrawerViewProps<ViewId extends string = string> {\n /** Id for the view. Important for navigation */\n id: ViewId;\n /** Title used for Drawer in current view */\n title: string;\n /** Mark this view as the home/default view */\n home?: boolean;\n /** Content inside the drawer for this view */\n children: React.ReactNode;\n /** Default onClose callback for drawer. Will override onCloseButton on parent */\n onCloseButton?: () => void;\n /** Content sent to footer section of Drawer. Will override footer on parent */\n footer?: React.ReactNode;\n /** Classname set on the content inside Drawer */\n drawerContentClassname?: string;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction DrawerView<ViewId extends string>(_props: DrawerViewProps<ViewId>): React.ReactNode {\n // DrawerView is never rendered directly — DrawerNavigation reads its props\n return null;\n}\n\nexport interface DrawerNavigationProps {\n /** Views and other children components inside the Drawer navigation. Views are put in stack */\n children: React.ReactNode;\n /** Is drawer open or closed */\n isOpen: boolean;\n /** Navigate to this view when the drawer opens. Defaults to home view. */\n initialView?: string;\n /** Default onClose callback for drawer. View onCloseButton callback will override this. */\n onCloseButton?: () => void;\n /** Content sent to footer section of Drawer. View footer will override this */\n footer?: React.ReactNode;\n}\n\nfunction parseChildren(children: React.ReactNode): { views: DrawerViewProps[]; other: React.ReactNode[] } {\n const views: DrawerViewProps[] = [];\n const other: React.ReactNode[] = [];\n Children.forEach(children, child => {\n if (isValidElement<DrawerViewProps>(child) && child.type === DrawerView) {\n views.push({\n id: child.props.id,\n title: child.props.title,\n home: child.props.home,\n children: child.props.children,\n onCloseButton: child.props.onCloseButton,\n footer: child.props.footer,\n drawerContentClassname: child.props.drawerContentClassname,\n });\n } else {\n /** Added possibility of other children to support Modals that need navigation context */\n other.push(child);\n }\n });\n return { views, other };\n}\n\nfunction DrawerNavigation({ children, isOpen, initialView, onCloseButton, footer }: DrawerNavigationProps): React.ReactNode {\n const { views, other } = useMemo(() => parseChildren(children), [children]);\n\n const homeView = views.find(v => v.home) ?? views[0];\n const [viewStack, setViewStack] = useState<string[]>([homeView?.id]);\n\n const goToView = useCallback(\n (id: string): void => {\n if (views.some(v => v.id === id)) {\n setViewStack(stack => [...stack, id]);\n }\n },\n [views]\n );\n\n const goBack = useCallback((): void => {\n setViewStack(stack => (stack.length > 1 ? stack.slice(0, -1) : stack));\n }, []);\n\n const goToViewAndClearStack = useCallback(\n (id: string): void => {\n if (views.some(v => v.id === id)) {\n setViewStack(id === homeView?.id ? [homeView.id] : [homeView?.id, id]);\n }\n },\n [views, homeView]\n );\n\n const currentViewId = viewStack[viewStack.length - 1];\n const currentView = views.find(v => v.id === currentViewId);\n\n const navigate = useMemo<NavigateProps>(() => ({ goBack, goToView, goToViewAndClearStack }), [goBack, goToView, goToViewAndClearStack]);\n\n const [prevIsOpen, setPrevIsOpen] = useState(isOpen);\n if (prevIsOpen !== isOpen) {\n setPrevIsOpen(isOpen);\n if (!isOpen) {\n setViewStack([homeView?.id]);\n } else if (initialView && views.some(v => v.id === initialView)) {\n setViewStack(initialView === homeView?.id ? [homeView.id] : [homeView?.id, initialView]);\n }\n }\n\n return (\n <DrawerNavigationContext.Provider value={navigate}>\n <Drawer\n isOpen={isOpen}\n title={currentView?.title ?? 'Filter'}\n withBackButton={viewStack.length > 1}\n onRequestBack={goBack}\n onRequestClose={currentView?.onCloseButton ?? onCloseButton}\n footerContent={currentView?.footer ?? footer}\n contentClassName={currentView?.drawerContentClassname}\n >\n {currentView?.children}\n </Drawer>\n {other}\n </DrawerNavigationContext.Provider>\n );\n}\n\nDrawerNavigation.View = DrawerView;\n\nexport default DrawerNavigation;\n"],"mappings":";;;AAQA,MAAa,0BAA0B,cAAoC,KAAK;AAEhF,SAAgB,sBAA6E;CAC3F,MAAM,UAAU,WAAW,wBAAwB;AACnD,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,yEAAyE;AAE3F,QAAO;;ACST,SAAS,WAAkC,QAAkD;AAE3F,QAAO;;AAgBT,SAAS,cAAc,UAAmF;CACxG,MAAMA,QAA2B,EAAE;CACnC,MAAMC,QAA2B,EAAE;AACnC,UAAS,QAAQ,WAAU,UAAS;AAClC,MAAI,eAAgC,MAAM,IAAI,MAAM,SAAS,WAC3D,OAAM,KAAK;GACT,IAAI,MAAM,MAAM;GAChB,OAAO,MAAM,MAAM;GACnB,MAAM,MAAM,MAAM;GAClB,UAAU,MAAM,MAAM;GACtB,eAAe,MAAM,MAAM;GAC3B,QAAQ,MAAM,MAAM;GACpB,wBAAwB,MAAM,MAAM;GACrC,CAAC;MAGF,OAAM,KAAK,MAAM;GAEnB;AACF,QAAO;EAAE;EAAO;EAAO;;AAGzB,SAAS,iBAAiB,EAAE,UAAU,QAAQ,aAAa,eAAe,UAAkD;CAC1H,MAAM,EAAE,OAAO,UAAU,cAAc,cAAc,SAAS,EAAE,CAAC,SAAS,CAAC;CAE3E,MAAM,WAAW,MAAM,MAAK,MAAK,EAAE,KAAK,IAAI,MAAM;CAClD,MAAM,CAAC,WAAW,gBAAgB,SAAmB,CAAC,UAAU,GAAG,CAAC;CAEpE,MAAM,WAAW,aACd,OAAqB;AACpB,MAAI,MAAM,MAAK,MAAK,EAAE,OAAO,GAAG,CAC9B,eAAa,UAAS,CAAC,GAAG,OAAO,GAAG,CAAC;IAGzC,CAAC,MAAM,CACR;CAED,MAAM,SAAS,kBAAwB;AACrC,gBAAa,UAAU,MAAM,SAAS,IAAI,MAAM,MAAM,GAAG,GAAG,GAAG,MAAO;IACrE,EAAE,CAAC;CAEN,MAAM,wBAAwB,aAC3B,OAAqB;AACpB,MAAI,MAAM,MAAK,MAAK,EAAE,OAAO,GAAG,CAC9B,cAAa,OAAO,UAAU,KAAK,CAAC,SAAS,GAAG,GAAG,CAAC,UAAU,IAAI,GAAG,CAAC;IAG1E,CAAC,OAAO,SAAS,CAClB;CAED,MAAM,gBAAgB,UAAU,UAAU,SAAS;CACnD,MAAM,cAAc,MAAM,MAAK,MAAK,EAAE,OAAO,cAAc;CAE3D,MAAM,WAAW,eAA8B;EAAE;EAAQ;EAAU;EAAuB,GAAG;EAAC;EAAQ;EAAU;EAAsB,CAAC;CAEvI,MAAM,CAAC,YAAY,iBAAiB,SAAS,OAAO;AACpD,KAAI,eAAe,QAAQ;AACzB,gBAAc,OAAO;AACrB,MAAI,CAAC,OACH,cAAa,CAAC,UAAU,GAAG,CAAC;WACnB,eAAe,MAAM,MAAK,MAAK,EAAE,OAAO,YAAY,CAC7D,cAAa,gBAAgB,UAAU,KAAK,CAAC,SAAS,GAAG,GAAG,CAAC,UAAU,IAAI,YAAY,CAAC;;AAI5F,QACE,qBAAC,wBAAwB,UAAA;EAAS,OAAO;aACvC,oBAAC,gBAAA;GACS;GACR,OAAO,aAAa,SAAS;GAC7B,gBAAgB,UAAU,SAAS;GACnC,eAAe;GACf,gBAAgB,aAAa,iBAAiB;GAC9C,eAAe,aAAa,UAAU;GACtC,kBAAkB,aAAa;aAE9B,aAAa;IACP,EACR,MAAA;GACgC;;AAIvC,iBAAiB,OAAO;AAExB,IAAA,2BAAe"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DrawerNavigation2.js","names":[],"sources":["../src/components/Filter/DrawerNavigation/index.ts"],"sourcesContent":["import DrawerNavigation from './DrawerNavigation';\nexport * from './DrawerNavigation';\nexport * from './useDrawerNavigation';\nexport default DrawerNavigation;\n"],"mappings":";AAGA,IAAA,6BAAe"}
|
package/lib/Filter.js
ADDED
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { t as getIcon } from "./utils.js";
|
|
2
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
var Filter = ({ size, isHovered }) => {
|
|
4
|
+
return getIcon({
|
|
5
|
+
size,
|
|
6
|
+
isHovered,
|
|
7
|
+
normal: /* @__PURE__ */ jsx("path", {
|
|
8
|
+
"fill-rule": "evenodd",
|
|
9
|
+
"clip-rule": "evenodd",
|
|
10
|
+
d: "M21.034 30.338a4 4 0 0 1 3.926 3.234H41v1.3H24.998a4 4 0 0 1-7.94-.1H7v-1.2h10.108a4 4 0 0 1 3.926-3.234Zm0 1.3a2.7 2.7 0 1 0 .001 5.4 2.7 2.7 0 0 0 0-5.4ZM32.697 20a4 4 0 0 1 3.936 3.286H41v1.3h-4.346a4 4 0 0 1-7.914 0H7v-1.3h21.762A4 4 0 0 1 32.697 20Zm0 1.3a2.7 2.7 0 1 0 0 5.4 2.7 2.7 0 0 0 0-5.4ZM16.571 9.726A4 4 0 0 1 20.505 13H41v1.3H20.53a4 4 0 0 1-7.917 0H7V13h5.638a4 4 0 0 1 3.933-3.274Zm0 1.3a2.7 2.7 0 1 0 0 5.4 2.7 2.7 0 0 0 0-5.4Z"
|
|
11
|
+
}),
|
|
12
|
+
normalHover: /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
13
|
+
/* @__PURE__ */ jsx("path", {
|
|
14
|
+
"fill-rule": "evenodd",
|
|
15
|
+
"clip-rule": "evenodd",
|
|
16
|
+
d: "M17.0332 30.3389C18.9803 30.3389 20.6015 31.7297 20.959 33.5723H40.999V34.8721H20.9971C20.7361 36.8288 19.0613 38.3389 17.0332 38.3389C15.0051 38.3389 13.3303 36.8288 13.0693 34.8721H6.99902V33.5723H13.1074C13.4649 31.7297 15.0861 30.3389 17.0332 30.3389ZM17.0332 31.6387C15.542 31.6387 14.333 32.8477 14.333 34.3389C14.3333 35.8298 15.5422 37.0391 17.0332 37.0391C18.5242 37.0391 19.7331 35.8298 19.7334 34.3389C19.7334 32.8477 18.5244 31.6387 17.0332 31.6387Z"
|
|
17
|
+
}),
|
|
18
|
+
/* @__PURE__ */ jsx("path", {
|
|
19
|
+
"fill-rule": "evenodd",
|
|
20
|
+
"clip-rule": "evenodd",
|
|
21
|
+
d: "M32.6963 20C34.6617 20 36.2952 21.4177 36.6318 23.2861H40.999V24.5859H36.6533C36.3698 26.5173 34.7064 28 32.6963 28C30.6862 28 29.0228 26.5173 28.7393 24.5859H6.99902V23.2861H28.7607C29.0974 21.4177 30.7309 20 32.6963 20ZM32.6963 21.2998C31.2051 21.2998 29.9961 22.5088 29.9961 24C29.9961 25.4912 31.2051 26.7002 32.6963 26.7002C34.1875 26.7002 35.3965 25.4912 35.3965 24C35.3965 22.5088 34.1875 21.2998 32.6963 21.2998Z"
|
|
22
|
+
}),
|
|
23
|
+
/* @__PURE__ */ jsx("path", {
|
|
24
|
+
"fill-rule": "evenodd",
|
|
25
|
+
"clip-rule": "evenodd",
|
|
26
|
+
d: "M19.5703 9.72461C21.5318 9.72461 23.1627 11.1371 23.5039 13H40.999V14.2998H23.5283C23.2496 16.2366 21.5843 17.7256 19.5703 17.7256C17.5564 17.7256 15.891 16.2366 15.6123 14.2998H6.99902V13H15.6367C15.9779 11.1371 17.6088 9.72461 19.5703 9.72461ZM19.5703 11.0254C18.0791 11.0254 16.8701 12.2344 16.8701 13.7256C16.8704 15.2165 18.0793 16.4258 19.5703 16.4258C21.0613 16.4258 22.2702 15.2165 22.2705 13.7256C22.2705 12.2344 21.0615 11.0254 19.5703 11.0254Z"
|
|
27
|
+
})
|
|
28
|
+
] }),
|
|
29
|
+
xSmall: /* @__PURE__ */ jsx("path", {
|
|
30
|
+
"fill-rule": "evenodd",
|
|
31
|
+
"clip-rule": "evenodd",
|
|
32
|
+
d: "M22.111 27.892a2.974 2.974 0 0 1 2.905 2.342h11.935v1.264H25.015a2.973 2.973 0 0 1-2.904 2.34l-.303-.015a2.973 2.973 0 0 1-2.6-2.325H11.68v-1.264h7.529a2.973 2.973 0 0 1 2.903-2.342Zm0 1.263a1.71 1.71 0 1 0 .001 3.42 1.71 1.71 0 0 0 0-3.42Zm8.669-8.229a2.974 2.974 0 0 1 2.904 2.343h3.267v1.263h-3.268a2.973 2.973 0 0 1-2.904 2.341l-.303-.016a2.973 2.973 0 0 1-2.599-2.325H11.679v-1.263h16.197a2.973 2.973 0 0 1 2.903-2.343Zm0 1.263a1.71 1.71 0 1 0 0 3.421 1.71 1.71 0 0 0 0-3.42Zm-11.987-8.295a2.974 2.974 0 0 1 2.905 2.34h15.253v1.264H21.697a2.973 2.973 0 0 1-2.904 2.342l-.303-.015a2.973 2.973 0 0 1-2.6-2.327h-4.21v-1.263h4.21a2.973 2.973 0 0 1 2.903-2.341Zm0 1.263a1.71 1.71 0 1 0 .001 3.42 1.71 1.71 0 0 0 0-3.42Z"
|
|
33
|
+
}),
|
|
34
|
+
xSmallHover: /* @__PURE__ */ jsx("path", {
|
|
35
|
+
"fill-rule": "evenodd",
|
|
36
|
+
"clip-rule": "evenodd",
|
|
37
|
+
d: "M19.585 27.892a2.975 2.975 0 0 1 2.906 2.342h14.46v1.264H22.489a2.973 2.973 0 0 1-2.904 2.34l-.303-.015a2.974 2.974 0 0 1-2.6-2.327h-5.003v-1.263h5.001a2.974 2.974 0 0 1 2.905-2.341Zm0 1.263a1.71 1.71 0 1 0 0 3.42 1.71 1.71 0 0 0 0-3.42Zm11.195-8.229a2.974 2.974 0 0 1 2.904 2.343h3.267v1.263h-3.268a2.973 2.973 0 0 1-2.904 2.341l-.303-.016a2.973 2.973 0 0 1-2.599-2.325H11.679v-1.263h16.197a2.973 2.973 0 0 1 2.903-2.343Zm0 1.263a1.71 1.71 0 1 0 0 3.421 1.71 1.71 0 0 0 0-3.42Zm-9.46-8.295a2.974 2.974 0 0 1 2.904 2.34h12.727v1.264H24.223a2.973 2.973 0 0 1-2.904 2.342l-.303-.015a2.973 2.973 0 0 1-2.6-2.327H11.68v-1.263h6.737a2.973 2.973 0 0 1 2.903-2.341Zm0 1.263a1.71 1.71 0 1 0 0 3.42 1.71 1.71 0 0 0 0-3.42Z"
|
|
38
|
+
})
|
|
39
|
+
});
|
|
40
|
+
};
|
|
41
|
+
var Filter_default = Filter;
|
|
42
|
+
export { Filter_default as t };
|
|
43
|
+
|
|
44
|
+
//# sourceMappingURL=Filter.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Filter.js","names":["Filter: React.FC<SvgPathProps>"],"sources":["../src/components/Icons/Filter.tsx"],"sourcesContent":["import type { SvgPathProps } from '../Icon';\n\nimport { getIcon } from '../Icon/utils';\n\nconst Filter: React.FC<SvgPathProps> = ({ size, isHovered }: SvgPathProps): React.ReactElement => {\n const normal = (\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M21.034 30.338a4 4 0 0 1 3.926 3.234H41v1.3H24.998a4 4 0 0 1-7.94-.1H7v-1.2h10.108a4 4 0 0 1 3.926-3.234Zm0 1.3a2.7 2.7 0 1 0 .001 5.4 2.7 2.7 0 0 0 0-5.4ZM32.697 20a4 4 0 0 1 3.936 3.286H41v1.3h-4.346a4 4 0 0 1-7.914 0H7v-1.3h21.762A4 4 0 0 1 32.697 20Zm0 1.3a2.7 2.7 0 1 0 0 5.4 2.7 2.7 0 0 0 0-5.4ZM16.571 9.726A4 4 0 0 1 20.505 13H41v1.3H20.53a4 4 0 0 1-7.917 0H7V13h5.638a4 4 0 0 1 3.933-3.274Zm0 1.3a2.7 2.7 0 1 0 0 5.4 2.7 2.7 0 0 0 0-5.4Z\"\n />\n );\n\n const normalHover = (\n <>\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M17.0332 30.3389C18.9803 30.3389 20.6015 31.7297 20.959 33.5723H40.999V34.8721H20.9971C20.7361 36.8288 19.0613 38.3389 17.0332 38.3389C15.0051 38.3389 13.3303 36.8288 13.0693 34.8721H6.99902V33.5723H13.1074C13.4649 31.7297 15.0861 30.3389 17.0332 30.3389ZM17.0332 31.6387C15.542 31.6387 14.333 32.8477 14.333 34.3389C14.3333 35.8298 15.5422 37.0391 17.0332 37.0391C18.5242 37.0391 19.7331 35.8298 19.7334 34.3389C19.7334 32.8477 18.5244 31.6387 17.0332 31.6387Z\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M32.6963 20C34.6617 20 36.2952 21.4177 36.6318 23.2861H40.999V24.5859H36.6533C36.3698 26.5173 34.7064 28 32.6963 28C30.6862 28 29.0228 26.5173 28.7393 24.5859H6.99902V23.2861H28.7607C29.0974 21.4177 30.7309 20 32.6963 20ZM32.6963 21.2998C31.2051 21.2998 29.9961 22.5088 29.9961 24C29.9961 25.4912 31.2051 26.7002 32.6963 26.7002C34.1875 26.7002 35.3965 25.4912 35.3965 24C35.3965 22.5088 34.1875 21.2998 32.6963 21.2998Z\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M19.5703 9.72461C21.5318 9.72461 23.1627 11.1371 23.5039 13H40.999V14.2998H23.5283C23.2496 16.2366 21.5843 17.7256 19.5703 17.7256C17.5564 17.7256 15.891 16.2366 15.6123 14.2998H6.99902V13H15.6367C15.9779 11.1371 17.6088 9.72461 19.5703 9.72461ZM19.5703 11.0254C18.0791 11.0254 16.8701 12.2344 16.8701 13.7256C16.8704 15.2165 18.0793 16.4258 19.5703 16.4258C21.0613 16.4258 22.2702 15.2165 22.2705 13.7256C22.2705 12.2344 21.0615 11.0254 19.5703 11.0254Z\"\n />\n </>\n );\n\n const xSmall = (\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M22.111 27.892a2.974 2.974 0 0 1 2.905 2.342h11.935v1.264H25.015a2.973 2.973 0 0 1-2.904 2.34l-.303-.015a2.973 2.973 0 0 1-2.6-2.325H11.68v-1.264h7.529a2.973 2.973 0 0 1 2.903-2.342Zm0 1.263a1.71 1.71 0 1 0 .001 3.42 1.71 1.71 0 0 0 0-3.42Zm8.669-8.229a2.974 2.974 0 0 1 2.904 2.343h3.267v1.263h-3.268a2.973 2.973 0 0 1-2.904 2.341l-.303-.016a2.973 2.973 0 0 1-2.599-2.325H11.679v-1.263h16.197a2.973 2.973 0 0 1 2.903-2.343Zm0 1.263a1.71 1.71 0 1 0 0 3.421 1.71 1.71 0 0 0 0-3.42Zm-11.987-8.295a2.974 2.974 0 0 1 2.905 2.34h15.253v1.264H21.697a2.973 2.973 0 0 1-2.904 2.342l-.303-.015a2.973 2.973 0 0 1-2.6-2.327h-4.21v-1.263h4.21a2.973 2.973 0 0 1 2.903-2.341Zm0 1.263a1.71 1.71 0 1 0 .001 3.42 1.71 1.71 0 0 0 0-3.42Z\"\n />\n );\n\n const xSmallHover = (\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M19.585 27.892a2.975 2.975 0 0 1 2.906 2.342h14.46v1.264H22.489a2.973 2.973 0 0 1-2.904 2.34l-.303-.015a2.974 2.974 0 0 1-2.6-2.327h-5.003v-1.263h5.001a2.974 2.974 0 0 1 2.905-2.341Zm0 1.263a1.71 1.71 0 1 0 0 3.42 1.71 1.71 0 0 0 0-3.42Zm11.195-8.229a2.974 2.974 0 0 1 2.904 2.343h3.267v1.263h-3.268a2.973 2.973 0 0 1-2.904 2.341l-.303-.016a2.973 2.973 0 0 1-2.599-2.325H11.679v-1.263h16.197a2.973 2.973 0 0 1 2.903-2.343Zm0 1.263a1.71 1.71 0 1 0 0 3.421 1.71 1.71 0 0 0 0-3.42Zm-9.46-8.295a2.974 2.974 0 0 1 2.904 2.34h12.727v1.264H24.223a2.973 2.973 0 0 1-2.904 2.342l-.303-.015a2.973 2.973 0 0 1-2.6-2.327H11.68v-1.263h6.737a2.973 2.973 0 0 1 2.903-2.341Zm0 1.263a1.71 1.71 0 1 0 0 3.42 1.71 1.71 0 0 0 0-3.42Z\"\n />\n );\n\n return getIcon({ size, isHovered, normal, normalHover, xSmall, xSmallHover });\n};\n\nexport default Filter;\n"],"mappings":";;AAIA,IAAMA,UAAkC,EAAE,MAAM,gBAAkD;AA6ChG,QAAO,QAAQ;EAAE;EAAM;EAAW,QA3ChC,oBAAC,QAAA;GACC,aAAU;GACV,aAAU;GACV,GAAE;IACF;EAuCsC,aAnCxC,qBAAA,UAAA,EAAA,UAAA;GACE,oBAAC,QAAA;IACC,aAAU;IACV,aAAU;IACV,GAAE;KACF;GACF,oBAAC,QAAA;IACC,aAAU;IACV,aAAU;IACV,GAAE;KACF;GACF,oBAAC,QAAA;IACC,aAAU;IACV,aAAU;IACV,GAAE;KACF;MACD;EAmBkD,QAfrD,oBAAC,QAAA;GACC,aAAU;GACV,aAAU;GACV,GAAE;IACF;EAW2D,aAP7D,oBAAC,QAAA;GACC,aAAU;GACV,aAAU;GACV,GAAE;IACF;EAGwE,CAAC;;AAG/E,IAAA,iBAAe"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { a as IconSize, s as LanguageLocales } from "./constants2.js";
|
|
2
|
+
import { t as usePseudoClasses } from "./usePseudoClasses.js";
|
|
3
|
+
import { t as Icon_default } from "./Icon.js";
|
|
4
|
+
import { n as useLanguage } from "./useLanguage.js";
|
|
5
|
+
import { t as Filter_default } from "./Filter.js";
|
|
6
|
+
import { t as getResources } from "./resourceHelper.js";
|
|
7
|
+
import classNames from "classnames";
|
|
8
|
+
import { useRef } from "react";
|
|
9
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
10
|
+
import styles from "./components/Filter/FilterButton/styles.module.scss";
|
|
11
|
+
var FilterButton = (props) => {
|
|
12
|
+
const { resources } = props;
|
|
13
|
+
const { language } = useLanguage(LanguageLocales.NORWEGIAN);
|
|
14
|
+
const mergedResources = {
|
|
15
|
+
...getResources(language),
|
|
16
|
+
...resources
|
|
17
|
+
};
|
|
18
|
+
const buttonRef = useRef(null);
|
|
19
|
+
const { isHovered } = usePseudoClasses(buttonRef);
|
|
20
|
+
return /* @__PURE__ */ jsx("button", {
|
|
21
|
+
...props,
|
|
22
|
+
className: styles["filter-button"],
|
|
23
|
+
ref: buttonRef,
|
|
24
|
+
children: /* @__PURE__ */ jsxs("span", {
|
|
25
|
+
className: classNames(styles["filter-button__inner"], { [styles["filter-button__inner--hovered"]]: isHovered }),
|
|
26
|
+
children: [/* @__PURE__ */ jsx(Icon_default, {
|
|
27
|
+
svgIcon: Filter_default,
|
|
28
|
+
isHovered,
|
|
29
|
+
size: IconSize.XSmall
|
|
30
|
+
}), /* @__PURE__ */ jsx("span", {
|
|
31
|
+
className: styles["filter-button__text"],
|
|
32
|
+
children: mergedResources.filterButtonText
|
|
33
|
+
})]
|
|
34
|
+
})
|
|
35
|
+
});
|
|
36
|
+
};
|
|
37
|
+
var FilterButton_default$1 = FilterButton;
|
|
38
|
+
export { FilterButton_default$1 as t };
|
|
39
|
+
|
|
40
|
+
//# sourceMappingURL=FilterButton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FilterButton.js","names":["FilterButton: React.FC<FilterButtonProps>"],"sources":["../src/components/Filter/FilterButton/FilterButton.tsx","../src/components/Filter/FilterButton/index.ts"],"sourcesContent":["import { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { HNDesignsystemFilter } from '../../../resources/Resources';\n\nimport { IconSize, LanguageLocales } from '../../../constants';\nimport { useLanguage } from '../../../hooks/useLanguage';\nimport { usePseudoClasses } from '../../../hooks/usePseudoClasses';\nimport Icon from '../../Icon';\nimport Filter from '../../Icons/Filter';\nimport { getResources } from '../resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n /** Texts if overriding SOT */\n resources?: Partial<HNDesignsystemFilter>;\n}\n\nconst FilterButton: React.FC<FilterButtonProps> = props => {\n const { resources } = props;\n\n const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n const defaultResources = getResources(language);\n\n const mergedResources = {\n ...defaultResources,\n ...resources,\n };\n\n const buttonRef = useRef<HTMLButtonElement>(null);\n const { isHovered } = usePseudoClasses(buttonRef);\n\n return (\n <button {...props} className={styles['filter-button']} ref={buttonRef}>\n <span\n className={classNames(styles['filter-button__inner'], {\n [styles['filter-button__inner--hovered']]: isHovered,\n })}\n >\n <Icon svgIcon={Filter} isHovered={isHovered} size={IconSize.XSmall} />\n <span className={styles['filter-button__text']}>{mergedResources.filterButtonText}</span>\n </span>\n </button>\n );\n};\n\nexport default FilterButton;\n","import FilterButton from './FilterButton';\nexport * from './FilterButton';\nexport default FilterButton;\n"],"mappings":";;;;;;;;;;AAoBA,IAAMA,gBAA4C,UAAS;CACzD,MAAM,EAAE,cAAc;CAEtB,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAG5E,MAAM,kBAAkB;EACtB,GAHuB,aAAa,SAAS;EAI7C,GAAG;EACJ;CAED,MAAM,YAAY,OAA0B,KAAK;CACjD,MAAM,EAAE,cAAc,iBAAiB,UAAU;AAEjD,QACE,oBAAC,UAAA;EAAO,GAAI;EAAO,WAAW,OAAO;EAAkB,KAAK;YAC1D,qBAAC,QAAA;GACC,WAAW,WAAW,OAAO,yBAAyB,GACnD,OAAO,mCAAmC,WAC5C,CAAC;cAEF,oBAAC,cAAA;IAAK,SAAS;IAAmB;IAAW,MAAM,SAAS;KAAU,EACtE,oBAAC,QAAA;IAAK,WAAW,OAAO;cAAyB,gBAAgB;KAAwB,CAAA;IACpF;GACA;;AC1Cb,IAAA,yBD8Ce"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import classNames from "classnames";
|
|
2
|
+
import { jsxs } from "react/jsx-runtime";
|
|
3
|
+
import styles from "./components/Filter/FilterButtonAndChipsWrapper/styles.module.scss";
|
|
4
|
+
var FilterButtonAndChipsWrapper = ({ filterButtonComponent, filterChips, testId }) => {
|
|
5
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
6
|
+
className: classNames(styles["filter-chip-bar"]),
|
|
7
|
+
"data-testid": testId,
|
|
8
|
+
children: [filterButtonComponent, filterChips]
|
|
9
|
+
});
|
|
10
|
+
};
|
|
11
|
+
var FilterButtonAndChipsWrapper_default$1 = FilterButtonAndChipsWrapper;
|
|
12
|
+
export { FilterButtonAndChipsWrapper_default$1 as t };
|
|
13
|
+
|
|
14
|
+
//# sourceMappingURL=FilterButtonAndChipsWrapper.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FilterButtonAndChipsWrapper.js","names":["FilterButtonAndChipsWrapper: React.FC<FilterButtonAndChipsWrapperProps>"],"sources":["../src/components/Filter/FilterButtonAndChipsWrapper/FilterButtonAndChipsWrapper.tsx","../src/components/Filter/FilterButtonAndChipsWrapper/index.ts"],"sourcesContent":["import type React from 'react';\n\nimport classNames from 'classnames';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterButtonAndChipsWrapperProps {\n /** FilterButton content area */\n filterButtonComponent: React.ReactNode;\n /** Content area for rendering filter chips */\n filterChips: React.ReactNode[];\n /** test id that is placed on the wrapper */\n testId?: string;\n}\n\nconst FilterButtonAndChipsWrapper: React.FC<FilterButtonAndChipsWrapperProps> = ({ filterButtonComponent, filterChips, testId }) => {\n return (\n <div className={classNames(styles['filter-chip-bar'])} data-testid={testId}>\n {filterButtonComponent}\n {filterChips}\n </div>\n );\n};\n\nexport default FilterButtonAndChipsWrapper;\n","import FilterButtonAndChipsWrapper from './FilterButtonAndChipsWrapper';\nexport * from './FilterButtonAndChipsWrapper';\nexport default FilterButtonAndChipsWrapper;\n"],"mappings":";;;AAeA,IAAMA,+BAA2E,EAAE,uBAAuB,aAAa,aAAa;AAClI,QACE,qBAAC,OAAA;EAAI,WAAW,WAAW,OAAO,mBAAmB;EAAE,eAAa;aACjE,uBACA,YAAA;GACG;;AClBV,IAAA,wCDsBe"}
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import { s as LanguageLocales } from "./constants2.js";
|
|
2
|
+
import { n as useLanguage } from "./useLanguage.js";
|
|
3
|
+
import { t as Button_default } from "./Button.js";
|
|
4
|
+
import { t as formatResource } from "./resource.js";
|
|
5
|
+
import { t as DrawerNavigation_default } from "./DrawerNavigation.js";
|
|
6
|
+
import { t as getResources } from "./resourceHelper.js";
|
|
7
|
+
import { Children, isValidElement } from "react";
|
|
8
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
9
|
+
import styles from "./components/Filter/FilterDrawer/styles.module.scss";
|
|
10
|
+
function FilterDrawerOverview(_props) {
|
|
11
|
+
return null;
|
|
12
|
+
}
|
|
13
|
+
function FilterDrawerView(_props) {
|
|
14
|
+
return null;
|
|
15
|
+
}
|
|
16
|
+
function FilterDrawer({ drawer, onClose, footer, onReset, resultCount, resources, children }) {
|
|
17
|
+
const { language } = useLanguage(LanguageLocales.NORWEGIAN);
|
|
18
|
+
const mergedResources = {
|
|
19
|
+
...getResources(language),
|
|
20
|
+
...resources
|
|
21
|
+
};
|
|
22
|
+
const handleClose = () => {
|
|
23
|
+
if (onClose) onClose();
|
|
24
|
+
else drawer.close();
|
|
25
|
+
};
|
|
26
|
+
const showResultButtonText = resultCount !== void 0 ? formatResource(mergedResources.showButtonText, resultCount) : mergedResources.showButtonText;
|
|
27
|
+
const defaultResetButton = onReset && /* @__PURE__ */ jsx(Button_default, {
|
|
28
|
+
onClick: onReset,
|
|
29
|
+
variant: "borderless",
|
|
30
|
+
children: mergedResources.resetButtonText
|
|
31
|
+
});
|
|
32
|
+
const defaultShowResultsButton = showResultButtonText && /* @__PURE__ */ jsx(Button_default, {
|
|
33
|
+
onClick: handleClose,
|
|
34
|
+
children: showResultButtonText
|
|
35
|
+
});
|
|
36
|
+
const defaultFooter = onReset || showResultButtonText ? /* @__PURE__ */ jsxs("div", {
|
|
37
|
+
className: styles["filter-drawer__footer"],
|
|
38
|
+
children: [defaultResetButton, defaultShowResultsButton]
|
|
39
|
+
}) : void 0;
|
|
40
|
+
const fallbackFooter = footer ?? defaultFooter;
|
|
41
|
+
const generateViewFooter = (viewOnReset, viewOnClose, noResetButton) => {
|
|
42
|
+
if (!viewOnReset && !viewOnClose && !noResetButton) return;
|
|
43
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
44
|
+
className: styles["filter-drawer__footer"],
|
|
45
|
+
children: [!noResetButton && (viewOnReset ? /* @__PURE__ */ jsx(Button_default, {
|
|
46
|
+
onClick: viewOnReset,
|
|
47
|
+
variant: "borderless",
|
|
48
|
+
children: mergedResources.resetButtonText
|
|
49
|
+
}) : defaultResetButton), viewOnClose ? /* @__PURE__ */ jsx(Button_default, {
|
|
50
|
+
onClick: viewOnClose,
|
|
51
|
+
children: showResultButtonText ?? mergedResources.showButtonText
|
|
52
|
+
}) : defaultShowResultsButton]
|
|
53
|
+
});
|
|
54
|
+
};
|
|
55
|
+
const processedChildren = Children.map(children, (child) => {
|
|
56
|
+
if (isValidElement(child) && child.type === FilterDrawerOverview) {
|
|
57
|
+
const viewFooter = generateViewFooter(child.props.onReset, child.props.onClose, child.props.noResetButton) ?? child.props.footer ?? fallbackFooter;
|
|
58
|
+
return /* @__PURE__ */ jsx(DrawerNavigation_default.View, {
|
|
59
|
+
id: "overview",
|
|
60
|
+
home: true,
|
|
61
|
+
title: child.props.title,
|
|
62
|
+
children: child.props.children,
|
|
63
|
+
drawerContentClassname: styles["filter-drawer__view"],
|
|
64
|
+
footer: viewFooter
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
if (isValidElement(child)) {
|
|
68
|
+
const viewFooter = generateViewFooter(child.props.onReset, child.props.onClose, child.props.noResetButton) ?? child.props.footer ?? fallbackFooter;
|
|
69
|
+
return /* @__PURE__ */ jsx(DrawerNavigation_default.View, {
|
|
70
|
+
id: child.props.id,
|
|
71
|
+
title: child.props.title,
|
|
72
|
+
children: child.props.children,
|
|
73
|
+
drawerContentClassname: styles["filter-drawer__view"],
|
|
74
|
+
footer: viewFooter
|
|
75
|
+
});
|
|
76
|
+
} else return child;
|
|
77
|
+
});
|
|
78
|
+
return /* @__PURE__ */ jsx(DrawerNavigation_default, {
|
|
79
|
+
isOpen: drawer.isOpen,
|
|
80
|
+
initialView: drawer.initialView,
|
|
81
|
+
onCloseButton: handleClose,
|
|
82
|
+
footer: footer ?? defaultFooter,
|
|
83
|
+
children: processedChildren
|
|
84
|
+
});
|
|
85
|
+
}
|
|
86
|
+
FilterDrawer.Overview = FilterDrawerOverview;
|
|
87
|
+
FilterDrawer.View = FilterDrawerView;
|
|
88
|
+
var FilterDrawer_default$1 = FilterDrawer;
|
|
89
|
+
export { FilterDrawer_default$1 as t };
|
|
90
|
+
|
|
91
|
+
//# sourceMappingURL=FilterDrawer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FilterDrawer.js","names":[],"sources":["../src/components/Filter/FilterDrawer/FilterDrawer.tsx","../src/components/Filter/FilterDrawer/index.ts"],"sourcesContent":["import { Children, isValidElement } from 'react';\n\nimport type { HNDesignsystemFilter } from '../../../resources/Resources';\nimport type { UseFilterDrawerReturn } from '../useFilterDrawer';\n\nimport { LanguageLocales } from '../../../constants';\nimport { useLanguage } from '../../../hooks/useLanguage';\nimport { formatResource } from '../../../utils/resource';\nimport Button from '../../Button';\nimport DrawerNavigation, { type DrawerViewProps } from '../DrawerNavigation/DrawerNavigation';\nimport { getResources } from '../resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterDrawerProps<ViewId extends string = string> {\n /** The drawer state from useFilterDrawer */\n drawer: UseFilterDrawerReturn<ViewId>;\n /** Additional callback when the drawer closes (drawer.close() is always called automatically) */\n onClose?: () => void;\n /** Fully custom footer — overrides the default footer built from onReset/resultText */\n footer?: React.ReactNode;\n /** If provided, shows a \"Nullstill filter\" button in the default footer */\n onReset?: () => void;\n /** If provided, shows a result count button (e.g. \"Vis 5 treff\") that closes the drawer */\n resultCount?: number;\n /** Resources for the component */\n resources?: Partial<HNDesignsystemFilter>;\n /** DrawerNavigation.View children defining the overview and filter views */\n children: React.ReactNode;\n}\n\nexport interface FilterDrawerViewProps extends DrawerViewProps {\n /** Hide reset button for view */\n noResetButton?: boolean;\n /** View specific close handler */\n onClose?: () => void;\n /** View specific reset handler */\n onReset?: () => void;\n}\n\n/**\n * Never rendered directly — FilterDrawer reads its props and creates a DrawerNavigation.View\n * with id=\"overview\" and home=true.\n */\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction FilterDrawerOverview(_props: Omit<DrawerViewProps, 'id' | 'home'>): React.ReactNode {\n return null;\n}\n\n/**\n * Never rendered directly — FilterDrawer reads its props and creates a FilterDrawerView\n */\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction FilterDrawerView(_props: FilterDrawerViewProps): React.ReactNode {\n // DrawerView is never rendered directly — DrawerNavigation reads its props\n return null;\n}\n\nfunction FilterDrawer<ViewId extends string>({\n drawer,\n onClose,\n footer,\n onReset,\n resultCount,\n resources,\n children,\n}: FilterDrawerProps<ViewId>): React.ReactNode {\n const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n const defaultResources = getResources(language);\n const mergedResources = {\n ...defaultResources,\n ...resources,\n };\n\n const handleClose = (): void => {\n if (onClose) {\n onClose();\n } else {\n drawer.close();\n }\n };\n\n const showResultButtonText =\n resultCount !== undefined ? formatResource(mergedResources.showButtonText, resultCount) : mergedResources.showButtonText;\n\n const defaultResetButton = onReset && (\n <Button onClick={onReset} variant=\"borderless\">\n {mergedResources.resetButtonText}\n </Button>\n );\n const defaultShowResultsButton = showResultButtonText && <Button onClick={handleClose}>{showResultButtonText}</Button>;\n\n const defaultFooter =\n onReset || showResultButtonText ? (\n <div className={styles['filter-drawer__footer']}>\n {defaultResetButton}\n {defaultShowResultsButton}\n </div>\n ) : undefined;\n\n const fallbackFooter = footer ?? defaultFooter;\n\n const generateViewFooter = (viewOnReset?: () => void, viewOnClose?: () => void, noResetButton?: boolean): React.ReactNode => {\n if (!viewOnReset && !viewOnClose && !noResetButton) {\n return undefined;\n }\n\n return (\n <div className={styles['filter-drawer__footer']}>\n {!noResetButton &&\n (viewOnReset ? (\n <Button onClick={viewOnReset} variant=\"borderless\">\n {mergedResources.resetButtonText}\n </Button>\n ) : (\n defaultResetButton\n ))}\n {viewOnClose ? (\n <Button onClick={viewOnClose}>{showResultButtonText ?? mergedResources.showButtonText}</Button>\n ) : (\n defaultShowResultsButton\n )}\n </div>\n );\n };\n\n const processedChildren = Children.map(children, child => {\n if (isValidElement<Omit<FilterDrawerViewProps, 'id' | 'home'>>(child) && child.type === FilterDrawerOverview) {\n const viewDefaultFooter = generateViewFooter(child.props.onReset, child.props.onClose, child.props.noResetButton);\n const viewFooter = viewDefaultFooter ?? child.props.footer ?? fallbackFooter;\n return (\n <DrawerNavigation.View\n id=\"overview\"\n home\n title={child.props.title}\n children={child.props.children}\n drawerContentClassname={styles['filter-drawer__view']}\n footer={viewFooter}\n />\n );\n }\n if (isValidElement<FilterDrawerViewProps>(child)) {\n const viewDefaultFooter = generateViewFooter(child.props.onReset, child.props.onClose, child.props.noResetButton);\n const viewFooter = viewDefaultFooter ?? child.props.footer ?? fallbackFooter;\n return (\n <DrawerNavigation.View\n id={child.props.id}\n title={child.props.title}\n children={child.props.children}\n drawerContentClassname={styles['filter-drawer__view']}\n footer={viewFooter}\n />\n );\n } else {\n return child;\n }\n });\n\n return (\n <DrawerNavigation isOpen={drawer.isOpen} initialView={drawer.initialView} onCloseButton={handleClose} footer={footer ?? defaultFooter}>\n {processedChildren}\n </DrawerNavigation>\n );\n}\n\nFilterDrawer.Overview = FilterDrawerOverview;\nFilterDrawer.View = FilterDrawerView;\n\nexport default FilterDrawer;\n","import FilterDrawer from './FilterDrawer';\nexport * from './FilterDrawer';\nexport default FilterDrawer;\n"],"mappings":";;;;;;;;;AA6CA,SAAS,qBAAqB,QAA+D;AAC3F,QAAO;;AAOT,SAAS,iBAAiB,QAAgD;AAExE,QAAO;;AAGT,SAAS,aAAoC,EAC3C,QACA,SACA,QACA,SACA,aACA,WACA,YAC6C;CAC7C,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAE5E,MAAM,kBAAkB;EACtB,GAFuB,aAAa,SAAS;EAG7C,GAAG;EACJ;CAED,MAAM,oBAA0B;AAC9B,MAAI,QACF,UAAS;MAET,QAAO,OAAO;;CAIlB,MAAM,uBACJ,gBAAgB,KAAA,IAAY,eAAe,gBAAgB,gBAAgB,YAAY,GAAG,gBAAgB;CAE5G,MAAM,qBAAqB,WACzB,oBAAC,gBAAA;EAAO,SAAS;EAAS,SAAQ;YAC/B,gBAAgB;GACV;CAEX,MAAM,2BAA2B,wBAAwB,oBAAC,gBAAA;EAAO,SAAS;YAAc;GAA8B;CAEtH,MAAM,gBACJ,WAAW,uBACT,qBAAC,OAAA;EAAI,WAAW,OAAO;aACpB,oBACA,yBAAA;GACG,GACJ,KAAA;CAEN,MAAM,iBAAiB,UAAU;CAEjC,MAAM,sBAAsB,aAA0B,aAA0B,kBAA6C;AAC3H,MAAI,CAAC,eAAe,CAAC,eAAe,CAAC,cACnC;AAGF,SACE,qBAAC,OAAA;GAAI,WAAW,OAAO;cACpB,CAAC,kBACC,cACC,oBAAC,gBAAA;IAAO,SAAS;IAAa,SAAQ;cACnC,gBAAgB;KACV,GAET,qBAEH,cACC,oBAAC,gBAAA;IAAO,SAAS;cAAc,wBAAwB,gBAAgB;KAAwB,GAE/F,yBAAA;IAEE;;CAIV,MAAM,oBAAoB,SAAS,IAAI,WAAU,UAAS;AACxD,MAAI,eAA2D,MAAM,IAAI,MAAM,SAAS,sBAAsB;GAE5G,MAAM,aADoB,mBAAmB,MAAM,MAAM,SAAS,MAAM,MAAM,SAAS,MAAM,MAAM,cAAc,IACzE,MAAM,MAAM,UAAU;AAC9D,UACE,oBAAC,yBAAiB,MAAA;IAChB,IAAG;IACH,MAAA;IACA,OAAO,MAAM,MAAM;IACnB,UAAU,MAAM,MAAM;IACtB,wBAAwB,OAAO;IAC/B,QAAQ;KACR;;AAGN,MAAI,eAAsC,MAAM,EAAE;GAEhD,MAAM,aADoB,mBAAmB,MAAM,MAAM,SAAS,MAAM,MAAM,SAAS,MAAM,MAAM,cAAc,IACzE,MAAM,MAAM,UAAU;AAC9D,UACE,oBAAC,yBAAiB,MAAA;IAChB,IAAI,MAAM,MAAM;IAChB,OAAO,MAAM,MAAM;IACnB,UAAU,MAAM,MAAM;IACtB,wBAAwB,OAAO;IAC/B,QAAQ;KACR;QAGJ,QAAO;GAET;AAEF,QACE,oBAAC,0BAAA;EAAiB,QAAQ,OAAO;EAAQ,aAAa,OAAO;EAAa,eAAe;EAAa,QAAQ,UAAU;YACrH;GACgB;;AAIvB,aAAa,WAAW;AACxB,aAAa,OAAO;ACpKpB,IAAA,yBDsKe"}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { a as IconSize, n as AnalyticsId } from "./constants2.js";
|
|
2
|
+
import { t as usePseudoClasses } from "./usePseudoClasses.js";
|
|
3
|
+
import { t as Icon_default } from "./Icon.js";
|
|
4
|
+
import { t as ChevronRight_default } from "./ChevronRight.js";
|
|
5
|
+
import classNames from "classnames";
|
|
6
|
+
import React from "react";
|
|
7
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
8
|
+
import styles from "./components/Filter/FilterLinkList/FilterLinkList.module.scss";
|
|
9
|
+
const Link = (props) => {
|
|
10
|
+
const { children, title, chips, className = "", linkRef, testId, ref, ...restProps } = props;
|
|
11
|
+
const { refObject, isHovered } = usePseudoClasses(linkRef);
|
|
12
|
+
const liClasses = classNames(styles["link-list__item"]);
|
|
13
|
+
const linkClasses = classNames(styles["link-list__button"], className);
|
|
14
|
+
return /* @__PURE__ */ jsx("li", {
|
|
15
|
+
className: liClasses,
|
|
16
|
+
ref,
|
|
17
|
+
"data-testid": testId,
|
|
18
|
+
"data-analyticsid": AnalyticsId.Link,
|
|
19
|
+
children: /* @__PURE__ */ jsxs("button", {
|
|
20
|
+
className: linkClasses,
|
|
21
|
+
ref: refObject,
|
|
22
|
+
type: "button",
|
|
23
|
+
...restProps,
|
|
24
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
25
|
+
className: styles["link-list__button__content"],
|
|
26
|
+
children: title ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", { children: title }), chips && chips.length > 0 && /* @__PURE__ */ jsx("div", {
|
|
27
|
+
className: styles["link-list__chip-list"],
|
|
28
|
+
children: chips.map((chip) => /* @__PURE__ */ jsx("span", {
|
|
29
|
+
className: styles["link-list__chip"],
|
|
30
|
+
children: chip
|
|
31
|
+
}, chip))
|
|
32
|
+
})] }) : /* @__PURE__ */ jsx(Fragment, { children })
|
|
33
|
+
}), /* @__PURE__ */ jsx(Icon_default, {
|
|
34
|
+
svgIcon: ChevronRight_default,
|
|
35
|
+
isHovered,
|
|
36
|
+
size: IconSize.XSmall,
|
|
37
|
+
color: "var(--color-action-graphics-onlight)"
|
|
38
|
+
})]
|
|
39
|
+
})
|
|
40
|
+
});
|
|
41
|
+
};
|
|
42
|
+
var LinkListComponent = (props) => {
|
|
43
|
+
const { children, className = "", testId, ref } = props;
|
|
44
|
+
return /* @__PURE__ */ jsx("ul", {
|
|
45
|
+
ref,
|
|
46
|
+
className: classNames(styles["link-list"], className),
|
|
47
|
+
"data-testid": testId,
|
|
48
|
+
"data-analyticsid": AnalyticsId.LinkList,
|
|
49
|
+
children: React.Children.map(children, (child) => {
|
|
50
|
+
if (React.isValidElement(child) && child.type === Link) return React.cloneElement(child);
|
|
51
|
+
})
|
|
52
|
+
});
|
|
53
|
+
};
|
|
54
|
+
const FilterLinkList = LinkListComponent;
|
|
55
|
+
FilterLinkList.displayName = "FilterLinkList";
|
|
56
|
+
FilterLinkList.Link = Link;
|
|
57
|
+
Link.displayName = "FilterLinkList.Link";
|
|
58
|
+
var FilterLinkList_default = FilterLinkList;
|
|
59
|
+
export { FilterLinkList_default as n, Link as r, FilterLinkList as t };
|
|
60
|
+
|
|
61
|
+
//# sourceMappingURL=FilterLinkList.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FilterLinkList.js","names":["Link: LinkType","LinkListComponent: React.FC<LinkListProps>"],"sources":["../src/components/Filter/FilterLinkList/FilterLinkList.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../../constants';\nimport { usePseudoClasses } from '../../../hooks/usePseudoClasses';\nimport Icon from '../../Icon';\nimport ChevronRight from '../../Icons/ChevronRight';\n\nimport styles from './FilterLinkList.module.scss';\n\nexport type LinkType = React.FC<LinkProps>;\n\nexport interface CompoundComponent extends React.FC<LinkListProps> {\n Link: LinkType;\n}\n\nexport interface LinkListProps {\n /** Items in the LinkList */\n children: React.ReactNode;\n /** Adds custom classes to the element. */\n className?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Ref passed to the ul element */\n ref?: React.Ref<HTMLUListElement | null>;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\nexport type LinkProps = Modify<\n React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>,\n {\n /** If needed children will be content instead of title and chips. Use only in edge cases */\n children?: React.ReactNode;\n /** Title text on link element */\n title?: string;\n /** Texts rendered inside non-interactive chips on link element */\n chips?: string[];\n /** Custom classname for link element */\n className?: string;\n /** Ref for button */\n linkRef?: React.RefObject<HTMLButtonElement | null>;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Ref passed to the list item element */\n ref?: React.Ref<HTMLLIElement | null>;\n }\n>;\n\nexport const Link: LinkType = (props: LinkProps) => {\n const { children, title, chips, className = '', linkRef, testId, ref, ...restProps } = props;\n const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement | null>(linkRef);\n\n const liClasses = cn(styles['link-list__item']);\n const linkClasses = cn(styles['link-list__button'], className);\n\n return (\n <li className={liClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Link}>\n <button className={linkClasses} ref={refObject as React.RefObject<HTMLButtonElement>} type=\"button\" {...restProps}>\n <div className={styles['link-list__button__content']}>\n {title ? (\n <>\n <span>{title}</span>\n {chips && chips.length > 0 && (\n <div className={styles['link-list__chip-list']}>\n {chips.map(chip => (\n <span className={styles['link-list__chip']} key={chip}>\n {chip}\n </span>\n ))}\n </div>\n )}\n </>\n ) : (\n <>{children}</>\n )}\n </div>\n <Icon svgIcon={ChevronRight} isHovered={isHovered} size={IconSize.XSmall} color={'var(--color-action-graphics-onlight)'} />\n </button>\n </li>\n );\n};\n\nconst LinkListComponent: React.FC<LinkListProps> = (props: LinkListProps) => {\n const { children, className = '', testId, ref } = props;\n\n const listClassNames = cn(styles['link-list'], className);\n\n return (\n <ul ref={ref} className={listClassNames} data-testid={testId} data-analyticsid={AnalyticsId.LinkList}>\n {React.Children.map(children, (child: React.ReactNode) => {\n if (React.isValidElement<LinkProps>(child) && child.type === Link) {\n return React.cloneElement(child);\n }\n })}\n </ul>\n );\n};\n\nexport const FilterLinkList = LinkListComponent as CompoundComponent;\n\nFilterLinkList.displayName = 'FilterLinkList';\nFilterLinkList.Link = Link;\nLink.displayName = 'FilterLinkList.Link';\n\nexport default FilterLinkList;\n"],"mappings":";;;;;;;;AAkDA,MAAaA,QAAkB,UAAqB;CAClD,MAAM,EAAE,UAAU,OAAO,OAAO,YAAY,IAAI,SAAS,QAAQ,KAAK,GAAG,cAAc;CACvF,MAAM,EAAE,WAAW,cAAc,iBAA2C,QAAQ;CAEpF,MAAM,YAAY,WAAG,OAAO,mBAAmB;CAC/C,MAAM,cAAc,WAAG,OAAO,sBAAsB,UAAU;AAE9D,QACE,oBAAC,MAAA;EAAG,WAAW;EAAgB;EAAK,eAAa;EAAQ,oBAAkB,YAAY;YACrF,qBAAC,UAAA;GAAO,WAAW;GAAa,KAAK;GAAiD,MAAK;GAAS,GAAI;cACtG,oBAAC,OAAA;IAAI,WAAW,OAAO;cACpB,QACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAA,EAAA,UAAM,OAAA,CAAa,EACnB,SAAS,MAAM,SAAS,KACvB,oBAAC,OAAA;KAAI,WAAW,OAAO;eACpB,MAAM,KAAI,SACT,oBAAC,QAAA;MAAK,WAAW,OAAO;gBACrB;QAD8C,KAE1C,CACP;MACE,CAAA,EAAA,CAEP,GAEH,oBAAA,UAAA,EAAG,UAAA,CAAY;KAEb,EACN,oBAAC,cAAA;IAAK,SAAS;IAAyB;IAAW,MAAM,SAAS;IAAQ,OAAO;KAA0C,CAAA;IACpH;GACN;;AAIT,IAAMC,qBAA8C,UAAyB;CAC3E,MAAM,EAAE,UAAU,YAAY,IAAI,QAAQ,QAAQ;AAIlD,QACE,oBAAC,MAAA;EAAQ;EAAK,WAHO,WAAG,OAAO,cAAc,UAAU;EAGd,eAAa;EAAQ,oBAAkB,YAAY;YACzF,MAAM,SAAS,IAAI,WAAW,UAA2B;AACxD,OAAI,MAAM,eAA0B,MAAM,IAAI,MAAM,SAAS,KAC3D,QAAO,MAAM,aAAa,MAAM;IAElC;GACC;;AAIT,MAAa,iBAAiB;AAE9B,eAAe,cAAc;AAC7B,eAAe,OAAO;AACtB,KAAK,cAAc;AAEnB,IAAA,yBAAe"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FilterLinkList2.js","names":[],"sources":["../src/components/Filter/FilterLinkList/index.ts"],"sourcesContent":["import FilterLinkList from './FilterLinkList';\nexport * from './FilterLinkList';\nexport default FilterLinkList;\n"],"mappings":";AAEA,IAAA,2BAAe"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { r as useDrawerNavigation } from "./DrawerNavigation.js";
|
|
2
|
+
import { n as FilterLinkList_default } from "./FilterLinkList.js";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
function FilterOverviewLinkList({ filter, getLabel, links }) {
|
|
5
|
+
const { goToView } = useDrawerNavigation();
|
|
6
|
+
return /* @__PURE__ */ jsx(FilterLinkList_default, { children: links.map(({ filterKey, title, viewId }) => {
|
|
7
|
+
const raw = filter.filters[filterKey];
|
|
8
|
+
let chips;
|
|
9
|
+
if (Array.isArray(raw)) chips = raw.map((v) => getLabel(filterKey, v));
|
|
10
|
+
else if (raw !== void 0 && raw !== null) chips = [getLabel(filterKey, raw)];
|
|
11
|
+
else chips = [];
|
|
12
|
+
return /* @__PURE__ */ jsx(FilterLinkList_default.Link, {
|
|
13
|
+
title,
|
|
14
|
+
chips,
|
|
15
|
+
onClick: () => goToView(viewId ?? filterKey)
|
|
16
|
+
}, filterKey);
|
|
17
|
+
}) });
|
|
18
|
+
}
|
|
19
|
+
var FilterOverviewLinkList_default$1 = FilterOverviewLinkList;
|
|
20
|
+
export { FilterOverviewLinkList_default$1 as t };
|
|
21
|
+
|
|
22
|
+
//# sourceMappingURL=FilterOverviewLinkList.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FilterOverviewLinkList.js","names":["chips: string[]"],"sources":["../src/components/Filter/FilterOverviewLinkList/FilterOverviewLinkList.tsx","../src/components/Filter/FilterOverviewLinkList/index.ts"],"sourcesContent":["import type { FilterValues, UseFilterReturn } from '../useFilter';\n\nimport { useDrawerNavigation } from '../DrawerNavigation';\nimport FilterLinkList from '../FilterLinkList/FilterLinkList';\n\nexport interface FilterOverviewLink {\n /** The filter key to read values from */\n filterKey: string;\n /** Display title for the link */\n title: string;\n /** View ID to navigate to when clicked. Defaults to filterKey */\n viewId?: string;\n}\n\nexport interface FilterOverviewLinkListProps<T extends FilterValues> {\n /** The filter instance from useFilter */\n filter: UseFilterReturn<T>;\n /** Look up the display label for a filter key + value */\n getLabel: (key: keyof T, value: unknown) => string;\n /** Configuration for which filter keys to show as links */\n links: FilterOverviewLink[];\n}\n\nfunction FilterOverviewLinkList<T extends FilterValues>({ filter, getLabel, links }: FilterOverviewLinkListProps<T>): React.ReactNode {\n const { goToView } = useDrawerNavigation();\n\n return (\n <FilterLinkList>\n {links.map(({ filterKey, title, viewId }) => {\n const raw = filter.filters[filterKey as keyof T];\n\n let chips: string[];\n if (Array.isArray(raw)) {\n chips = raw.map(v => getLabel(filterKey as keyof T, v));\n } else if (raw !== undefined && raw !== null) {\n chips = [getLabel(filterKey as keyof T, raw)];\n } else {\n chips = [];\n }\n\n return <FilterLinkList.Link key={filterKey} title={title} chips={chips} onClick={() => goToView(viewId ?? filterKey)} />;\n })}\n </FilterLinkList>\n );\n}\n\nexport default FilterOverviewLinkList;\n","import FilterOverviewLinkList from './FilterOverviewLinkList';\nexport * from './FilterOverviewLinkList';\nexport default FilterOverviewLinkList;\n"],"mappings":";;;AAuBA,SAAS,uBAA+C,EAAE,QAAQ,UAAU,SAA0D;CACpI,MAAM,EAAE,aAAa,qBAAqB;AAE1C,QACE,oBAAC,wBAAA,EAAA,UACE,MAAM,KAAK,EAAE,WAAW,OAAO,aAAa;EAC3C,MAAM,MAAM,OAAO,QAAQ;EAE3B,IAAIA;AACJ,MAAI,MAAM,QAAQ,IAAI,CACpB,SAAQ,IAAI,KAAI,MAAK,SAAS,WAAsB,EAAE,CAAC;WAC9C,QAAQ,KAAA,KAAa,QAAQ,KACtC,SAAQ,CAAC,SAAS,WAAsB,IAAI,CAAC;MAE7C,SAAQ,EAAE;AAGZ,SAAO,oBAAC,uBAAe,MAAA;GAA4B;GAAc;GAAO,eAAe,SAAS,UAAU,UAAU;KAAnF,UAAuF;GACxH,EAAA,CACa;;ACxCrB,IAAA,mCD4Ce"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { t as FilterSearch_default } from "./FilterSearch.js";
|
|
2
|
+
import classNames from "classnames";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
import styles from "./components/Filter/FilterOverviewSearch/styles.module.scss";
|
|
5
|
+
var FilterOverviewSearch = (props) => {
|
|
6
|
+
const { wrapperClassName, testId, ...filterSearchProps } = props;
|
|
7
|
+
return /* @__PURE__ */ jsx("div", {
|
|
8
|
+
className: classNames(styles["filter-overview-search"], wrapperClassName),
|
|
9
|
+
"data-testid": testId,
|
|
10
|
+
children: /* @__PURE__ */ jsx(FilterSearch_default, { ...filterSearchProps })
|
|
11
|
+
});
|
|
12
|
+
};
|
|
13
|
+
var FilterOverviewSearch_default$1 = FilterOverviewSearch;
|
|
14
|
+
export { FilterOverviewSearch_default$1 as t };
|
|
15
|
+
|
|
16
|
+
//# sourceMappingURL=FilterOverviewSearch.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FilterOverviewSearch.js","names":["FilterOverviewSearch: React.FC<FilterOverviewSearchProps>"],"sources":["../src/components/Filter/FilterOverviewSearch/FilterOverviewSearch.tsx","../src/components/Filter/FilterOverviewSearch/index.ts"],"sourcesContent":["import cn from 'classnames';\n\nimport type { FilterSearchProps } from '../FilterSearch/FilterSearch';\n\nimport FilterSearch from '../FilterSearch/FilterSearch';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterOverviewSearchProps extends FilterSearchProps {\n /** Adds custom classes to the wrapper element. */\n wrapperClassName?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\nconst FilterOverviewSearch: React.FC<FilterOverviewSearchProps> = props => {\n const { wrapperClassName, testId, ...filterSearchProps } = props;\n\n return (\n <div className={cn(styles['filter-overview-search'], wrapperClassName)} data-testid={testId}>\n <FilterSearch {...filterSearchProps} />\n </div>\n );\n};\n\nexport default FilterOverviewSearch;\n","import FilterOverviewSearch from './FilterOverviewSearch';\nexport * from './FilterOverviewSearch';\nexport default FilterOverviewSearch;\n"],"mappings":";;;;AAeA,IAAMA,wBAA4D,UAAS;CACzE,MAAM,EAAE,kBAAkB,QAAQ,GAAG,sBAAsB;AAE3D,QACE,oBAAC,OAAA;EAAI,WAAW,WAAG,OAAO,2BAA2B,iBAAiB;EAAE,eAAa;YACnF,oBAAC,sBAAA,EAAa,GAAI,mBAAA,CAAqB;GACnC;;ACnBV,IAAA,iCDuBe"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import styles from "./components/Filter/FilterResultCountAndSortWrapper/styles.module.scss";
|
|
3
|
+
var FilterResultCountAndSortWrapper = (props) => {
|
|
4
|
+
const { resultCount, sortComponent } = props;
|
|
5
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
6
|
+
className: styles["filter-result-count-and-sort-wrapper"],
|
|
7
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
8
|
+
className: styles["filter-result-count-and-sort-wrapper__count"],
|
|
9
|
+
children: resultCount
|
|
10
|
+
}), /* @__PURE__ */ jsx("span", {
|
|
11
|
+
className: styles["filter-result-count-and-sort-wrapper__sort"],
|
|
12
|
+
children: sortComponent
|
|
13
|
+
})]
|
|
14
|
+
});
|
|
15
|
+
};
|
|
16
|
+
var FilterResultCountAndSortWrapper_default$1 = FilterResultCountAndSortWrapper;
|
|
17
|
+
export { FilterResultCountAndSortWrapper_default$1 as t };
|
|
18
|
+
|
|
19
|
+
//# sourceMappingURL=FilterResultCountAndSortWrapper.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FilterResultCountAndSortWrapper.js","names":["FilterResultCountAndSortWrapper: React.FC<FilterResultCountAndSortWrapper>"],"sources":["../src/components/Filter/FilterResultCountAndSortWrapper/FilterResultCountAndSortWrapper.tsx","../src/components/Filter/FilterResultCountAndSortWrapper/index.ts"],"sourcesContent":["import styles from './styles.module.scss';\n\nexport interface FilterResultCountAndSortWrapper {\n /** Result count content area */\n resultCount?: React.ReactNode;\n /** FilterSort content area */\n sortComponent?: React.ReactNode;\n}\n\nconst FilterResultCountAndSortWrapper: React.FC<FilterResultCountAndSortWrapper> = props => {\n const { resultCount, sortComponent } = props;\n\n return (\n <div className={styles['filter-result-count-and-sort-wrapper']}>\n <span className={styles['filter-result-count-and-sort-wrapper__count']}>{resultCount}</span>\n <span className={styles['filter-result-count-and-sort-wrapper__sort']}>{sortComponent}</span>\n </div>\n );\n};\n\nexport default FilterResultCountAndSortWrapper;\n","import FilterResultCountAndSortWrapper from './FilterResultCountAndSortWrapper';\nexport * from './FilterResultCountAndSortWrapper';\nexport default FilterResultCountAndSortWrapper;\n"],"mappings":";;AASA,IAAMA,mCAA6E,UAAS;CAC1F,MAAM,EAAE,aAAa,kBAAkB;AAEvC,QACE,qBAAC,OAAA;EAAI,WAAW,OAAO;aACrB,oBAAC,QAAA;GAAK,WAAW,OAAO;aAAiD;IAAmB,EAC5F,oBAAC,QAAA;GAAK,WAAW,OAAO;aAAgD;IAAqB,CAAA;GACzF;;ACdV,IAAA,4CDkBe"}
|