@mittwald/flow-react-components 1.6.0-next.5 → 1.6.0-next.51

package/dist/js/packages/components/src/components/List/components/Header/components/ActiveFilters/ActiveFilters.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActiveFilters.mjs","names":["locales","styles"],"sources":["../../../../../../../../../../../src/components/List/components/Header/components/ActiveFilters/ActiveFilters.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport styles from \"./ActiveFilters.module.scss\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport { observer } from \"mobx-react-lite\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport {\n  IconClose,\n  IconSave,\n  IconUndo,\n} from \"@/components/Icon/components/icons\";\nimport ButtonView from \"@/views/ButtonView\";\nimport TooltipView from \"@/views/TooltipView\";\nimport DivView from \"@/views/DivView\";\nimport BadgeView from \"@/views/BadgeView\";\nimport TooltipTriggerView from \"@/views/TooltipTriggerView\";\nimport TextView from \"@/views/TextView\";\nimport { Filter } from \"@/components/List/model/filter/Filter\";\nimport { transformDateValueToFormattedDate } from \"@/lib/date/transformDateValueToFormattedDate\";\nimport { DateRangeFilter } from \"@/components/List/model/filter/DateRangeFilter\";\n\ninterface Props {\n  isDisabled?: boolean;\n}\n\nexport const ActiveFilters: FC<Props> = observer((props) => {\n  const { isDisabled } = props;\n  const list = useList();\n  const formatter = useLocalizedStringFormatter(locales, \"List\");\n\n  const activeFilters = list.filters.flatMap((f) => {\n    if (f instanceof DateRangeFilter) {\n      const value = f.getValue();\n      if (value) {\n        return [\n          <BadgeView\n            key={f.name}\n            onClose={() => f.clear()}\n            isDisabled={isDisabled}\n          >\n            <TextView>\n              {`${transformDateValueToFormattedDate(value.start)} - ${transformDateValueToFormattedDate(value.end)}`}\n            </TextView>\n          </BadgeView>,\n        ];\n      }\n    }\n\n    return f.values\n      .filter((v) => v.isActive)\n      .map((v) => (\n        <BadgeView\n          key={v.id}\n          onClose={() => v.deactivate()}\n          isDisabled={isDisabled}\n        >\n          <TextView>{v.render()}</TextView>\n        </BadgeView>\n      ));\n  });\n\n  const storingAvailable = list.filters.some((f) => f.isStoringAvailable());\n  const hasChanges = list.filters.some((f) => f.hasChanges());\n\n  const storeFiltersButton = storingAvailable && hasChanges && (\n    <TooltipTriggerView isDisabled={isDisabled}>\n      <TooltipView>{formatter.format(\"filters.store\")}</TooltipView>\n      <ButtonView\n        size=\"s\"\n        variant=\"plain\"\n        color=\"secondary\"\n        onPress={() =>\n          Filter.storeFilters(list, list.filters, {\n            autosave: false,\n            manualSave: true,\n          })\n        }\n        aria-label={formatter.format(\"filters.store\")}\n      >\n        <IconSave />\n      </ButtonView>\n    </TooltipTriggerView>\n  );\n\n  const resetFiltersButton = hasChanges ? (\n    <TooltipTriggerView isDisabled={isDisabled}>\n      <TooltipView>{formatter.format(\"filters.reset\")}</TooltipView>\n      <ButtonView\n        size=\"s\"\n        variant=\"plain\"\n        color=\"secondary\"\n        onPress={() => list.resetFilters()}\n        aria-label={formatter.format(\"filters.reset\")}\n      >\n        <IconUndo />\n      </ButtonView>\n    </TooltipTriggerView>\n  ) : undefined;\n\n  const removeAllFiltersButton =\n    activeFilters.length > 1 ? (\n      <TooltipTriggerView isDisabled={isDisabled}>\n        <TooltipView>{formatter.format(\"filters.clear\")}</TooltipView>\n        <ButtonView\n          size=\"s\"\n          variant=\"plain\"\n          color=\"secondary\"\n          onPress={() => list.clearFilters()}\n          aria-label={formatter.format(\"filters.clear\")}\n        >\n          <IconClose />\n        </ButtonView>\n      </TooltipTriggerView>\n    ) : undefined;\n\n  if (\n    activeFilters.length === 0 &&\n    !storeFiltersButton &&\n    !resetFiltersButton\n  ) {\n    return null;\n  }\n\n  return (\n    <DivView className={styles.activeFilters}>\n      {activeFilters}\n      {storeFiltersButton}\n      {resetFiltersButton}\n      {removeAllFiltersButton}\n    </DivView>\n  );\n});\n\nexport default ActiveFilters;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAyBA,IAAa,gBAA2B,UAAU,UAAU;CAC1D,MAAM,EAAE,eAAe;CACvB,MAAM,OAAO,QAAQ;CACrB,MAAM,YAAY,4BAA4BA,kBAAS,MAAM;CAE7D,MAAM,gBAAgB,KAAK,QAAQ,SAAS,MAAM;EAChD,IAAI,aAAa,iBAAiB;GAChC,MAAM,QAAQ,EAAE,SAAS;GACzB,IAAI,OACF,OAAO,CACL,oBAAC,WAAD;IAEE,eAAe,EAAE,MAAM;IACX;IAEZ,UAAA,oBAAC,UAAD,EAAA,UACG,GAAG,kCAAkC,MAAM,KAAK,EAAE,KAAK,kCAAkC,MAAM,GAAG,IAC3F,CAAA;GACD,GAPJ,EAAE,IAOE,CACb;EAEJ;EAEA,OAAO,EAAE,OACN,QAAQ,MAAM,EAAE,QAAQ,CAAC,CACzB,KAAK,MACJ,oBAAC,WAAD;GAEE,eAAe,EAAE,WAAW;GAChB;GAEZ,UAAA,oBAAC,UAAD,EAAA,UAAW,EAAE,OAAO,EAAY,CAAA;EACvB,GALJ,EAAE,EAKE,CACZ;CACL,CAAC;CAED,MAAM,mBAAmB,KAAK,QAAQ,MAAM,MAAM,EAAE,mBAAmB,CAAC;CACxE,MAAM,aAAa,KAAK,QAAQ,MAAM,MAAM,EAAE,WAAW,CAAC;CAE1D,MAAM,qBAAqB,oBAAoB,cAC7C,qBAAC,oBAAD;EAAgC;EAAhC,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,UAAU,OAAO,eAAe,EAAe,CAAA,GAC7D,oBAAC,YAAD;GACE,MAAK;GACL,SAAQ;GACR,OAAM;GACN,eACE,OAAO,aAAa,MAAM,KAAK,SAAS;IACtC,UAAU;IACV,YAAY;GACd,CAAC;GAEH,cAAY,UAAU,OAAO,eAAe;GAE5C,UAAA,oBAAC,UAAD,CAAW,CAAA;EACD,CAAA,CACM;;CAGtB,MAAM,qBAAqB,aACzB,qBAAC,oBAAD;EAAgC;EAAhC,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,UAAU,OAAO,eAAe,EAAe,CAAA,GAC7D,oBAAC,YAAD;GACE,MAAK;GACL,SAAQ;GACR,OAAM;GACN,eAAe,KAAK,aAAa;GACjC,cAAY,UAAU,OAAO,eAAe;GAE5C,UAAA,oBAAC,UAAD,CAAW,CAAA;EACD,CAAA,CACM;CAClB,CAAA,IAAA,KAAA;CAEJ,MAAM,yBACJ,cAAc,SAAS,IACrB,qBAAC,oBAAD;EAAgC;EAAhC,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,UAAU,OAAO,eAAe,EAAe,CAAA,GAC7D,oBAAC,YAAD;GACE,MAAK;GACL,SAAQ;GACR,OAAM;GACN,eAAe,KAAK,aAAa;GACjC,cAAY,UAAU,OAAO,eAAe;GAE5C,UAAA,oBAAC,WAAD,CAAY,CAAA;EACF,CAAA,CACM;CAClB,CAAA,IAAA,KAAA;CAEN,IACE,cAAc,WAAW,KACzB,CAAC,sBACD,CAAC,oBAED,OAAO;CAGT,OACE,qBAAC,SAAD;EAAS,WAAWC,6BAAO;EAA3B,UAAA;GACG;GACA;GACA;GACA;EACM;;AAEb,CAAC"}
+{"version":3,"file":"ActiveFilters.mjs","names":["locales","styles"],"sources":["../../../../../../../../../../../src/components/List/components/Header/components/ActiveFilters/ActiveFilters.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport styles from \"./ActiveFilters.module.scss\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport { observer } from \"mobx-react-lite\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport {\n  IconClose,\n  IconSave,\n  IconUndo,\n} from \"@/components/Icon/components/icons\";\nimport ButtonView from \"@/views/ButtonView\";\nimport TooltipView from \"@/views/TooltipView\";\nimport DivView from \"@/views/DivView\";\nimport BadgeView from \"@/views/BadgeView\";\nimport TooltipTriggerView from \"@/views/TooltipTriggerView\";\nimport TextView from \"@/views/TextView\";\nimport { Filter } from \"@/components/List/model/filter/Filter\";\nimport { DateRangeFilter } from \"@/components/List/model/filter/DateRangeFilter\";\nimport { useLanguage } from \"@/lib/hooks/useLanguage\";\nimport { formatListDateRange } from \"@mittwald/flow-components-base\";\n\ninterface Props {\n  isDisabled?: boolean;\n}\n\nexport const ActiveFilters: FC<Props> = observer((props) => {\n  const { isDisabled } = props;\n  const list = useList();\n  const formatter = useLocalizedStringFormatter(locales, \"List\");\n  const locale = useLanguage();\n\n  const activeFilters = list.filters.flatMap((f) => {\n    if (f instanceof DateRangeFilter) {\n      const value = f.getValue();\n      if (value) {\n        return [\n          <BadgeView\n            key={f.name}\n            onClose={() => f.clear()}\n            isDisabled={isDisabled}\n          >\n            <TextView>\n              {formatListDateRange(value, locale, formatter.format)}\n            </TextView>\n          </BadgeView>,\n        ];\n      }\n    }\n\n    return f.values\n      .filter((v) => v.isActive)\n      .map((v) => (\n        <BadgeView\n          key={v.id}\n          onClose={() => v.deactivate()}\n          isDisabled={isDisabled}\n        >\n          <TextView>{v.render()}</TextView>\n        </BadgeView>\n      ));\n  });\n\n  const storingAvailable = list.filters.some((f) => f.isStoringAvailable());\n  const hasChanges = list.filters.some((f) => f.hasChanges());\n\n  const storeFiltersButton = storingAvailable && hasChanges && (\n    <TooltipTriggerView isDisabled={isDisabled}>\n      <TooltipView>{formatter.format(\"filters.store\")}</TooltipView>\n      <ButtonView\n        size=\"s\"\n        variant=\"plain\"\n        color=\"secondary\"\n        onPress={() =>\n          Filter.storeFilters(list, list.filters, {\n            autosave: false,\n            manualSave: true,\n          })\n        }\n        aria-label={formatter.format(\"filters.store\")}\n      >\n        <IconSave />\n      </ButtonView>\n    </TooltipTriggerView>\n  );\n\n  const resetFiltersButton = hasChanges ? (\n    <TooltipTriggerView isDisabled={isDisabled}>\n      <TooltipView>{formatter.format(\"filters.reset\")}</TooltipView>\n      <ButtonView\n        size=\"s\"\n        variant=\"plain\"\n        color=\"secondary\"\n        onPress={() => list.resetFilters()}\n        aria-label={formatter.format(\"filters.reset\")}\n      >\n        <IconUndo />\n      </ButtonView>\n    </TooltipTriggerView>\n  ) : undefined;\n\n  const removeAllFiltersButton =\n    activeFilters.length > 1 ? (\n      <TooltipTriggerView isDisabled={isDisabled}>\n        <TooltipView>{formatter.format(\"filters.clear\")}</TooltipView>\n        <ButtonView\n          size=\"s\"\n          variant=\"plain\"\n          color=\"secondary\"\n          onPress={() => list.clearFilters()}\n          aria-label={formatter.format(\"filters.clear\")}\n        >\n          <IconClose />\n        </ButtonView>\n      </TooltipTriggerView>\n    ) : undefined;\n\n  if (\n    activeFilters.length === 0 &&\n    !storeFiltersButton &&\n    !resetFiltersButton\n  ) {\n    return null;\n  }\n\n  return (\n    <DivView className={styles.activeFilters}>\n      {activeFilters}\n      {storeFiltersButton}\n      {resetFiltersButton}\n      {removeAllFiltersButton}\n    </DivView>\n  );\n});\n\nexport default ActiveFilters;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA0BA,IAAa,gBAA2B,UAAU,UAAU;CAC1D,MAAM,EAAE,eAAe;CACvB,MAAM,OAAO,QAAQ;CACrB,MAAM,YAAY,4BAA4BA,kBAAS,MAAM;CAC7D,MAAM,SAAS,YAAY;CAE3B,MAAM,gBAAgB,KAAK,QAAQ,SAAS,MAAM;EAChD,IAAI,aAAa,iBAAiB;GAChC,MAAM,QAAQ,EAAE,SAAS;GACzB,IAAI,OACF,OAAO,CACL,oBAAC,WAAD;IAEE,eAAe,EAAE,MAAM;IACX;IAEZ,UAAA,oBAAC,UAAD,EAAA,UACG,oBAAoB,OAAO,QAAQ,UAAU,MAAM,EAC5C,CAAA;GACD,GAPJ,EAAE,IAOE,CACb;EAEJ;EAEA,OAAO,EAAE,OACN,QAAQ,MAAM,EAAE,QAAQ,CAAC,CACzB,KAAK,MACJ,oBAAC,WAAD;GAEE,eAAe,EAAE,WAAW;GAChB;GAEZ,UAAA,oBAAC,UAAD,EAAA,UAAW,EAAE,OAAO,EAAY,CAAA;EACvB,GALJ,EAAE,EAKE,CACZ;CACL,CAAC;CAED,MAAM,mBAAmB,KAAK,QAAQ,MAAM,MAAM,EAAE,mBAAmB,CAAC;CACxE,MAAM,aAAa,KAAK,QAAQ,MAAM,MAAM,EAAE,WAAW,CAAC;CAE1D,MAAM,qBAAqB,oBAAoB,cAC7C,qBAAC,oBAAD;EAAgC;EAAhC,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,UAAU,OAAO,eAAe,EAAe,CAAA,GAC7D,oBAAC,YAAD;GACE,MAAK;GACL,SAAQ;GACR,OAAM;GACN,eACE,OAAO,aAAa,MAAM,KAAK,SAAS;IACtC,UAAU;IACV,YAAY;GACd,CAAC;GAEH,cAAY,UAAU,OAAO,eAAe;GAE5C,UAAA,oBAAC,UAAD,CAAW,CAAA;EACD,CAAA,CACM;;CAGtB,MAAM,qBAAqB,aACzB,qBAAC,oBAAD;EAAgC;EAAhC,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,UAAU,OAAO,eAAe,EAAe,CAAA,GAC7D,oBAAC,YAAD;GACE,MAAK;GACL,SAAQ;GACR,OAAM;GACN,eAAe,KAAK,aAAa;GACjC,cAAY,UAAU,OAAO,eAAe;GAE5C,UAAA,oBAAC,UAAD,CAAW,CAAA;EACD,CAAA,CACM;CAClB,CAAA,IAAA,KAAA;CAEJ,MAAM,yBACJ,cAAc,SAAS,IACrB,qBAAC,oBAAD;EAAgC;EAAhC,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,UAAU,OAAO,eAAe,EAAe,CAAA,GAC7D,oBAAC,YAAD;GACE,MAAK;GACL,SAAQ;GACR,OAAM;GACN,eAAe,KAAK,aAAa;GACjC,cAAY,UAAU,OAAO,eAAe;GAE5C,UAAA,oBAAC,WAAD,CAAY,CAAA;EACF,CAAA,CACM;CAClB,CAAA,IAAA,KAAA;CAEN,IACE,cAAc,WAAW,KACzB,CAAC,sBACD,CAAC,oBAED,OAAO;CAGT,OACE,qBAAC,SAAD;EAAS,WAAWC,6BAAO;EAA3B,UAAA;GACG;GACA;GACA;GACA;EACM;;AAEb,CAAC"}

package/dist/js/packages/components/src/components/List/components/Header/components/ActiveFilters/ActiveFilters.module.mjs

@@ -1,13 +1,12 @@
 "use client"
 /* */
-//#region src/components/List/components/Header/components/ActiveFilters/ActiveFilters.module.scss
+// src/components/List/components/Header/components/ActiveFilters/ActiveFilters.module.scss
 var activeFilters = "flow--list--header--active-filters";
 var clearButton = "flow--list--header--active-filters--clear-button";
 var ActiveFilters_module_default = {
 	activeFilters,
 	clearButton
 };
-//#endregion
 export { activeFilters, clearButton, ActiveFilters_module_default as default };
 
 //# sourceMappingURL=ActiveFilters.module.mjs.map

package/dist/js/packages/components/src/components/List/components/Header/components/AllFiltersModal/AllFiltersModal.mjs

@@ -22,7 +22,7 @@ import { ModalTrigger } from "../../../../../Modal/components/ModalTrigger/Modal
 import { Modal } from "../../../../../Modal/Modal.mjs";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/List/components/Header/components/AllFiltersModal/AllFiltersModal.tsx
+// src/components/List/components/Header/components/AllFiltersModal/AllFiltersModal.tsx
 var AllFiltersModal = (props) => {
 	const { isDisabled } = props;
 	const list = useList();
@@ -30,14 +30,14 @@ var AllFiltersModal = (props) => {
 	const isInitiallyLoading = list.loader.useIsInitiallyLoading();
 	const totalItemCount = list.batches.getTotalItemsCount() ?? list.items.entries.length;
 	const availableViewModes = useAvailableViewModes();
-	const expandAccordions = (availableViewModes.length > 1 ? 1 : 0) + (list.sorting.length > 0 ? 1 : 0) + list.filters.length <= 2;
+	const expandAccordions = (availableViewModes.length > 1 ? 1 : 0) + (list.visibleSorting.length > 0 ? 1 : 0) + list.filters.length <= 2;
 	const filterAccordions = list.filters.map((f) => /* @__PURE__ */ jsx(FilterAccordion, {
 		filter: f,
 		expandAccordions
 	}, f.name));
 	const accordions = [
 		availableViewModes.length > 1 && /* @__PURE__ */ jsx(ViewModeAccordion, { expandAccordions }, "viewMode"),
-		list.sorting.length > 0 && /* @__PURE__ */ jsx(SortingAccordion, { expandAccordions }, "sorting"),
+		list.visibleSorting.length > 0 && /* @__PURE__ */ jsx(SortingAccordion, { expandAccordions }, "sorting"),
 		...filterAccordions
 	].filter(Boolean);
 	const hasSecondaryFilters = list.filters.some((f) => f.priority === "secondary");
@@ -83,7 +83,6 @@ var AllFiltersModal = (props) => {
 		]
 	});
 };
