@mittwald/flow-react-components 0.2.0-alpha.759 → 0.2.0-alpha.760
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 +6 -0
- package/dist/assets/doc-properties.json +3829 -3829
- package/dist/js/packages/components/src/components/List/components/Header/components/AllFiltersModal/AllFiltersModal.mjs +4 -2
- package/dist/js/packages/components/src/components/List/components/Header/components/AllFiltersModal/AllFiltersModal.mjs.map +1 -1
- package/dist/js/packages/components/src/components/List/components/Header/components/AllFiltersModal/ViewModeAccordion.mjs +0 -3
- package/dist/js/packages/components/src/components/List/components/Header/components/AllFiltersModal/ViewModeAccordion.mjs.map +1 -1
- package/dist/types/components/List/components/Header/components/AllFiltersModal/AllFiltersModal.d.ts.map +1 -1
- package/dist/types/components/List/components/Header/components/AllFiltersModal/ViewModeAccordion.d.ts.map +1 -1
- package/package.json +6 -6
|
@@ -43,6 +43,7 @@ import HeadingView from '../../../../../../views/HeadingView.mjs';
|
|
|
43
43
|
import { ModalTrigger } from '../../../../../Modal/components/ModalTrigger/ModalTrigger.mjs';
|
|
44
44
|
import { Modal } from '../../../../../Modal/Modal.mjs';
|
|
45
45
|
import { SkeletonText } from '../../../../../SkeletonText/SkeletonText.mjs';
|
|
46
|
+
import { useAvailableViewModes } from '../../lib.mjs';
|
|
46
47
|
|
|
47
48
|
const AllFiltersModal = () => {
|
|
48
49
|
const list = useList();
|
|
@@ -50,9 +51,10 @@ const AllFiltersModal = () => {
|
|
|
50
51
|
const isInitiallyLoading = list.loader.useIsInitiallyLoading();
|
|
51
52
|
const totalItemCount = list.batches.getTotalItemsCount() ?? list.items.entries.length;
|
|
52
53
|
const filterAccordions = list.filters.map((f) => /* @__PURE__ */ jsx(FilterAccordion, { filter: f }, f.name));
|
|
54
|
+
const availableViewModes = useAvailableViewModes();
|
|
53
55
|
const accordions = [
|
|
54
|
-
/* @__PURE__ */ jsx(ViewModeAccordion, {}, "viewMode"),
|
|
55
|
-
/* @__PURE__ */ jsx(SortingAccordion, {}, "sorting"),
|
|
56
|
+
availableViewModes.length > 1 && /* @__PURE__ */ jsx(ViewModeAccordion, {}, "viewMode"),
|
|
57
|
+
list.sorting.length > 0 && /* @__PURE__ */ jsx(SortingAccordion, {}, "sorting"),
|
|
56
58
|
...filterAccordions
|
|
57
59
|
].filter(Boolean);
|
|
58
60
|
const hasSecondaryFilters = list.filters.some(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AllFiltersModal.mjs","sources":["../../../../../../../../../../../src/components/List/components/Header/components/AllFiltersModal/AllFiltersModal.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport
|
|
1
|
+
{"version":3,"file":"AllFiltersModal.mjs","sources":["../../../../../../../../../../../src/components/List/components/Header/components/AllFiltersModal/AllFiltersModal.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { IconFilter } from \"@/components/Icon/components/icons\";\nimport ButtonView from \"@/views/ButtonView\";\nimport { useList } from \"@/components/List\";\nimport styles from \"@/components/List/components/Header/Header.module.css\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport ContentView from \"@/views/ContentView\";\nimport SectionView from \"@/views/SectionView\";\nimport { FilterAccordion } from \"@/components/List/components/Header/components/AllFiltersModal/FilterAccordion\";\nimport { ViewModeAccordion } from \"@/components/List/components/Header/components/AllFiltersModal/ViewModeAccordion\";\nimport TextView from \"@/views/TextView\";\nimport { SortingAccordion } from \"@/components/List/components/Header/components/AllFiltersModal/SortingAccordion\";\nimport ActionGroupView from \"@/views/ActionGroupView\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport HeadingView from \"@/views/HeadingView\";\nimport clsx from \"clsx\";\nimport Modal, { ModalTrigger } from \"@/components/Modal\";\nimport { SkeletonText } from \"@/components/SkeletonText\";\nimport { useAvailableViewModes } from \"../../lib\";\n\nexport const AllFiltersModal: FC = () => {\n const list = useList();\n const stringFormatter = useLocalizedStringFormatter(locales);\n\n const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n const totalItemCount =\n list.batches.getTotalItemsCount() ?? list.items.entries.length;\n\n const filterAccordions = list.filters.map((f) => (\n <FilterAccordion filter={f} key={f.name} />\n ));\n\n const availableViewModes = useAvailableViewModes();\n\n const accordions = [\n availableViewModes.length > 1 && <ViewModeAccordion key=\"viewMode\" />,\n list.sorting.length > 0 && <SortingAccordion key=\"sorting\" />,\n ...filterAccordions,\n ].filter(Boolean);\n\n const hasSecondaryFilters = list.filters.some(\n (f) => f.priority === \"secondary\",\n );\n\n const controller = useOverlayController(\"Modal\", {\n reuseControllerFromContext: false,\n });\n\n if (accordions.length === 0) {\n return null;\n }\n\n return (\n <ModalTrigger controller={controller}>\n <ButtonView\n className={clsx(\n styles.hideOnMobile,\n hasSecondaryFilters ? undefined : styles.hideOnDesktop,\n )}\n variant=\"outline\"\n color=\"secondary\"\n >\n <TextView>{stringFormatter.format(\"list.filters.all\")}</TextView>\n <IconFilter />\n </ButtonView>\n\n <ButtonView\n className={styles.hideOnDesktop}\n variant=\"outline\"\n color=\"secondary\"\n aria-label={stringFormatter.format(\"list.filters.all\")}\n >\n <IconFilter />\n </ButtonView>\n\n <Modal offCanvas controller={controller}>\n <HeadingView>{stringFormatter.format(\"list.filters.all\")}</HeadingView>\n <ContentView>\n <SectionView>{...accordions}</SectionView>\n </ContentView>\n\n <ActionGroupView>\n <ButtonView onPress={() => controller.close()}>\n <TextView>\n {isInitiallyLoading ? (\n <SkeletonText width=\"16ch\" />\n ) : (\n stringFormatter.format(\"list.results.show\", {\n totalItemCount,\n })\n )}\n </TextView>\n </ButtonView>\n <ButtonView\n color=\"secondary\"\n variant=\"soft\"\n onPress={() => {\n list.resetFilters();\n controller.close();\n }}\n >\n {stringFormatter.format(\"list.reset\")}\n </ButtonView>\n </ActionGroupView>\n </Modal>\n </ModalTrigger>\n );\n};\n"],"names":["styles"],"mappings":"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"}
|
|
@@ -38,9 +38,6 @@ const ViewModeAccordion = () => {
|
|
|
38
38
|
const stringFormatter = useLocalizedStringFormatter(locales);
|
|
39
39
|
const availableViewModes = useAvailableViewModes();
|
|
40
40
|
const selectedViewMode = list.viewMode.value;
|
|
41
|
-
if (availableViewModes.length <= 1) {
|
|
42
|
-
return null;
|
|
43
|
-
}
|
|
44
41
|
return /* @__PURE__ */ jsxs(AccordionView, { children: [
|
|
45
42
|
/* @__PURE__ */ jsx(HeadingView, { children: stringFormatter.format("list.settings.viewMode") }),
|
|
46
43
|
/* @__PURE__ */ jsx(ContentView, { children: /* @__PURE__ */ jsx(RadioGroupView, { value: selectedViewMode, m: [1, 1], children: availableViewModes.map((v) => /* @__PURE__ */ jsx(RadioView, { value: v, onPress: () => list.viewMode.set(v), children: stringFormatter.format(`list.settings.viewMode.${v}`) }, v)) }) })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ViewModeAccordion.mjs","sources":["../../../../../../../../../../../src/components/List/components/Header/components/AllFiltersModal/ViewModeAccordion.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport AccordionView from \"@/views/AccordionView\";\nimport HeadingView from \"@/views/HeadingView\";\nimport ContentView from \"@/views/ContentView\";\nimport RadioGroupView from \"@/views/RadioGroupView\";\nimport RadioView from \"@/views/RadioView\";\nimport { useAvailableViewModes } from \"@/components/List/components/Header/lib\";\nimport { useList } from \"@/components/List\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"../../../../locales/*.locale.json\";\n\nexport const ViewModeAccordion: FC = () => {\n const list = useList();\n const stringFormatter = useLocalizedStringFormatter(locales);\n\n const availableViewModes = useAvailableViewModes();\n const selectedViewMode = list.viewMode.value;\n\n
|
|
1
|
+
{"version":3,"file":"ViewModeAccordion.mjs","sources":["../../../../../../../../../../../src/components/List/components/Header/components/AllFiltersModal/ViewModeAccordion.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport AccordionView from \"@/views/AccordionView\";\nimport HeadingView from \"@/views/HeadingView\";\nimport ContentView from \"@/views/ContentView\";\nimport RadioGroupView from \"@/views/RadioGroupView\";\nimport RadioView from \"@/views/RadioView\";\nimport { useAvailableViewModes } from \"@/components/List/components/Header/lib\";\nimport { useList } from \"@/components/List\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"../../../../locales/*.locale.json\";\n\nexport const ViewModeAccordion: FC = () => {\n const list = useList();\n const stringFormatter = useLocalizedStringFormatter(locales);\n\n const availableViewModes = useAvailableViewModes();\n const selectedViewMode = list.viewMode.value;\n\n return (\n <AccordionView>\n <HeadingView>\n {stringFormatter.format(\"list.settings.viewMode\")}\n </HeadingView>\n <ContentView>\n <RadioGroupView value={selectedViewMode} m={[1, 1]}>\n {availableViewModes.map((v) => (\n <RadioView key={v} value={v} onPress={() => list.viewMode.set(v)}>\n {stringFormatter.format(`list.settings.viewMode.${v}`)}\n </RadioView>\n ))}\n </RadioGroupView>\n </ContentView>\n </AccordionView>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,MAAM,oBAAwB,MAAM;AACzC,EAAA,MAAM,OAAO,OAAA,EAAQ;AACrB,EAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAA,MAAM,qBAAqB,qBAAA,EAAsB;AACjD,EAAA,MAAM,gBAAA,GAAmB,KAAK,QAAA,CAAS,KAAA;AAEvC,EAAA,4BACG,aAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,WAAA,EAAA,EACE,QAAA,EAAA,eAAA,CAAgB,MAAA,CAAO,wBAAwB,CAAA,EAClD,CAAA;AAAA,oBACA,GAAA,CAAC,WAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,OAAO,gBAAA,EAAkB,CAAA,EAAG,CAAC,CAAA,EAAG,CAAC,CAAA,EAC9C,QAAA,EAAA,kBAAA,CAAmB,GAAA,CAAI,CAAC,sBACvB,GAAA,CAAC,SAAA,EAAA,EAAkB,KAAA,EAAO,CAAA,EAAG,SAAS,MAAM,IAAA,CAAK,QAAA,CAAS,GAAA,CAAI,CAAC,CAAA,EAC5D,QAAA,EAAA,eAAA,CAAgB,MAAA,CAAO,CAAA,uBAAA,EAA0B,CAAC,CAAA,CAAE,CAAA,EAAA,EADvC,CAEhB,CACD,GACH,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AllFiltersModal.d.ts","sourceRoot":"","sources":["../../../../../../../../src/components/List/components/Header/components/AllFiltersModal/AllFiltersModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAqBhC,eAAO,MAAM,eAAe,EAAE,
|
|
1
|
+
{"version":3,"file":"AllFiltersModal.d.ts","sourceRoot":"","sources":["../../../../../../../../src/components/List/components/Header/components/AllFiltersModal/AllFiltersModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAqBhC,eAAO,MAAM,eAAe,EAAE,EAuF7B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ViewModeAccordion.d.ts","sourceRoot":"","sources":["../../../../../../../../src/components/List/components/Header/components/AllFiltersModal/ViewModeAccordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAWhC,eAAO,MAAM,iBAAiB,EAAE,
|
|
1
|
+
{"version":3,"file":"ViewModeAccordion.d.ts","sourceRoot":"","sources":["../../../../../../../../src/components/List/components/Header/components/AllFiltersModal/ViewModeAccordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAWhC,eAAO,MAAM,iBAAiB,EAAE,EAuB/B,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mittwald/flow-react-components",
|
|
3
|
-
"version": "0.2.0-alpha.
|
|
3
|
+
"version": "0.2.0-alpha.760",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A React implementation of Flow, mittwald’s design system",
|
|
6
6
|
"homepage": "https://mittwald.github.io/flow",
|
|
@@ -60,9 +60,9 @@
|
|
|
60
60
|
"@codemirror/lint": "^6.9.5",
|
|
61
61
|
"@internationalized/string-compiler": "^3.2.6",
|
|
62
62
|
"@lezer/highlight": "^1.2.3",
|
|
63
|
-
"@mittwald/flow-icons": "0.2.0-alpha.
|
|
63
|
+
"@mittwald/flow-icons": "0.2.0-alpha.760",
|
|
64
64
|
"@mittwald/password-tools-js": "3.0.0-alpha.18",
|
|
65
|
-
"@mittwald/react-tunnel": "0.2.0-alpha.
|
|
65
|
+
"@mittwald/react-tunnel": "0.2.0-alpha.760",
|
|
66
66
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
67
67
|
"@react-aria/form": "^3.1.3",
|
|
68
68
|
"@react-aria/live-announcer": "^3.4.4",
|
|
@@ -112,7 +112,7 @@
|
|
|
112
112
|
"@lezer/generator": "^1.8.0",
|
|
113
113
|
"@lezer/lr": "^1.4.8",
|
|
114
114
|
"@mittwald/flow-core": "",
|
|
115
|
-
"@mittwald/flow-design-tokens": "0.2.0-alpha.
|
|
115
|
+
"@mittwald/flow-design-tokens": "0.2.0-alpha.760",
|
|
116
116
|
"@mittwald/flow-icons-base": "",
|
|
117
117
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
118
118
|
"@mittwald/remote-dom-react": "1.2.2-mittwald.10",
|
|
@@ -165,7 +165,7 @@
|
|
|
165
165
|
},
|
|
166
166
|
"peerDependencies": {
|
|
167
167
|
"@internationalized/date": "^3.10.0",
|
|
168
|
-
"@mittwald/flow-icons-pro": "0.2.0-alpha.
|
|
168
|
+
"@mittwald/flow-icons-pro": "0.2.0-alpha.759",
|
|
169
169
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
170
170
|
"next": "*",
|
|
171
171
|
"react": "^19.2.0",
|
|
@@ -186,5 +186,5 @@
|
|
|
186
186
|
"optional": true
|
|
187
187
|
}
|
|
188
188
|
},
|
|
189
|
-
"gitHead": "
|
|
189
|
+
"gitHead": "ead317a117313a14f02d143ab74e809c30207466"
|
|
190
190
|
}
|