-//#endregion
 export { AllFiltersModal };
 
 //# sourceMappingURL=AllFiltersModal.mjs.map

package/dist/js/packages/components/src/components/List/components/Header/components/AllFiltersModal/AllFiltersModal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AllFiltersModal.mjs","names":["locales","styles"],"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.scss\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport ContentView from \"@/views/ContentView\";\nimport SectionView from \"@/views/SectionView\";\nimport AccordionGroupView from \"@/views/AccordionGroupView\";\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 SkeletonTextView from \"@/views/SkeletonTextView\";\nimport { useAvailableViewModes } from \"../../lib\";\n\ninterface Props {\n  isDisabled?: boolean;\n}\n\nexport const AllFiltersModal: FC<Props> = (props) => {\n  const { isDisabled } = props;\n  const list = useList();\n  const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n\n  const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n  const totalItemCount =\n    list.batches.getTotalItemsCount() ?? list.items.entries.length;\n\n  const availableViewModes = useAvailableViewModes();\n\n  const accordionCount =\n    (availableViewModes.length > 1 ? 1 : 0) +\n    (list.sorting.length > 0 ? 1 : 0) +\n    list.filters.length;\n\n  const expandAccordions = accordionCount <= 2;\n\n  const filterAccordions = list.filters.map((f) => (\n    <FilterAccordion\n      filter={f}\n      key={f.name}\n      expandAccordions={expandAccordions}\n    />\n  ));\n\n  const accordions = [\n    availableViewModes.length > 1 && (\n      <ViewModeAccordion key=\"viewMode\" expandAccordions={expandAccordions} />\n    ),\n    list.sorting.length > 0 && (\n      <SortingAccordion key=\"sorting\" expandAccordions={expandAccordions} />\n    ),\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        isDisabled={isDisabled}\n      >\n        <TextView>{stringFormatter.format(\"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(\"filters.all\")}\n      >\n        <IconFilter />\n      </ButtonView>\n\n      <Modal offCanvas controller={controller}>\n        <HeadingView>{stringFormatter.format(\"filters.all\")}</HeadingView>\n        <ContentView>\n          <SectionView>\n            <AccordionGroupView>{...accordions}</AccordionGroupView>\n          </SectionView>\n        </ContentView>\n\n        <ActionGroupView>\n          <ButtonView onPress={() => controller.close()}>\n            <TextView>\n              {isInitiallyLoading ? (\n                <SkeletonTextView width=\"16ch\" />\n              ) : (\n                stringFormatter.format(\"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(\"reset\")}\n          </ButtonView>\n        </ActionGroupView>\n      </Modal>\n    </ModalTrigger>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,IAAa,mBAA8B,UAAU;CACnD,MAAM,EAAE,eAAe;CACvB,MAAM,OAAO,QAAQ;CACrB,MAAM,kBAAkB,4BAA4BA,kBAAS,MAAM;CAEnE,MAAM,qBAAqB,KAAK,OAAO,sBAAsB;CAC7D,MAAM,iBACJ,KAAK,QAAQ,mBAAmB,KAAK,KAAK,MAAM,QAAQ;CAE1D,MAAM,qBAAqB,sBAAsB;CAOjD,MAAM,oBAJH,mBAAmB,SAAS,IAAI,IAAI,MACpC,KAAK,QAAQ,SAAS,IAAI,IAAI,KAC/B,KAAK,QAAQ,UAE4B;CAE3C,MAAM,mBAAmB,KAAK,QAAQ,KAAK,MACzC,oBAAC,iBAAD;EACE,QAAQ;EAEU;CACnB,GAFM,EAAE,IAER,CACF;CAED,MAAM,aAAa;EACjB,mBAAmB,SAAS,KAC1B,oBAAC,mBAAD,EAAoD,iBAAmB,GAAhD,UAAgD;EAEzE,KAAK,QAAQ,SAAS,KACpB,oBAAC,kBAAD,EAAkD,iBAAmB,GAA/C,SAA+C;EAEvE,GAAG;CACL,CAAC,CAAC,OAAO,OAAO;CAEhB,MAAM,sBAAsB,KAAK,QAAQ,MACtC,MAAM,EAAE,aAAa,WACxB;CAEA,MAAM,aAAa,qBAAqB,SAAS,EAC/C,4BAA4B,MAC9B,CAAC;CAED,IAAI,WAAW,WAAW,GACxB,OAAO;CAGT,OACE,qBAAC,cAAD;EAA0B;EAA1B,UAAA;GACE,qBAAC,YAAD;IACE,WAAW,KACTC,sBAAO,cACP,sBAAsB,KAAA,IAAYA,sBAAO,aAC3C;IACA,SAAQ;IACR,OAAM;IACM;IAPd,UAAA,CASE,oBAAC,UAAD,EAAA,UAAW,gBAAgB,OAAO,aAAa,EAAY,CAAA,GAC3D,oBAAC,YAAD,CAAa,CAAA,CACH;;GAEZ,oBAAC,YAAD;IACE,WAAWA,sBAAO;IAClB,SAAQ;IACR,OAAM;IACN,cAAY,gBAAgB,OAAO,aAAa;IAEhD,UAAA,oBAAC,YAAD,CAAa,CAAA;GACH,CAAA;GAEZ,qBAAC,OAAD;IAAO,WAAA;IAAsB;IAA7B,UAAA;KACE,oBAAC,aAAD,EAAA,UAAc,gBAAgB,OAAO,aAAa,EAAe,CAAA;KACjE,oBAAC,aAAD,EAAA,UACE,oBAAC,aAAD,EAAA,UACE,oBAAC,oBAAD,EAAA,UAAA,CAAoB,GAAI,UAA+B,EAAA,CAAA,EAC5C,CAAA,EACF,CAAA;KAEb,qBAAC,iBAAD,EAAA,UAAA,CACE,oBAAC,YAAD;MAAY,eAAe,WAAW,MAAM;MAC1C,UAAA,oBAAC,UAAD,EAAA,UACG,qBACC,oBAAC,kBAAD,EAAkB,OAAM,OAAQ,CAAA,IAEhC,gBAAgB,OAAO,gBAAgB,EACrC,eACF,CAAC,EAEK,CAAA;KACA,CAAA,GACZ,oBAAC,YAAD;MACE,OAAM;MACN,SAAQ;MACR,eAAe;OACb,KAAK,aAAa;OAClB,WAAW,MAAM;MACnB;MAEC,UAAA,gBAAgB,OAAO,OAAO;KACrB,CAAA,CACG,EAAA,CAAA;IACZ;;EACK;;AAElB"}
+{"version":3,"file":"AllFiltersModal.mjs","names":["locales","styles"],"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.scss\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport ContentView from \"@/views/ContentView\";\nimport SectionView from \"@/views/SectionView\";\nimport AccordionGroupView from \"@/views/AccordionGroupView\";\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 SkeletonTextView from \"@/views/SkeletonTextView\";\nimport { useAvailableViewModes } from \"../../lib\";\n\ninterface Props {\n  isDisabled?: boolean;\n}\n\nexport const AllFiltersModal: FC<Props> = (props) => {\n  const { isDisabled } = props;\n  const list = useList();\n  const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n\n  const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n  const totalItemCount =\n    list.batches.getTotalItemsCount() ?? list.items.entries.length;\n\n  const availableViewModes = useAvailableViewModes();\n\n  const accordionCount =\n    (availableViewModes.length > 1 ? 1 : 0) +\n    (list.visibleSorting.length > 0 ? 1 : 0) +\n    list.filters.length;\n\n  const expandAccordions = accordionCount <= 2;\n\n  const filterAccordions = list.filters.map((f) => (\n    <FilterAccordion\n      filter={f}\n      key={f.name}\n      expandAccordions={expandAccordions}\n    />\n  ));\n\n  const accordions = [\n    availableViewModes.length > 1 && (\n      <ViewModeAccordion key=\"viewMode\" expandAccordions={expandAccordions} />\n    ),\n    list.visibleSorting.length > 0 && (\n      <SortingAccordion key=\"sorting\" expandAccordions={expandAccordions} />\n    ),\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        isDisabled={isDisabled}\n      >\n        <TextView>{stringFormatter.format(\"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(\"filters.all\")}\n      >\n        <IconFilter />\n      </ButtonView>\n\n      <Modal offCanvas controller={controller}>\n        <HeadingView>{stringFormatter.format(\"filters.all\")}</HeadingView>\n        <ContentView>\n          <SectionView>\n            <AccordionGroupView>{...accordions}</AccordionGroupView>\n          </SectionView>\n        </ContentView>\n\n        <ActionGroupView>\n          <ButtonView onPress={() => controller.close()}>\n            <TextView>\n              {isInitiallyLoading ? (\n                <SkeletonTextView width=\"16ch\" />\n              ) : (\n                stringFormatter.format(\"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(\"reset\")}\n          </ButtonView>\n        </ActionGroupView>\n      </Modal>\n    </ModalTrigger>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,IAAa,mBAA8B,UAAU;CACnD,MAAM,EAAE,eAAe;CACvB,MAAM,OAAO,QAAQ;CACrB,MAAM,kBAAkB,4BAA4BA,kBAAS,MAAM;CAEnE,MAAM,qBAAqB,KAAK,OAAO,sBAAsB;CAC7D,MAAM,iBACJ,KAAK,QAAQ,mBAAmB,KAAK,KAAK,MAAM,QAAQ;CAE1D,MAAM,qBAAqB,sBAAsB;CAOjD,MAAM,oBAJH,mBAAmB,SAAS,IAAI,IAAI,MACpC,KAAK,eAAe,SAAS,IAAI,IAAI,KACtC,KAAK,QAAQ,UAE4B;CAE3C,MAAM,mBAAmB,KAAK,QAAQ,KAAK,MACzC,oBAAC,iBAAD;EACE,QAAQ;EAEU;CACnB,GAFM,EAAE,IAER,CACF;CAED,MAAM,aAAa;EACjB,mBAAmB,SAAS,KAC1B,oBAAC,mBAAD,EAAoD,iBAAmB,GAAhD,UAAgD;EAEzE,KAAK,eAAe,SAAS,KAC3B,oBAAC,kBAAD,EAAkD,iBAAmB,GAA/C,SAA+C;EAEvE,GAAG;CACL,CAAC,CAAC,OAAO,OAAO;CAEhB,MAAM,sBAAsB,KAAK,QAAQ,MACtC,MAAM,EAAE,aAAa,WACxB;CAEA,MAAM,aAAa,qBAAqB,SAAS,EAC/C,4BAA4B,MAC9B,CAAC;CAED,IAAI,WAAW,WAAW,GACxB,OAAO;CAGT,OACE,qBAAC,cAAD;EAA0B;EAA1B,UAAA;GACE,qBAAC,YAAD;IACE,WAAW,KACTC,sBAAO,cACP,sBAAsB,KAAA,IAAYA,sBAAO,aAC3C;IACA,SAAQ;IACR,OAAM;IACM;IAPd,UAAA,CASE,oBAAC,UAAD,EAAA,UAAW,gBAAgB,OAAO,aAAa,EAAY,CAAA,GAC3D,oBAAC,YAAD,CAAa,CAAA,CACH;;GAEZ,oBAAC,YAAD;IACE,WAAWA,sBAAO;IAClB,SAAQ;IACR,OAAM;IACN,cAAY,gBAAgB,OAAO,aAAa;IAEhD,UAAA,oBAAC,YAAD,CAAa,CAAA;GACH,CAAA;GAEZ,qBAAC,OAAD;IAAO,WAAA;IAAsB;IAA7B,UAAA;KACE,oBAAC,aAAD,EAAA,UAAc,gBAAgB,OAAO,aAAa,EAAe,CAAA;KACjE,oBAAC,aAAD,EAAA,UACE,oBAAC,aAAD,EAAA,UACE,oBAAC,oBAAD,EAAA,UAAA,CAAoB,GAAI,UAA+B,EAAA,CAAA,EAC5C,CAAA,EACF,CAAA;KAEb,qBAAC,iBAAD,EAAA,UAAA,CACE,oBAAC,YAAD;MAAY,eAAe,WAAW,MAAM;MAC1C,UAAA,oBAAC,UAAD,EAAA,UACG,qBACC,oBAAC,kBAAD,EAAkB,OAAM,OAAQ,CAAA,IAEhC,gBAAgB,OAAO,gBAAgB,EACrC,eACF,CAAC,EAEK,CAAA;KACA,CAAA,GACZ,oBAAC,YAAD;MACE,OAAM;MACN,SAAQ;MACR,eAAe;OACb,KAAK,aAAa;OAClB,WAAW,MAAM;MACnB;MAEC,UAAA,gBAAgB,OAAO,OAAO;KACrB,CAAA,CACG,EAAA,CAAA;IACZ;;EACK;;AAElB"}

package/dist/js/packages/components/src/components/List/components/Header/components/AllFiltersModal/FilterAccordion.mjs

@@ -9,7 +9,7 @@ import { FilterAccordionCheckboxGroup } from "./FilterAccordionCheckboxGroup.mjs
 import { FilterAccordionDateRange } from "./FilterAccordionDateRange.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/List/components/Header/components/AllFiltersModal/FilterAccordion.tsx
+// src/components/List/components/Header/components/AllFiltersModal/FilterAccordion.tsx
 var FilterAccordion = (props) => {
 	const { filter, expandAccordions } = props;
 	const name = filter.name ?? filter.property;
@@ -22,7 +22,6 @@ var FilterAccordion = (props) => {
 		}), /* @__PURE__ */ jsx(ContentView, { children: content })]
 	});
 };
-//#endregion
 export { FilterAccordion };
 
 //# sourceMappingURL=FilterAccordion.mjs.map

package/dist/js/packages/components/src/components/List/components/Header/components/AllFiltersModal/FilterAccordionCheckboxGroup.mjs

@@ -7,7 +7,7 @@ import CheckboxView from "../../../../../../views/CheckboxView.mjs";
 import FilterAccordionCheckboxGroup_module_default from "./FilterAccordionCheckboxGroup.module.mjs";
 import "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/List/components/Header/components/AllFiltersModal/FilterAccordionCheckboxGroup.tsx
+// src/components/List/components/Header/components/AllFiltersModal/FilterAccordionCheckboxGroup.tsx
 var FilterAccordionCheckboxGroup = (props) => {
 	const { filter } = props;
 	const formatter = useLocalizedStringFormatter(__locale_default, "List");
@@ -32,7 +32,6 @@ var FilterAccordionCheckboxGroup = (props) => {
 		}, v.id))
 	})] });
 };
-//#endregion
 export { FilterAccordionCheckboxGroup };
 
 //# sourceMappingURL=FilterAccordionCheckboxGroup.mjs.map

package/dist/js/packages/components/src/components/List/components/Header/components/AllFiltersModal/FilterAccordionCheckboxGroup.module.mjs

@@ -1,9 +1,8 @@
 "use client"
 /* */
-//#region src/components/List/components/Header/components/AllFiltersModal/FilterAccordionCheckboxGroup.module.scss
+// src/components/List/components/Header/components/AllFiltersModal/FilterAccordionCheckboxGroup.module.scss
 var selectAllCheckbox = "flow--list--header--all-filters-modal--select-all-checkbox";
 var FilterAccordionCheckboxGroup_module_default = { selectAllCheckbox };
-//#endregion
 export { FilterAccordionCheckboxGroup_module_default as default, selectAllCheckbox };
 
 //# sourceMappingURL=FilterAccordionCheckboxGroup.module.mjs.map

package/dist/js/packages/components/src/components/List/components/Header/components/AllFiltersModal/FilterAccordionDateRange.mjs

@@ -2,12 +2,14 @@
 /* */
 import { useLocalizedStringFormatter } from "../../../../../TranslationProvider/useLocalizedStringFormatter.mjs";
 import ButtonView from "../../../../../../views/ButtonView.mjs";
+import { isDateRangeValue } from "../../../../../Calendar/components/RangeCalendar/types.mjs";
 import __locale_default from "../../../../../../../../../_virtual/_18.locale.mjs";
 import RangeCalendarView from "../../../../../../views/RangeCalendarView.mjs";
+import { DateTimeRangeFields } from "../DateTimeRangeFields/DateTimeRangeFields.mjs";
 import FlexView from "../../../../../../views/FlexView.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/List/components/Header/components/AllFiltersModal/FilterAccordionDateRange.tsx
+// src/components/List/components/Header/components/AllFiltersModal/FilterAccordionDateRange.tsx
 var FilterAccordionDateRange = (props) => {
 	const { filter } = props;
 	const currentValue = filter.getValue();
@@ -15,9 +17,9 @@ var FilterAccordionDateRange = (props) => {
 	return /* @__PURE__ */ jsxs(FlexView, {
 		direction: "column",
 		gap: "m",
-		children: [/* @__PURE__ */ jsx(RangeCalendarView, {
-			...filter.dateRangeOptions,
-			value: currentValue,
+		children: [filter.granularity === "minute" ? /* @__PURE__ */ jsx(DateTimeRangeFields, { filter }) : /* @__PURE__ */ jsx(RangeCalendarView, {
+			...filter.rangeCalendarProps,
+			value: isDateRangeValue(currentValue) ? currentValue : null,
 			onChange: (range) => {
 				filter.setValue(range);
 			}
@@ -30,7 +32,6 @@ var FilterAccordionDateRange = (props) => {
 		})]
 	});
 };
-//#endregion
 export { FilterAccordionDateRange };
 
 //# sourceMappingURL=FilterAccordionDateRange.mjs.map

package/dist/js/packages/components/src/components/List/components/Header/components/AllFiltersModal/FilterAccordionDateRange.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FilterAccordionDateRange.mjs","names":["locales"],"sources":["../../../../../../../../../../../src/components/List/components/Header/components/AllFiltersModal/FilterAccordionDateRange.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport ButtonView from \"@/views/ButtonView\";\nimport FlexView from \"@/views/FlexView\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport RangeCalendarView from \"@/views/RangeCalendarView\";\nimport type { AnyDateRangeFilter } from \"@/components/List/model/filter/types\";\n\ninterface Props {\n  filter: AnyDateRangeFilter;\n}\n\nexport const FilterAccordionDateRange: FC<Props> = (props) => {\n  const { filter } = props;\n\n  const currentValue = filter.getValue();\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n\n  return (\n    <FlexView direction=\"column\" gap=\"m\">\n      <RangeCalendarView\n        {...filter.dateRangeOptions}\n        value={currentValue}\n        onChange={(range) => {\n          filter.setValue(range);\n        }}\n      />\n      {currentValue && (\n        <ButtonView\n          size=\"s\"\n          color=\"secondary\"\n          variant=\"soft\"\n          onPress={() => filter.clear()}\n        >\n          {stringFormatter.format(\"filters.clearSelection\")}\n        </ButtonView>\n      )}\n    </FlexView>\n  );\n};\n"],"mappings":";;;;;;;;;;AAYA,IAAa,4BAAuC,UAAU;CAC5D,MAAM,EAAE,WAAW;CAEnB,MAAM,eAAe,OAAO,SAAS;CAErC,MAAM,kBAAkB,4BAA4BA,kBAAS,MAAM;CAEnE,OACE,qBAAC,UAAD;EAAU,WAAU;EAAS,KAAI;EAAjC,UAAA,CACE,oBAAC,mBAAD;GACE,GAAI,OAAO;GACX,OAAO;GACP,WAAW,UAAU;IACnB,OAAO,SAAS,KAAK;GACvB;EACD,CAAA,GACA,gBACC,oBAAC,YAAD;GACE,MAAK;GACL,OAAM;GACN,SAAQ;GACR,eAAe,OAAO,MAAM;GAE3B,UAAA,gBAAgB,OAAO,wBAAwB;EACtC,CAAA,CAEN;;AAEd"}
+{"version":3,"file":"FilterAccordionDateRange.mjs","names":["locales"],"sources":["../../../../../../../../../../../src/components/List/components/Header/components/AllFiltersModal/FilterAccordionDateRange.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport ButtonView from \"@/views/ButtonView\";\nimport FlexView from \"@/views/FlexView\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport RangeCalendarView from \"@/views/RangeCalendarView\";\nimport type { AnyDateRangeFilter } from \"@/components/List/model/filter/types\";\nimport { isDateRangeValue } from \"@/components/Calendar\";\nimport { DateTimeRangeFields } from \"@/components/List/components/Header/components/DateTimeRangeFields/DateTimeRangeFields\";\n\ninterface Props {\n  filter: AnyDateRangeFilter;\n}\n\nexport const FilterAccordionDateRange: FC<Props> = (props) => {\n  const { filter } = props;\n\n  const currentValue = filter.getValue();\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n\n  return (\n    <FlexView direction=\"column\" gap=\"m\">\n      {filter.granularity === \"minute\" ? (\n        <DateTimeRangeFields filter={filter} />\n      ) : (\n        <RangeCalendarView\n          {...filter.rangeCalendarProps}\n          value={isDateRangeValue(currentValue) ? currentValue : null}\n          onChange={(range) => {\n            filter.setValue(range);\n          }}\n        />\n      )}\n      {currentValue && (\n        <ButtonView\n          size=\"s\"\n          color=\"secondary\"\n          variant=\"soft\"\n          onPress={() => filter.clear()}\n        >\n          {stringFormatter.format(\"filters.clearSelection\")}\n        </ButtonView>\n      )}\n    </FlexView>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAcA,IAAa,4BAAuC,UAAU;CAC5D,MAAM,EAAE,WAAW;CAEnB,MAAM,eAAe,OAAO,SAAS;CAErC,MAAM,kBAAkB,4BAA4BA,kBAAS,MAAM;CAEnE,OACE,qBAAC,UAAD;EAAU,WAAU;EAAS,KAAI;EAAjC,UAAA,CACG,OAAO,gBAAgB,WACtB,oBAAC,qBAAD,EAA6B,OAAS,CAAA,IAEtC,oBAAC,mBAAD;GACE,GAAI,OAAO;GACX,OAAO,iBAAiB,YAAY,IAAI,eAAe;GACvD,WAAW,UAAU;IACnB,OAAO,SAAS,KAAK;GACvB;EACD,CAAA,GAEF,gBACC,oBAAC,YAAD;GACE,MAAK;GACL,OAAM;GACN,SAAQ;GACR,eAAe,OAAO,MAAM;GAE3B,UAAA,gBAAgB,OAAO,wBAAwB;EACtC,CAAA,CAEN;;AAEd"}

package/dist/js/packages/components/src/components/List/components/Header/components/AllFiltersModal/FilterAccordionRadioGroup.mjs

@@ -8,7 +8,7 @@ import RadioView from "../../../../../../views/RadioView.mjs";
 import FlexView from "../../../../../../views/FlexView.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/List/components/Header/components/AllFiltersModal/FilterAccordionRadioGroup.tsx
+// src/components/List/components/Header/components/AllFiltersModal/FilterAccordionRadioGroup.tsx
 var FilterAccordionRadioGroup = (props) => {
 	const { filter } = props;
 	const activeKeys = filter.values.filter((v) => v.isActive).map((v) => v.id);
@@ -37,7 +37,6 @@ var FilterAccordionRadioGroup = (props) => {
 		})]
 	});
 };
-//#endregion
 export { FilterAccordionRadioGroup };
 
 //# sourceMappingURL=FilterAccordionRadioGroup.mjs.map

package/dist/js/packages/components/src/components/List/components/Header/components/AllFiltersModal/SortingAccordion.mjs

@@ -10,7 +10,7 @@ import RadioGroupView from "../../../../../../views/RadioGroupView.mjs";
 import RadioView from "../../../../../../views/RadioView.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/List/components/Header/components/AllFiltersModal/SortingAccordion.tsx
+// src/components/List/components/Header/components/AllFiltersModal/SortingAccordion.tsx
 var SortingAccordion = (props) => {
 	const { expandAccordions } = props;
 	const list = useList();
@@ -34,7 +34,6 @@ var SortingAccordion = (props) => {
 		}) })]
 	});
 };
-//#endregion
 export { SortingAccordion };
 
 //# sourceMappingURL=SortingAccordion.mjs.map

package/dist/js/packages/components/src/components/List/components/Header/components/AllFiltersModal/ViewModeAccordion.mjs

@@ -11,7 +11,7 @@ import RadioGroupView from "../../../../../../views/RadioGroupView.mjs";
 import RadioView from "../../../../../../views/RadioView.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/List/components/Header/components/AllFiltersModal/ViewModeAccordion.tsx
+// src/components/List/components/Header/components/AllFiltersModal/ViewModeAccordion.tsx
 var ViewModeAccordion = (props) => {
 	const { expandAccordions } = props;
 	const list = useList();
@@ -34,7 +34,6 @@ var ViewModeAccordion = (props) => {
 		}) })]
 	});
 };
-//#endregion
 export { ViewModeAccordion };
 
 //# sourceMappingURL=ViewModeAccordion.mjs.map

package/dist/js/packages/components/src/components/List/components/Header/components/DateTimeRangeFields/DateTimeRangeFields.mjs

@@ -0,0 +1,100 @@
+"use client"
+/* */
+import { useLocalizedStringFormatter } from "../../../../../TranslationProvider/useLocalizedStringFormatter.mjs";
+import { getListDateTimeRangeUpdate, isListDateTimeRangeEndBeforeStart, listDateTimeRangeFieldsFromValue, toListCalendarDate, toListTime } from "../../../../../../../../components-base/src/list/filter/dateTimeRangeFields.mjs";
+import "../../../../../../../../components-base/src/index.mjs";
+import DivView from "../../../../../../views/DivView.mjs";
+import __locale_default from "../../../../../../../../../_virtual/_18.locale.mjs";
+import DatePickerView from "../../../../../../views/DatePickerView.mjs";
+import TimeFieldView from "../../../../../../views/TimeFieldView.mjs";
+import LabelView from "../../../../../../views/LabelView.mjs";
+import FieldErrorView from "../../../../../../views/FieldErrorView.mjs";
+import DateTimeRangeFields_module_default from "./DateTimeRangeFields.module.mjs";
+import clsx from "clsx";
+import { useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/List/components/Header/components/DateTimeRangeFields/DateTimeRangeFields.tsx
+var DateTimeRangeFields = (props) => {
+	const { filter, className } = props;
+	const stringFormatter = useLocalizedStringFormatter(__locale_default, "List");
+	const value = filter.getValue();
+	const [appliedValue, setAppliedValue] = useState(value);
+	const [fields, setFields] = useState(() => listDateTimeRangeFieldsFromValue(value));
+	if (value !== appliedValue) {
+		setAppliedValue(value);
+		setFields(listDateTimeRangeFieldsFromValue(value));
+	}
+	const options = filter.dateTimeRangeOptions;
+	const minValue = toListCalendarDate(options?.minValue);
+	const maxValue = toListCalendarDate(options?.maxValue);
+	const update = (change) => {
+		const next = {
+			...fields,
+			...change
+		};
+		setFields(next);
+		const newValue = getListDateTimeRangeUpdate(next, appliedValue, options);
+		if (newValue === void 0) return;
+		setAppliedValue(newValue);
+		if (newValue) filter.setValue(newValue);
+		else filter.clear();
+	};
+	const rangeErrorId = useId();
+	const hasRangeError = isListDateTimeRangeEndBeforeStart(fields);
+	const describedBy = hasRangeError ? rangeErrorId : void 0;
+	return /* @__PURE__ */ jsxs(DivView, {
+		className: clsx(DateTimeRangeFields_module_default.dateTimeRangeFields, className),
+		children: [
+			/* @__PURE__ */ jsxs(DatePickerView, {
+				value: fields.startDate,
+				onChange: (date) => update({ startDate: toListCalendarDate(date) }),
+				minValue,
+				maxValue,
+				"aria-describedby": describedBy,
+				isDateUnavailable: options?.isDateUnavailable,
+				children: [/* @__PURE__ */ jsx(LabelView, {
+					optional: false,
+					children: stringFormatter.format("dateRange.startDate")
+				}), /* @__PURE__ */ jsx(FieldErrorView, {})]
+			}),
+			/* @__PURE__ */ jsx(TimeFieldView, {
+				value: fields.startTime,
+				onChange: (time) => update({ startTime: toListTime(time) }),
+				"aria-describedby": describedBy,
+				children: /* @__PURE__ */ jsx(LabelView, {
+					optional: false,
+					children: stringFormatter.format("dateRange.startTime")
+				})
+			}),
+			/* @__PURE__ */ jsxs(DatePickerView, {
+				value: fields.endDate,
+				onChange: (date) => update({ endDate: toListCalendarDate(date) }),
+				minValue,
+				maxValue,
+				"aria-describedby": describedBy,
+				isDateUnavailable: options?.isDateUnavailable,
+				children: [/* @__PURE__ */ jsx(LabelView, {
+					optional: false,
+					children: stringFormatter.format("dateRange.endDate")
+				}), /* @__PURE__ */ jsx(FieldErrorView, {})]
+			}),
+			/* @__PURE__ */ jsx(TimeFieldView, {
+				value: fields.endTime,
+				onChange: (time) => update({ endTime: toListTime(time) }),
+				"aria-describedby": describedBy,
+				children: /* @__PURE__ */ jsx(LabelView, {
+					optional: false,
+					children: stringFormatter.format("dateRange.endTime")
+				})
+			}),
+			hasRangeError && /* @__PURE__ */ jsx(FieldErrorView, {
+				id: rangeErrorId,
+				className: DateTimeRangeFields_module_default.rangeError,
+				children: stringFormatter.format("dateRange.endBeforeStart")
+			})
+		]
+	});
+};
+export { DateTimeRangeFields, DateTimeRangeFields as default };
+
+//# sourceMappingURL=DateTimeRangeFields.mjs.map

package/dist/js/packages/components/src/components/List/components/Header/components/DateTimeRangeFields/DateTimeRangeFields.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeRangeFields.mjs","names":["locales","styles"],"sources":["../../../../../../../../../../../src/components/List/components/Header/components/DateTimeRangeFields/DateTimeRangeFields.tsx"],"sourcesContent":["import { type FC, useId, useState } from \"react\";\nimport {\n  getListDateTimeRangeUpdate,\n  isListDateTimeRangeEndBeforeStart,\n  listDateTimeRangeFieldsFromValue,\n  toListCalendarDate,\n  toListTime,\n  type ListDateTimeRangeFields,\n} from \"@mittwald/flow-components-base\";\nimport clsx from \"clsx\";\nimport DatePickerView from \"@/views/DatePickerView\";\nimport TimeFieldView from \"@/views/TimeFieldView\";\nimport LabelView from \"@/views/LabelView\";\nimport FieldErrorView from \"@/views/FieldErrorView\";\nimport DivView from \"@/views/DivView\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport type { AnyDateRangeFilter } from \"@/components/List/model/filter/types\";\nimport styles from \"./DateTimeRangeFields.module.scss\";\n\ninterface Props {\n  filter: AnyDateRangeFilter;\n  className?: string;\n}\n\nexport const DateTimeRangeFields: FC<Props> = (props) => {\n  const { filter, className } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n\n  const value = filter.getValue();\n  const [appliedValue, setAppliedValue] = useState(value);\n  const [fields, setFields] = useState(() =>\n    listDateTimeRangeFieldsFromValue(value),\n  );\n\n  if (value !== appliedValue) {\n    setAppliedValue(value);\n    setFields(listDateTimeRangeFieldsFromValue(value));\n  }\n\n  const options = filter.dateTimeRangeOptions;\n  const minValue = toListCalendarDate(options?.minValue);\n  const maxValue = toListCalendarDate(options?.maxValue);\n\n  const update = (change: Partial<ListDateTimeRangeFields>) => {\n    const next = { ...fields, ...change };\n    setFields(next);\n\n    const newValue = getListDateTimeRangeUpdate(next, appliedValue, options);\n    if (newValue === undefined) {\n      return;\n    }\n\n    setAppliedValue(newValue);\n\n    if (newValue) {\n      filter.setValue(newValue);\n    } else {\n      filter.clear();\n    }\n  };\n\n  const rangeErrorId = useId();\n  const hasRangeError = isListDateTimeRangeEndBeforeStart(fields);\n  const describedBy = hasRangeError ? rangeErrorId : undefined;\n\n  return (\n    <DivView className={clsx(styles.dateTimeRangeFields, className)}>\n      <DatePickerView\n        value={fields.startDate}\n        onChange={(date) => update({ startDate: toListCalendarDate(date) })}\n        minValue={minValue}\n        maxValue={maxValue}\n        aria-describedby={describedBy}\n        isDateUnavailable={options?.isDateUnavailable}\n      >\n        <LabelView optional={false}>\n          {stringFormatter.format(\"dateRange.startDate\")}\n        </LabelView>\n        <FieldErrorView />\n      </DatePickerView>\n      <TimeFieldView\n        value={fields.startTime}\n        onChange={(time) => update({ startTime: toListTime(time) })}\n        aria-describedby={describedBy}\n      >\n        <LabelView optional={false}>\n          {stringFormatter.format(\"dateRange.startTime\")}\n        </LabelView>\n      </TimeFieldView>\n      <DatePickerView\n        value={fields.endDate}\n        onChange={(date) => update({ endDate: toListCalendarDate(date) })}\n        minValue={minValue}\n        maxValue={maxValue}\n        aria-describedby={describedBy}\n        isDateUnavailable={options?.isDateUnavailable}\n      >\n        <LabelView optional={false}>\n          {stringFormatter.format(\"dateRange.endDate\")}\n        </LabelView>\n        <FieldErrorView />\n      </DatePickerView>\n      <TimeFieldView\n        value={fields.endTime}\n        onChange={(time) => update({ endTime: toListTime(time) })}\n        aria-describedby={describedBy}\n      >\n        <LabelView optional={false}>\n          {stringFormatter.format(\"dateRange.endTime\")}\n        </LabelView>\n      </TimeFieldView>\n      {hasRangeError && (\n        <FieldErrorView id={rangeErrorId} className={styles.rangeError}>\n          {stringFormatter.format(\"dateRange.endBeforeStart\")}\n        </FieldErrorView>\n      )}\n    </DivView>\n  );\n};\n\nexport default DateTimeRangeFields;\n"],"mappings":";;;;;;;;;;;;;;;;AAyBA,IAAa,uBAAkC,UAAU;CACvD,MAAM,EAAE,QAAQ,cAAc;CAE9B,MAAM,kBAAkB,4BAA4BA,kBAAS,MAAM;CAEnE,MAAM,QAAQ,OAAO,SAAS;CAC9B,MAAM,CAAC,cAAc,mBAAmB,SAAS,KAAK;CACtD,MAAM,CAAC,QAAQ,aAAa,eAC1B,iCAAiC,KAAK,CACxC;CAEA,IAAI,UAAU,cAAc;EAC1B,gBAAgB,KAAK;EACrB,UAAU,iCAAiC,KAAK,CAAC;CACnD;CAEA,MAAM,UAAU,OAAO;CACvB,MAAM,WAAW,mBAAmB,SAAS,QAAQ;CACrD,MAAM,WAAW,mBAAmB,SAAS,QAAQ;CAErD,MAAM,UAAU,WAA6C;EAC3D,MAAM,OAAO;GAAE,GAAG;GAAQ,GAAG;EAAO;EACpC,UAAU,IAAI;EAEd,MAAM,WAAW,2BAA2B,MAAM,cAAc,OAAO;EACvE,IAAI,aAAa,KAAA,GACf;EAGF,gBAAgB,QAAQ;EAExB,IAAI,UACF,OAAO,SAAS,QAAQ;OAExB,OAAO,MAAM;CAEjB;CAEA,MAAM,eAAe,MAAM;CAC3B,MAAM,gBAAgB,kCAAkC,MAAM;CAC9D,MAAM,cAAc,gBAAgB,eAAe,KAAA;CAEnD,OACE,qBAAC,SAAD;EAAS,WAAW,KAAKC,mCAAO,qBAAqB,SAAS;EAA9D,UAAA;GACE,qBAAC,gBAAD;IACE,OAAO,OAAO;IACd,WAAW,SAAS,OAAO,EAAE,WAAW,mBAAmB,IAAI,EAAE,CAAC;IACxD;IACA;IACV,oBAAkB;IAClB,mBAAmB,SAAS;IAN9B,UAAA,CAQE,oBAAC,WAAD;KAAW,UAAU;KAClB,UAAA,gBAAgB,OAAO,qBAAqB;IACpC,CAAA,GACX,oBAAC,gBAAD,CAAiB,CAAA,CACH;;GAChB,oBAAC,eAAD;IACE,OAAO,OAAO;IACd,WAAW,SAAS,OAAO,EAAE,WAAW,WAAW,IAAI,EAAE,CAAC;IAC1D,oBAAkB;IAElB,UAAA,oBAAC,WAAD;KAAW,UAAU;KAClB,UAAA,gBAAgB,OAAO,qBAAqB;IACpC,CAAA;GACE,CAAA;GACf,qBAAC,gBAAD;IACE,OAAO,OAAO;IACd,WAAW,SAAS,OAAO,EAAE,SAAS,mBAAmB,IAAI,EAAE,CAAC;IACtD;IACA;IACV,oBAAkB;IAClB,mBAAmB,SAAS;IAN9B,UAAA,CAQE,oBAAC,WAAD;KAAW,UAAU;KAClB,UAAA,gBAAgB,OAAO,mBAAmB;IAClC,CAAA,GACX,oBAAC,gBAAD,CAAiB,CAAA,CACH;;GAChB,oBAAC,eAAD;IACE,OAAO,OAAO;IACd,WAAW,SAAS,OAAO,EAAE,SAAS,WAAW,IAAI,EAAE,CAAC;IACxD,oBAAkB;IAElB,UAAA,oBAAC,WAAD;KAAW,UAAU;KAClB,UAAA,gBAAgB,OAAO,mBAAmB;IAClC,CAAA;GACE,CAAA;GACd,iBACC,oBAAC,gBAAD;IAAgB,IAAI;IAAc,WAAWA,mCAAO;IACjD,UAAA,gBAAgB,OAAO,0BAA0B;GACpC,CAAA;EAEX;;AAEb"}

package/dist/js/packages/components/src/components/List/components/Header/components/DateTimeRangeFields/DateTimeRangeFields.module.mjs

@@ -0,0 +1,12 @@
+"use client"
+/* */
+// src/components/List/components/Header/components/DateTimeRangeFields/DateTimeRangeFields.module.scss
+var dateTimeRangeFields = "flow--list--header--date-time-range-fields";
+var rangeError = "flow--list--header--date-time-range-fields--range-error";
+var DateTimeRangeFields_module_default = {
+	dateTimeRangeFields,
+	rangeError
+};
+export { dateTimeRangeFields, DateTimeRangeFields_module_default as default, rangeError };
+
+//# sourceMappingURL=DateTimeRangeFields.module.mjs.map

package/dist/js/packages/components/src/components/List/components/Header/components/DateTimeRangeFields/DateTimeRangeFields.module.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeRangeFields.module.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Header/components/DateTimeRangeFields/DateTimeRangeFields.module.scss"],"sourcesContent":[".dateTimeRangeFields {\n  display: grid;\n\n  /* Fixed widths that fit the widest value or placeholder (en-US date, 24h\n     time), so typing does not resize the popover */\n  grid-template-columns: minmax(0, 9.25rem) minmax(0, 6.25rem);\n  gap: var(--column-layout--gap--m);\n\n  /* An error wraps instead of widening the popover */\n  :global(.flow--field-error) {\n    contain: inline-size;\n  }\n}\n\n.rangeError {\n  grid-column: 1 / -1;\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/List/components/Header/components/FilterContextMenu/DateRangeFilterPopover.mjs

@@ -5,19 +5,34 @@ import { useLocalizedStringFormatter } from "../../../../../TranslationProvider/
 import { useOverlayController } from "../../../../../../lib/controller/overlay/useOverlayController.mjs";
 import { Popover } from "../../../../../Popover/Popover.mjs";
 import ButtonView from "../../../../../../views/ButtonView.mjs";
+import { isDateRangeValue } from "../../../../../Calendar/components/RangeCalendar/types.mjs";
 import { PopoverTrigger } from "../../../../../Popover/components/PopoverTrigger/PopoverTrigger.mjs";
 import __locale_default from "../../../../../../../../../_virtual/_18.locale.mjs";
 import TextView from "../../../../../../views/TextView.mjs";
 import Header_module_default from "../../Header.module.mjs";
 import FilterContextMenus_module_default from "./FilterContextMenus.module.mjs";
 import RangeCalendarView from "../../../../../../views/RangeCalendarView.mjs";
+import { DateTimeRangeFields } from "../DateTimeRangeFields/DateTimeRangeFields.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/List/components/Header/components/FilterContextMenu/DateRangeFilterPopover.tsx
+// src/components/List/components/Header/components/FilterContextMenu/DateRangeFilterPopover.tsx
 var DateRangeFilterPopover = (props) => {
 	const { filter, isDisabled } = props;
 	const { name, property } = filter;
 	const stringFormatter = useLocalizedStringFormatter(__locale_default, "List");
 	const controller = useOverlayController("Popover");
+	const value = filter.getValue();
+	const fields = filter.granularity === "minute" ? /* @__PURE__ */ jsx(DateTimeRangeFields, {
+		filter,
+		className: FilterContextMenus_module_default.dateTimeRange
+	}) : /* @__PURE__ */ jsx(RangeCalendarView, {
+		...filter.rangeCalendarProps,
+		value: isDateRangeValue(value) ? value : null,
+		onChange: (range) => {
+			filter.setValue(range);
+			controller.close();
+		},
+		className: FilterContextMenus_module_default.calendar
+	});
 	return /* @__PURE__ */ jsxs(PopoverTrigger, {
 		controller,
 		children: [/* @__PURE__ */ jsxs(ButtonView, {
@@ -30,19 +45,10 @@ var DateRangeFilterPopover = (props) => {
 			placement: "bottom end",
 			isDialogContent: true,
 			"aria-label": stringFormatter.format("dateRange"),
-			children: /* @__PURE__ */ jsx(RangeCalendarView, {
-				...filter.dateRangeOptions,
-				value: filter.getValue(),
-				onChange: (range) => {
-					filter.setValue(range);
-					controller.close();
-				},
-				className: FilterContextMenus_module_default.calendar
-			})
+			children: fields
 		})]
 	});
 };
-//#endregion
 export { DateRangeFilterPopover };
 
 //# sourceMappingURL=DateRangeFilterPopover.mjs.map

package/dist/js/packages/components/src/components/List/components/Header/components/FilterContextMenu/DateRangeFilterPopover.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangeFilterPopover.mjs","names":["locales","headerStyles","styles"],"sources":["../../../../../../../../../../../src/components/List/components/Header/components/FilterContextMenu/DateRangeFilterPopover.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport ButtonView from \"@/views/ButtonView\";\nimport headerStyles from \"@/components/List/components/Header/Header.module.scss\";\nimport TextView from \"@/views/TextView\";\nimport { IconFilter } from \"@/components/Icon/components/icons\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport { Popover, PopoverTrigger } from \"@/components/Popover\";\nimport styles from \"./FilterContextMenus.module.scss\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport RangeCalendarView from \"@/views/RangeCalendarView\";\nimport type { AnyDateRangeFilter } from \"@/components/List/model/filter/types\";\n\ninterface Props {\n  filter: AnyDateRangeFilter;\n  isDisabled?: boolean;\n}\n\nexport const DateRangeFilterPopover: FC<Props> = (props) => {\n  const { filter, isDisabled } = props;\n\n  const { name, property } = filter;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n\n  const controller = useOverlayController(\"Popover\");\n\n  return (\n    <PopoverTrigger controller={controller}>\n      <ButtonView\n        className={headerStyles.hideOnMobile}\n        variant=\"outline\"\n        color=\"secondary\"\n        isDisabled={isDisabled}\n      >\n        <TextView>{name ?? property}</TextView>\n        <IconFilter />\n      </ButtonView>\n      <Popover\n        placement=\"bottom end\"\n        isDialogContent\n        aria-label={stringFormatter.format(\"dateRange\")}\n      >\n        <RangeCalendarView\n          {...filter.dateRangeOptions}\n          value={filter.getValue()}\n          onChange={(range) => {\n            filter.setValue(range);\n            controller.close();\n          }}\n          className={styles.calendar}\n        />\n      </Popover>\n    </PopoverTrigger>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,IAAa,0BAAqC,UAAU;CAC1D,MAAM,EAAE,QAAQ,eAAe;CAE/B,MAAM,EAAE,MAAM,aAAa;CAE3B,MAAM,kBAAkB,4BAA4BA,kBAAS,MAAM;CAEnE,MAAM,aAAa,qBAAqB,SAAS;CAEjD,OACE,qBAAC,gBAAD;EAA4B;EAA5B,UAAA,CACE,qBAAC,YAAD;GACE,WAAWC,sBAAa;GACxB,SAAQ;GACR,OAAM;GACM;GAJd,UAAA,CAME,oBAAC,UAAD,EAAA,UAAW,QAAQ,SAAmB,CAAA,GACtC,oBAAC,YAAD,CAAa,CAAA,CACH;EACZ,CAAA,GAAA,oBAAC,SAAD;GACE,WAAU;GACV,iBAAA;GACA,cAAY,gBAAgB,OAAO,WAAW;GAE9C,UAAA,oBAAC,mBAAD;IACE,GAAI,OAAO;IACX,OAAO,OAAO,SAAS;IACvB,WAAW,UAAU;KACnB,OAAO,SAAS,KAAK;KACrB,WAAW,MAAM;IACnB;IACA,WAAWC,kCAAO;GACnB,CAAA;EACM,CAAA,CACK;;AAEpB"}
+{"version":3,"file":"DateRangeFilterPopover.mjs","names":["locales","styles","headerStyles"],"sources":["../../../../../../../../../../../src/components/List/components/Header/components/FilterContextMenu/DateRangeFilterPopover.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport ButtonView from \"@/views/ButtonView\";\nimport headerStyles from \"@/components/List/components/Header/Header.module.scss\";\nimport TextView from \"@/views/TextView\";\nimport { IconFilter } from \"@/components/Icon/components/icons\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport { Popover, PopoverTrigger } from \"@/components/Popover\";\nimport styles from \"./FilterContextMenus.module.scss\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport RangeCalendarView from \"@/views/RangeCalendarView\";\nimport type { AnyDateRangeFilter } from \"@/components/List/model/filter/types\";\nimport { isDateRangeValue } from \"@/components/Calendar\";\nimport { DateTimeRangeFields } from \"@/components/List/components/Header/components/DateTimeRangeFields/DateTimeRangeFields\";\n\ninterface Props {\n  filter: AnyDateRangeFilter;\n  isDisabled?: boolean;\n}\n\nexport const DateRangeFilterPopover: FC<Props> = (props) => {\n  const { filter, isDisabled } = props;\n\n  const { name, property } = filter;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n\n  const controller = useOverlayController(\"Popover\");\n\n  const value = filter.getValue();\n\n  const fields =\n    filter.granularity === \"minute\" ? (\n      <DateTimeRangeFields filter={filter} className={styles.dateTimeRange} />\n    ) : (\n      <RangeCalendarView\n        {...filter.rangeCalendarProps}\n        value={isDateRangeValue(value) ? value : null}\n        onChange={(range) => {\n          filter.setValue(range);\n          controller.close();\n        }}\n        className={styles.calendar}\n      />\n    );\n\n  return (\n    <PopoverTrigger controller={controller}>\n      <ButtonView\n        className={headerStyles.hideOnMobile}\n        variant=\"outline\"\n        color=\"secondary\"\n        isDisabled={isDisabled}\n      >\n        <TextView>{name ?? property}</TextView>\n        <IconFilter />\n      </ButtonView>\n      <Popover\n        placement=\"bottom end\"\n        isDialogContent\n        aria-label={stringFormatter.format(\"dateRange\")}\n      >\n        {fields}\n      </Popover>\n    </PopoverTrigger>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAoBA,IAAa,0BAAqC,UAAU;CAC1D,MAAM,EAAE,QAAQ,eAAe;CAE/B,MAAM,EAAE,MAAM,aAAa;CAE3B,MAAM,kBAAkB,4BAA4BA,kBAAS,MAAM;CAEnE,MAAM,aAAa,qBAAqB,SAAS;CAEjD,MAAM,QAAQ,OAAO,SAAS;CAE9B,MAAM,SACJ,OAAO,gBAAgB,WACrB,oBAAC,qBAAD;EAA6B;EAAQ,WAAWC,kCAAO;CAAgB,CAAA,IAEvE,oBAAC,mBAAD;EACE,GAAI,OAAO;EACX,OAAO,iBAAiB,KAAK,IAAI,QAAQ;EACzC,WAAW,UAAU;GACnB,OAAO,SAAS,KAAK;GACrB,WAAW,MAAM;EACnB;EACA,WAAWA,kCAAO;CACnB,CAAA;CAGL,OACE,qBAAC,gBAAD;EAA4B;EAA5B,UAAA,CACE,qBAAC,YAAD;GACE,WAAWC,sBAAa;GACxB,SAAQ;GACR,OAAM;GACM;GAJd,UAAA,CAME,oBAAC,UAAD,EAAA,UAAW,QAAQ,SAAmB,CAAA,GACtC,oBAAC,YAAD,CAAa,CAAA,CACH;EACZ,CAAA,GAAA,oBAAC,SAAD;GACE,WAAU;GACV,iBAAA;GACA,cAAY,gBAAgB,OAAO,WAAW;GAE7C,UAAA;EACM,CAAA,CACK;;AAEpB"}

package/dist/js/packages/components/src/components/List/components/Header/components/FilterContextMenu/FilterContextMenu.mjs

@@ -8,7 +8,7 @@ import TextView from "../../../../../../views/TextView.mjs";
 import Header_module_default from "../../Header.module.mjs";
 import { FilterMenuItem } from "./FilterMenuItem.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/List/components/Header/components/FilterContextMenu/FilterContextMenu.tsx
+// src/components/List/components/Header/components/FilterContextMenu/FilterContextMenu.tsx
 var FilterContextMenu = (props) => {
 	const { filter, isDisabled } = props;
 	const { values, mode, name, property } = filter;
@@ -33,7 +33,6 @@ var FilterContextMenu = (props) => {
 		children: filterItems
 	})] });
 };
-//#endregion
 export { FilterContextMenu };
 
 //# sourceMappingURL=FilterContextMenu.mjs.map

package/dist/js/packages/components/src/components/List/components/Header/components/FilterContextMenu/FilterContextMenus.mjs

@@ -5,7 +5,7 @@ import { DateRangeFilter } from "../../../../model/filter/DateRangeFilter.mjs";
 import { FilterContextMenu } from "./FilterContextMenu.mjs";
 import { DateRangeFilterPopover } from "./DateRangeFilterPopover.mjs";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/List/components/Header/components/FilterContextMenu/FilterContextMenus.tsx
+// src/components/List/components/Header/components/FilterContextMenu/FilterContextMenus.tsx
 var FilterContextMenus = (props) => {
 	const { isDisabled } = props;
 	return useList().filters.filter((f) => f.priority === "primary").map((filter) => filter instanceof DateRangeFilter ? /* @__PURE__ */ jsx(DateRangeFilterPopover, {
@@ -16,7 +16,6 @@ var FilterContextMenus = (props) => {
 		isDisabled
 	}, filter.property));
 };
-//#endregion
 export { FilterContextMenus };
 
 //# sourceMappingURL=FilterContextMenus.mjs.map

package/dist/js/packages/components/src/components/List/components/Header/components/FilterContextMenu/FilterContextMenus.module.mjs

@@ -1,9 +1,12 @@
 "use client"
 /* */
-//#region src/components/List/components/Header/components/FilterContextMenu/FilterContextMenus.module.scss
+// src/components/List/components/Header/components/FilterContextMenu/FilterContextMenus.module.scss
 var calendar = "flow--list--header--filter-context-menu--calendar";
-var FilterContextMenus_module_default = { calendar };
-//#endregion
-export { calendar, FilterContextMenus_module_default as default };
+var dateTimeRange = "flow--list--header--filter-context-menu--date-time-range";
+var FilterContextMenus_module_default = {
+	calendar,
+	dateTimeRange
+};
+export { calendar, dateTimeRange, FilterContextMenus_module_default as default };
 
 //# sourceMappingURL=FilterContextMenus.module.mjs.map

package/dist/js/packages/components/src/components/List/components/Header/components/FilterContextMenu/FilterContextMenus.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FilterContextMenus.module.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Header/components/FilterContextMenu/FilterContextMenus.module.scss"],"sourcesContent":[".calendar {\n  padding: var(--popover--padding--m);\n}\n"],"mappings":""}
+{"version":3,"file":"FilterContextMenus.module.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Header/components/FilterContextMenu/FilterContextMenus.module.scss"],"sourcesContent":[".calendar {\n  padding: var(--popover--padding--m);\n}\n\n.dateTimeRange {\n  padding: var(--popover--padding--m);\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/List/components/Header/components/FilterContextMenu/FilterMenuItem.mjs

@@ -3,7 +3,7 @@
 import MenuItemView from "../../../../../../views/MenuItemView.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/List/components/Header/components/FilterContextMenu/FilterMenuItem.tsx
+// src/components/List/components/Header/components/FilterContextMenu/FilterMenuItem.tsx
 var FilterMenuItem = (props) => {
 	const { filterValue, selectionMode } = props;
 	return /* @__PURE__ */ jsx(MenuItemView, {
@@ -14,7 +14,6 @@ var FilterMenuItem = (props) => {
 		children: filterValue.render()
 	});
 };
-//#endregion
 export { FilterMenuItem };
 
 //# sourceMappingURL=FilterMenuItem.mjs.map

package/dist/js/packages/components/src/components/List/components/Header/components/SearchField/SearchField.mjs

@@ -4,9 +4,9 @@ import { useOnChange } from "../../../../../../lib/hooks/useOnChange.mjs";
 import SearchFieldView from "../../../../../../views/SearchFieldView.mjs";
 import SearchField_module_default from "./SearchField.module.mjs";
 import { useAriaAnnounceSearchState } from "../../../../hooks/useAriaAnnounceSearchState.mjs";
-import { createElement, useEffect, useState } from "react";
+import { createElement, useEffect, useEffectEvent, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/List/components/Header/components/SearchField/SearchField.tsx
+// src/components/List/components/Header/components/SearchField/SearchField.tsx
 var autoSubmitTimeout = 500;
 var DefaultSearchFieldRender = (props) => {
 	const { onChange, value, autoSubmit = true, ...searchFieldProps } = props;
@@ -19,9 +19,10 @@ var DefaultSearchFieldRender = (props) => {
 			onChange(searchString);
 		}
 	};
+	const autoSubmitSearch = useEffectEvent(submitSearch);
 	useEffect(() => {
 		if (autoSubmit) {
-			const timeout = setTimeout(() => submitSearch(), autoSubmitTimeout);
+			const timeout = setTimeout(() => autoSubmitSearch(), autoSubmitTimeout);
 			return () => clearTimeout(timeout);
 		}
 	}, [searchString, autoSubmit]);
@@ -50,13 +51,13 @@ var SearchField = (props) => {
 	const { search, isDisabled } = props;
 	const render = search.render ?? DefaultSearchFieldRender;
 	return createElement(render, {
+		key: isDisabled ? "disabled" : "enabled",
 		value: search.value,
 		onChange: search.setValue.bind(search),
 		isDisabled,
 		...search.textFieldProps
 	});
 };
-//#endregion
 export { SearchField, SearchField as default };
 
 //# sourceMappingURL=SearchField.mjs.map