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

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

@@ -0,0 +1,101 @@
+"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";
+//#region 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")
+			})
+		]
+	});
+};
+//#endregion
+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,13 @@
+"use client"
+/* */
+//#region 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
+};
+//#endregion
+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,12 +5,14 @@ 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
 var DateRangeFilterPopover = (props) => {
@@ -18,6 +20,19 @@ var DateRangeFilterPopover = (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,15 +45,7 @@ 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
 		})]
 	});
 };

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/FilterContextMenus.module.mjs

@@ -2,8 +2,12 @@
 /* */
 //#region src/components/List/components/Header/components/FilterContextMenu/FilterContextMenus.module.scss
 var calendar = "flow--list--header--filter-context-menu--calendar";
-var FilterContextMenus_module_default = { calendar };
+var dateTimeRange = "flow--list--header--filter-context-menu--date-time-range";
+var FilterContextMenus_module_default = {
+	calendar,
+	dateTimeRange
+};
 //#endregion
-export { calendar, FilterContextMenus_module_default as default };
+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/SearchField/SearchField.mjs

@@ -4,7 +4,7 @@ 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
 var autoSubmitTimeout = 500;
@@ -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,6 +51,7 @@ 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,

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

@@ -1 +1 @@
-{"version":3,"file":"SearchField.mjs","names":["styles"],"sources":["../../../../../../../../../../../src/components/List/components/Header/components/SearchField/SearchField.tsx"],"sourcesContent":["import type { FC, KeyboardEvent } from \"react\";\nimport { createElement, useEffect, useState } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport type { Search } from \"@/components/List/model/search/Search\";\nimport type { SearchFieldRenderComponent } from \"@/components/List/model/search/types\";\nimport { useOnChange } from \"@/lib/hooks\";\nimport SearchFieldView from \"@/views/SearchFieldView\";\nimport styles from \"./SearchField.module.scss\";\nimport { useAriaAnnounceSearchState } from \"@/components/List/hooks/useAriaAnnounceSearchState\";\n\ninterface Props extends PropsWithClassName {\n  search: Search<never>;\n  isDisabled?: boolean;\n}\n\nconst autoSubmitTimeout = 500;\n\nconst DefaultSearchFieldRender: SearchFieldRenderComponent = (props) => {\n  const { onChange, value, autoSubmit = true, ...searchFieldProps } = props;\n\n  const [searchString, setSearchString] = useState(value ?? \"\");\n  const [previousSearchString, setPreviousSearchString] = useState(\"\");\n\n  const submitSearch = () => {\n    if (searchString.trim() === \"\") {\n      onChange(undefined);\n    } else if (previousSearchString !== searchString) {\n      setPreviousSearchString(searchString);\n      onChange(searchString);\n    }\n  };\n\n  useEffect(() => {\n    if (autoSubmit) {\n      const timeout = setTimeout(() => submitSearch(), autoSubmitTimeout);\n      return () => clearTimeout(timeout);\n    }\n  }, [searchString, autoSubmit]);\n\n  useAriaAnnounceSearchState();\n\n  useOnChange(value, () => {\n    setSearchString(value ?? \"\");\n  }, [searchString]);\n\n  const clearSearch = () => {\n    onChange(undefined);\n    setSearchString(\"\");\n  };\n\n  const handleKeyPress = (e: KeyboardEvent) => {\n    if (e.key === \"Enter\" && !autoSubmit) {\n      submitSearch();\n    } else if (e.key === \"Escape\") {\n      clearSearch();\n    }\n  };\n\n  return (\n    <SearchFieldView\n      className={styles.searchField}\n      value={searchString}\n      onKeyUp={handleKeyPress}\n      onChange={(value) => setSearchString(value)}\n      onClear={clearSearch}\n      {...searchFieldProps}\n    />\n  );\n};\n\nexport const SearchField: FC<Props> = (props) => {\n  const { search, isDisabled } = props;\n\n  const render = search.render ?? DefaultSearchFieldRender;\n\n  return createElement(render, {\n    value: search.value,\n    onChange: search.setValue.bind(search),\n    isDisabled,\n    ...search.textFieldProps,\n  });\n};\n\nexport default SearchField;\n"],"mappings":";;;;;;;;;AAeA,IAAM,oBAAoB;AAE1B,IAAM,4BAAwD,UAAU;CACtE,MAAM,EAAE,UAAU,OAAO,aAAa,MAAM,GAAG,qBAAqB;CAEpE,MAAM,CAAC,cAAc,mBAAmB,SAAS,SAAS,EAAE;CAC5D,MAAM,CAAC,sBAAsB,2BAA2B,SAAS,EAAE;CAEnE,MAAM,qBAAqB;EACzB,IAAI,aAAa,KAAK,MAAM,IAC1B,SAAS,KAAA,CAAS;OACb,IAAI,yBAAyB,cAAc;GAChD,wBAAwB,YAAY;GACpC,SAAS,YAAY;EACvB;CACF;CAEA,gBAAgB;EACd,IAAI,YAAY;GACd,MAAM,UAAU,iBAAiB,aAAa,GAAG,iBAAiB;GAClE,aAAa,aAAa,OAAO;EACnC;CACF,GAAG,CAAC,cAAc,UAAU,CAAC;CAE7B,2BAA2B;CAE3B,YAAY,aAAa;EACvB,gBAAgB,SAAS,EAAE;CAC7B,GAAG,CAAC,YAAY,CAAC;CAEjB,MAAM,oBAAoB;EACxB,SAAS,KAAA,CAAS;EAClB,gBAAgB,EAAE;CACpB;CAEA,MAAM,kBAAkB,MAAqB;EAC3C,IAAI,EAAE,QAAQ,WAAW,CAAC,YACxB,aAAa;OACR,IAAI,EAAE,QAAQ,UACnB,YAAY;CAEhB;CAEA,OACE,oBAAC,iBAAD;EACE,WAAWA,2BAAO;EAClB,OAAO;EACP,SAAS;EACT,WAAW,UAAU,gBAAgB,KAAK;EAC1C,SAAS;EACT,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,eAA0B,UAAU;CAC/C,MAAM,EAAE,QAAQ,eAAe;CAE/B,MAAM,SAAS,OAAO,UAAU;CAEhC,OAAO,cAAc,QAAQ;EAC3B,OAAO,OAAO;EACd,UAAU,OAAO,SAAS,KAAK,MAAM;EACrC;EACA,GAAG,OAAO;CACZ,CAAC;AACH"}
+{"version":3,"file":"SearchField.mjs","names":["styles"],"sources":["../../../../../../../../../../../src/components/List/components/Header/components/SearchField/SearchField.tsx"],"sourcesContent":["import type { FC, KeyboardEvent } from \"react\";\nimport { createElement, useEffect, useEffectEvent, useState } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport type { Search } from \"@/components/List/model/search/Search\";\nimport type { SearchFieldRenderComponent } from \"@/components/List/model/search/types\";\nimport { useOnChange } from \"@/lib/hooks\";\nimport SearchFieldView from \"@/views/SearchFieldView\";\nimport styles from \"./SearchField.module.scss\";\nimport { useAriaAnnounceSearchState } from \"@/components/List/hooks/useAriaAnnounceSearchState\";\n\ninterface Props extends PropsWithClassName {\n  search: Search<never>;\n  isDisabled?: boolean;\n}\n\nconst autoSubmitTimeout = 500;\n\nconst DefaultSearchFieldRender: SearchFieldRenderComponent = (props) => {\n  const { onChange, value, autoSubmit = true, ...searchFieldProps } = props;\n\n  const [searchString, setSearchString] = useState(value ?? \"\");\n  const [previousSearchString, setPreviousSearchString] = useState(\"\");\n\n  const submitSearch = () => {\n    if (searchString.trim() === \"\") {\n      onChange(undefined);\n    } else if (previousSearchString !== searchString) {\n      setPreviousSearchString(searchString);\n      onChange(searchString);\n    }\n  };\n\n  const autoSubmitSearch = useEffectEvent(submitSearch);\n\n  useEffect(() => {\n    if (autoSubmit) {\n      const timeout = setTimeout(() => autoSubmitSearch(), autoSubmitTimeout);\n      return () => clearTimeout(timeout);\n    }\n  }, [searchString, autoSubmit]);\n\n  useAriaAnnounceSearchState();\n\n  useOnChange(value, () => {\n    setSearchString(value ?? \"\");\n  }, [searchString]);\n\n  const clearSearch = () => {\n    onChange(undefined);\n    setSearchString(\"\");\n  };\n\n  const handleKeyPress = (e: KeyboardEvent) => {\n    if (e.key === \"Enter\" && !autoSubmit) {\n      submitSearch();\n    } else if (e.key === \"Escape\") {\n      clearSearch();\n    }\n  };\n\n  return (\n    <SearchFieldView\n      className={styles.searchField}\n      value={searchString}\n      onKeyUp={handleKeyPress}\n      onChange={(value) => setSearchString(value)}\n      onClear={clearSearch}\n      {...searchFieldProps}\n    />\n  );\n};\n\nexport const SearchField: FC<Props> = (props) => {\n  const { search, isDisabled } = props;\n\n  const render = search.render ?? DefaultSearchFieldRender;\n\n  return createElement(render, {\n    // autoFocus only acts on mount, and a disabled field cannot take focus –\n    // remount once the initial loading enables it.\n    key: isDisabled ? \"disabled\" : \"enabled\",\n    value: search.value,\n    onChange: search.setValue.bind(search),\n    isDisabled,\n    ...search.textFieldProps,\n  });\n};\n\nexport default SearchField;\n"],"mappings":";;;;;;;;;AAeA,IAAM,oBAAoB;AAE1B,IAAM,4BAAwD,UAAU;CACtE,MAAM,EAAE,UAAU,OAAO,aAAa,MAAM,GAAG,qBAAqB;CAEpE,MAAM,CAAC,cAAc,mBAAmB,SAAS,SAAS,EAAE;CAC5D,MAAM,CAAC,sBAAsB,2BAA2B,SAAS,EAAE;CAEnE,MAAM,qBAAqB;EACzB,IAAI,aAAa,KAAK,MAAM,IAC1B,SAAS,KAAA,CAAS;OACb,IAAI,yBAAyB,cAAc;GAChD,wBAAwB,YAAY;GACpC,SAAS,YAAY;EACvB;CACF;CAEA,MAAM,mBAAmB,eAAe,YAAY;CAEpD,gBAAgB;EACd,IAAI,YAAY;GACd,MAAM,UAAU,iBAAiB,iBAAiB,GAAG,iBAAiB;GACtE,aAAa,aAAa,OAAO;EACnC;CACF,GAAG,CAAC,cAAc,UAAU,CAAC;CAE7B,2BAA2B;CAE3B,YAAY,aAAa;EACvB,gBAAgB,SAAS,EAAE;CAC7B,GAAG,CAAC,YAAY,CAAC;CAEjB,MAAM,oBAAoB;EACxB,SAAS,KAAA,CAAS;EAClB,gBAAgB,EAAE;CACpB;CAEA,MAAM,kBAAkB,MAAqB;EAC3C,IAAI,EAAE,QAAQ,WAAW,CAAC,YACxB,aAAa;OACR,IAAI,EAAE,QAAQ,UACnB,YAAY;CAEhB;CAEA,OACE,oBAAC,iBAAD;EACE,WAAWA,2BAAO;EAClB,OAAO;EACP,SAAS;EACT,WAAW,UAAU,gBAAgB,KAAK;EAC1C,SAAS;EACT,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,eAA0B,UAAU;CAC/C,MAAM,EAAE,QAAQ,eAAe;CAE/B,MAAM,SAAS,OAAO,UAAU;CAEhC,OAAO,cAAc,QAAQ;EAG3B,KAAK,aAAa,aAAa;EAC/B,OAAO,OAAO;EACd,UAAU,OAAO,SAAS,KAAK,MAAM;EACrC;EACA,GAAG,OAAO;CACZ,CAAC;AACH"}

package/dist/js/packages/components/src/components/List/components/Items/Items.mjs

@@ -7,27 +7,47 @@ import { Item } from "./components/Item/Item.mjs";
 import ItemsGridListView from "../../../../views/ItemsGridListView.mjs";
 import { FallbackItems } from "./components/FallbackItems/FallbackItems.mjs";
 import { useInfiniteScrollTrigger } from "../../hooks/useInfiniteScrollTrigger.mjs";
+import { useLatestOnAction } from "../../hooks/useLatestOnAction.mjs";
 import clsx from "clsx";
+import { useRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { isShallowEqual } from "remeda";
 //#region src/components/List/components/Items/Items.tsx
 var Items = () => {
 	const list = useList();
+	const lastRender = useRef(null);
 	const tiles = list.viewMode.isTiles;
 	const isLoading = list.loader.useIsLoading();
 	const isInitiallyLoading = list.loader.useIsInitiallyLoading();
 	const isLoadingMore = list.loader.useIsLoadingMore();
 	const { triggerRef, triggerIndex } = useInfiniteScrollTrigger();
+	const onAction = useLatestOnAction(list);
 	if (!list.itemView) return null;
+	const inputs = [
+		tiles,
+		isLoading,
+		isInitiallyLoading,
+		isLoadingMore,
+		onAction,
+		triggerIndex,
+		triggerRef,
+		list.accordion,
+		list.itemView.tileMaxWidth,
+		...list.items.entries.flatMap((item) => [item.id, item.data])
+	];
+	const last = lastRender.current;
+	if (last && isShallowEqual(last.inputs, inputs) && isShallowEqual(last.list.componentProps, list.componentProps) && list.items.entries.every((item) => !!last.list.itemView?.rendersSameFor(list.itemView, item.data))) return last.element;
 	const items = list.items.entries.map((item, index) => /* @__PURE__ */ jsx(Item, {
 		data: item.data,
 		id: item.id,
 		list,
+		onAction,
 		isTile: tiles,
 		triggerRef: index === triggerIndex ? triggerRef : void 0
 	}, item.id));
 	const rootClassName = clsx(Items_module_default.items, isLoading && !(list.infiniteScroll && isLoadingMore) && Items_module_default.isLoading, tiles && Items_module_default.tiles);
 	const { "aria-labelledby": ariaLabelledby, "aria-label": ariaLabel, ...rest } = list.componentProps;
-	return /* @__PURE__ */ jsx(DivView, {
+	const element = /* @__PURE__ */ jsx(DivView, {
 		"aria-hidden": isInitiallyLoading,
 		"aria-busy": isLoading,
 		children: /* @__PURE__ */ jsx(ItemsGridListView, {
@@ -40,6 +60,12 @@ var Items = () => {
 			children: items.length === 0 && isInitiallyLoading ? /* @__PURE__ */ jsx(FallbackItems, {}) : items
 		})
 	});
+	lastRender.current = {
+		inputs,
+		list,
+		element
+	};
+	return element;
 };
 //#endregion
 export { Items, Items as default };

package/dist/js/packages/components/src/components/List/components/Items/Items.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Items.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/List/components/Items/Items.tsx"],"sourcesContent":["import Item from \"@/components/List/components/Items/components/Item/Item\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport DivView from \"@/views/DivView\";\nimport ItemsGridListView from \"@/views/ItemsGridListView\";\nimport clsx from \"clsx\";\nimport type { FC } from \"react\";\nimport styles from \"./Items.module.scss\";\nimport { FallbackItems } from \"./components/FallbackItems\";\nimport { useInfiniteScrollTrigger } from \"@/components/List/hooks/useInfiniteScrollTrigger\";\n\nexport const Items: FC = () => {\n  const list = useList();\n  const tiles = list.viewMode.isTiles;\n  const isLoading = list.loader.useIsLoading();\n  const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n  const isLoadingMore = list.loader.useIsLoadingMore();\n\n  const { triggerRef, triggerIndex } = useInfiniteScrollTrigger();\n\n  if (!list.itemView) {\n    return null;\n  }\n\n  const items = list.items.entries.map((item, index) => (\n    <Item\n      key={item.id}\n      data={item.data}\n      id={item.id}\n      list={list}\n      isTile={tiles}\n      triggerRef={index === triggerIndex ? triggerRef : undefined}\n    />\n  ));\n\n  const rootClassName = clsx(\n    styles.items,\n    isLoading && !(list.infiniteScroll && isLoadingMore) && styles.isLoading,\n    tiles && styles.tiles,\n  );\n\n  const {\n    \"aria-labelledby\": ariaLabelledby,\n    \"aria-label\": ariaLabel,\n    ...rest\n  } = list.componentProps;\n\n  return (\n    <DivView aria-hidden={isInitiallyLoading} aria-busy={isLoading}>\n      <ItemsGridListView\n        className={rootClassName}\n        {...rest}\n        aria-labelledby={ariaLabel ? undefined : ariaLabelledby}\n        aria-label={ariaLabel}\n        layout={tiles ? \"grid\" : \"stack\"}\n        tileMaxWidth={list.itemView.tileMaxWidth}\n      >\n        {items.length === 0 && isInitiallyLoading ? <FallbackItems /> : items}\n      </ItemsGridListView>\n    </DivView>\n  );\n};\n\nexport default Items;\n"],"mappings":";;;;;;;;;;;;AAUA,IAAa,cAAkB;CAC7B,MAAM,OAAO,QAAQ;CACrB,MAAM,QAAQ,KAAK,SAAS;CAC5B,MAAM,YAAY,KAAK,OAAO,aAAa;CAC3C,MAAM,qBAAqB,KAAK,OAAO,sBAAsB;CAC7D,MAAM,gBAAgB,KAAK,OAAO,iBAAiB;CAEnD,MAAM,EAAE,YAAY,iBAAiB,yBAAyB;CAE9D,IAAI,CAAC,KAAK,UACR,OAAO;CAGT,MAAM,QAAQ,KAAK,MAAM,QAAQ,KAAK,MAAM,UAC1C,oBAAC,MAAD;EAEE,MAAM,KAAK;EACX,IAAI,KAAK;EACH;EACN,QAAQ;EACR,YAAY,UAAU,eAAe,aAAa,KAAA;CACnD,GANM,KAAK,EAMX,CACF;CAED,MAAM,gBAAgB,KACpBA,qBAAO,OACP,aAAa,EAAE,KAAK,kBAAkB,kBAAkBA,qBAAO,WAC/D,SAASA,qBAAO,KAClB;CAEA,MAAM,EACJ,mBAAmB,gBACnB,cAAc,WACd,GAAG,SACD,KAAK;CAET,OACE,oBAAC,SAAD;EAAS,eAAa;EAAoB,aAAW;EACnD,UAAA,oBAAC,mBAAD;GACE,WAAW;GACX,GAAI;GACJ,mBAAiB,YAAY,KAAA,IAAY;GACzC,cAAY;GACZ,QAAQ,QAAQ,SAAS;GACzB,cAAc,KAAK,SAAS;GAE3B,UAAA,MAAM,WAAW,KAAK,qBAAqB,oBAAC,eAAD,CAAgB,CAAA,IAAI;EAC/C,CAAA;CACZ,CAAA;AAEb"}
+{"version":3,"file":"Items.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/List/components/Items/Items.tsx"],"sourcesContent":["import Item from \"@/components/List/components/Items/components/Item/Item\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport DivView from \"@/views/DivView\";\nimport ItemsGridListView from \"@/views/ItemsGridListView\";\nimport clsx from \"clsx\";\nimport type { FC, ReactElement } from \"react\";\nimport { useRef } from \"react\";\nimport { isShallowEqual } from \"remeda\";\nimport type List from \"@/components/List/model/List\";\nimport styles from \"./Items.module.scss\";\nimport { FallbackItems } from \"./components/FallbackItems\";\nimport { useInfiniteScrollTrigger } from \"@/components/List/hooks/useInfiniteScrollTrigger\";\nimport { useLatestOnAction } from \"@/components/List/hooks/useLatestOnAction\";\n\ninterface LastRender {\n  inputs: unknown[];\n  list: List<never>;\n  element: ReactElement;\n}\n\nexport const Items: FC = () => {\n  const list = useList();\n  const lastRender = useRef<LastRender | null>(null);\n  const tiles = list.viewMode.isTiles;\n  const isLoading = list.loader.useIsLoading();\n  const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n  const isLoadingMore = list.loader.useIsLoadingMore();\n\n  const { triggerRef, triggerIndex } = useInfiniteScrollTrigger();\n\n  const onAction = useLatestOnAction(list);\n\n  if (!list.itemView) {\n    return null;\n  }\n\n  /*\n   * react-aria re-renders every item whenever its GridList renders, Flow's\n   * item memo or not. While nothing the items show has changed, the GridList\n   * gets the element of the last render, so it does not render at all. Items\n   * count as unchanged by the same rule as the item memo.\n   */\n  const inputs = [\n    tiles,\n    isLoading,\n    isInitiallyLoading,\n    isLoadingMore,\n    onAction,\n    triggerIndex,\n    triggerRef,\n    list.accordion,\n    list.itemView.tileMaxWidth,\n    ...list.items.entries.flatMap((item) => [item.id, item.data]),\n  ];\n  const last = lastRender.current;\n  if (\n    last &&\n    isShallowEqual(last.inputs, inputs) &&\n    isShallowEqual(last.list.componentProps, list.componentProps) &&\n    list.items.entries.every(\n      (item) => !!last.list.itemView?.rendersSameFor(list.itemView, item.data),\n    )\n  ) {\n    return last.element;\n  }\n\n  const items = list.items.entries.map((item, index) => (\n    <Item\n      key={item.id}\n      data={item.data}\n      id={item.id}\n      list={list}\n      onAction={onAction}\n      isTile={tiles}\n      triggerRef={index === triggerIndex ? triggerRef : undefined}\n    />\n  ));\n\n  const rootClassName = clsx(\n    styles.items,\n    isLoading && !(list.infiniteScroll && isLoadingMore) && styles.isLoading,\n    tiles && styles.tiles,\n  );\n\n  const {\n    \"aria-labelledby\": ariaLabelledby,\n    \"aria-label\": ariaLabel,\n    ...rest\n  } = list.componentProps;\n\n  const element = (\n    <DivView aria-hidden={isInitiallyLoading} aria-busy={isLoading}>\n      <ItemsGridListView\n        className={rootClassName}\n        {...rest}\n        aria-labelledby={ariaLabel ? undefined : ariaLabelledby}\n        aria-label={ariaLabel}\n        layout={tiles ? \"grid\" : \"stack\"}\n        tileMaxWidth={list.itemView.tileMaxWidth}\n      >\n        {items.length === 0 && isInitiallyLoading ? <FallbackItems /> : items}\n      </ItemsGridListView>\n    </DivView>\n  );\n  lastRender.current = { inputs, list, element };\n  return element;\n};\n\nexport default Items;\n"],"mappings":";;;;;;;;;;;;;;;AAoBA,IAAa,cAAkB;CAC7B,MAAM,OAAO,QAAQ;CACrB,MAAM,aAAa,OAA0B,IAAI;CACjD,MAAM,QAAQ,KAAK,SAAS;CAC5B,MAAM,YAAY,KAAK,OAAO,aAAa;CAC3C,MAAM,qBAAqB,KAAK,OAAO,sBAAsB;CAC7D,MAAM,gBAAgB,KAAK,OAAO,iBAAiB;CAEnD,MAAM,EAAE,YAAY,iBAAiB,yBAAyB;CAE9D,MAAM,WAAW,kBAAkB,IAAI;CAEvC,IAAI,CAAC,KAAK,UACR,OAAO;CAST,MAAM,SAAS;EACb;EACA;EACA;EACA;EACA;EACA;EACA;EACA,KAAK;EACL,KAAK,SAAS;EACd,GAAG,KAAK,MAAM,QAAQ,SAAS,SAAS,CAAC,KAAK,IAAI,KAAK,IAAI,CAAC;CAC9D;CACA,MAAM,OAAO,WAAW;CACxB,IACE,QACA,eAAe,KAAK,QAAQ,MAAM,KAClC,eAAe,KAAK,KAAK,gBAAgB,KAAK,cAAc,KAC5D,KAAK,MAAM,QAAQ,OAChB,SAAS,CAAC,CAAC,KAAK,KAAK,UAAU,eAAe,KAAK,UAAU,KAAK,IAAI,CACzE,GAEA,OAAO,KAAK;CAGd,MAAM,QAAQ,KAAK,MAAM,QAAQ,KAAK,MAAM,UAC1C,oBAAC,MAAD;EAEE,MAAM,KAAK;EACX,IAAI,KAAK;EACH;EACI;EACV,QAAQ;EACR,YAAY,UAAU,eAAe,aAAa,KAAA;CACnD,GAPM,KAAK,EAOX,CACF;CAED,MAAM,gBAAgB,KACpBA,qBAAO,OACP,aAAa,EAAE,KAAK,kBAAkB,kBAAkBA,qBAAO,WAC/D,SAASA,qBAAO,KAClB;CAEA,MAAM,EACJ,mBAAmB,gBACnB,cAAc,WACd,GAAG,SACD,KAAK;CAET,MAAM,UACJ,oBAAC,SAAD;EAAS,eAAa;EAAoB,aAAW;EACnD,UAAA,oBAAC,mBAAD;GACE,WAAW;GACX,GAAI;GACJ,mBAAiB,YAAY,KAAA,IAAY;GACzC,cAAY;GACZ,QAAQ,QAAQ,SAAS;GACzB,cAAc,KAAK,SAAS;GAE3B,UAAA,MAAM,WAAW,KAAK,qBAAqB,oBAAC,eAAD,CAAgB,CAAA,IAAI;EAC/C,CAAA;CACZ,CAAA;CAEX,WAAW,UAAU;EAAE;EAAQ;EAAM;CAAQ;CAC7C,OAAO;AACT"}

package/dist/js/packages/components/src/components/List/components/Items/components/Item/Item.mjs

@@ -36,7 +36,7 @@ var ItemImpl = (props) => {
 		})
 	});
 };
-var Item = memo(ItemImpl, (prev, next) => prev.id === next.id && prev.data === next.data && prev.triggerRef === next.triggerRef && prev.isTile === next.isTile && prev.list.onAction === next.list.onAction && prev.list.accordion === next.list.accordion && !!prev.list.itemView?.rendersSameAs(next.list.itemView));
+var Item = memo(ItemImpl, (prev, next) => prev.id === next.id && prev.data === next.data && prev.triggerRef === next.triggerRef && prev.isTile === next.isTile && !!prev.onAction === !!next.onAction && prev.list.accordion === next.list.accordion && !!prev.list.itemView?.rendersSameFor(next.list.itemView, next.data));
 Item.displayName = "Item";
 var ItemContainer = (props) => {
 	const list = useList();

package/dist/js/packages/components/src/components/List/components/Items/components/Item/Item.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Item.mjs","names":["styles"],"sources":["../../../../../../../../../../../src/components/List/components/Items/components/Item/Item.tsx"],"sourcesContent":["import { useGridItemProps } from \"@/components/List/components/Items/components/Item/hooks/useGridItemProps\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport type ListModel from \"@/components/List/model/List\";\nimport ItemsGridListItemView from \"@/views/ItemsGridListItemView\";\nimport { mergeRefs } from \"@react-aria/utils\";\nimport type { FC, PropsWithChildren, Ref } from \"react\";\nimport { memo, Suspense } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport styles from \"./Item.module.scss\";\nimport { ItemLoadingView } from \"./components/ItemLoadingView/ItemLoadingView\";\n\ninterface Props extends PropsWithChildren {\n  id: Key;\n  data: never;\n  triggerRef?: Ref<HTMLDivElement>;\n  list: ListModel<never>;\n  isTile: boolean;\n}\n\nconst ItemImpl = (props: Props) => {\n  const { id, data, triggerRef, list, isTile } = props;\n\n  const itemView = list.itemView;\n\n  const { gridItemProps, children } = useGridItemProps(props, list);\n\n  if (!itemView) {\n    return null;\n  }\n\n  const textValue = itemView.textValue ? itemView.textValue(data) : undefined;\n  const href = itemView.href ? itemView.href(data) : undefined;\n  const hasAction = !!gridItemProps.onAction || !!href;\n\n  const existingRef = \"ref\" in gridItemProps ? gridItemProps.ref : undefined;\n  const gridItemPropsWithRef = triggerRef\n    ? { ...gridItemProps, ref: mergeRefs(existingRef, triggerRef) }\n    : gridItemProps;\n\n  return (\n    <ItemsGridListItemView\n      id={id}\n      textValue={textValue}\n      href={href}\n      target={itemView.target}\n      hasAction={hasAction}\n      isTile={isTile}\n      {...gridItemPropsWithRef}\n    >\n      <Suspense fallback={<ItemLoadingView />}>{children}</Suspense>\n    </ItemsGridListItemView>\n  );\n};\n\n// The list model is rebuilt on every render, so it cannot be compared by\n// identity — but everything an item renders from it can. Those closures come\n// from the consumer's own JSX and only change when the consumer re-renders,\n// so loading more still skips the re-render while parent state no longer\n// leaves an item frozen on the values it first saw.\nexport const Item = memo(\n  ItemImpl,\n  (prev, next) =>\n    prev.id === next.id &&\n    prev.data === next.data &&\n    prev.triggerRef === next.triggerRef &&\n    prev.isTile === next.isTile &&\n    prev.list.onAction === next.list.onAction &&\n    prev.list.accordion === next.list.accordion &&\n    !!prev.list.itemView?.rendersSameAs(next.list.itemView),\n);\nItem.displayName = \"Item\";\n\ninterface ItemContainerProps extends PropsWithChildren {\n  id?: Key;\n  data?: never;\n}\n\nexport const ItemContainer: FC<ItemContainerProps> = (props) => {\n  const list = useList();\n  return (\n    <ItemsGridListItemView\n      textValue=\"-\"\n      className={styles.item}\n      isTile={list.viewMode.isTiles}\n    >\n      {props.children}\n    </ItemsGridListItemView>\n  );\n};\n\nexport default Item;\n"],"mappings":";;;;;;;;;;;AAmBA,IAAM,YAAY,UAAiB;CACjC,MAAM,EAAE,IAAI,MAAM,YAAY,MAAM,WAAW;CAE/C,MAAM,WAAW,KAAK;CAEtB,MAAM,EAAE,eAAe,aAAa,iBAAiB,OAAO,IAAI;CAEhE,IAAI,CAAC,UACH,OAAO;CAGT,MAAM,YAAY,SAAS,YAAY,SAAS,UAAU,IAAI,IAAI,KAAA;CAClE,MAAM,OAAO,SAAS,OAAO,SAAS,KAAK,IAAI,IAAI,KAAA;CACnD,MAAM,YAAY,CAAC,CAAC,cAAc,YAAY,CAAC,CAAC;CAEhD,MAAM,cAAc,SAAS,gBAAgB,cAAc,MAAM,KAAA;CACjE,MAAM,uBAAuB,aACzB;EAAE,GAAG;EAAe,KAAK,UAAU,aAAa,UAAU;CAAE,IAC5D;CAEJ,OACE,oBAAC,uBAAD;EACM;EACO;EACL;EACN,QAAQ,SAAS;EACN;EACH;EACR,GAAI;EAEJ,UAAA,oBAAC,UAAD;GAAU,UAAU,oBAAC,iBAAD,CAAkB,CAAA;GAAI;EAAmB,CAAA;CACxC,CAAA;AAE3B;AAOA,IAAa,OAAO,KAClB,WACC,MAAM,SACL,KAAK,OAAO,KAAK,MACjB,KAAK,SAAS,KAAK,QACnB,KAAK,eAAe,KAAK,cACzB,KAAK,WAAW,KAAK,UACrB,KAAK,KAAK,aAAa,KAAK,KAAK,YACjC,KAAK,KAAK,cAAc,KAAK,KAAK,aAClC,CAAC,CAAC,KAAK,KAAK,UAAU,cAAc,KAAK,KAAK,QAAQ,CAC1D;AACA,KAAK,cAAc;AAOnB,IAAa,iBAAyC,UAAU;CAC9D,MAAM,OAAO,QAAQ;CACrB,OACE,oBAAC,uBAAD;EACE,WAAU;EACV,WAAWA,oBAAO;EAClB,QAAQ,KAAK,SAAS;EAErB,UAAA,MAAM;CACc,CAAA;AAE3B"}
+{"version":3,"file":"Item.mjs","names":["styles"],"sources":["../../../../../../../../../../../src/components/List/components/Items/components/Item/Item.tsx"],"sourcesContent":["import { useGridItemProps } from \"@/components/List/components/Items/components/Item/hooks/useGridItemProps\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport type ListModel from \"@/components/List/model/List\";\nimport ItemsGridListItemView from \"@/views/ItemsGridListItemView\";\nimport { mergeRefs } from \"@react-aria/utils\";\nimport type { FC, PropsWithChildren, Ref } from \"react\";\nimport { memo, Suspense } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport styles from \"./Item.module.scss\";\nimport { ItemLoadingView } from \"./components/ItemLoadingView/ItemLoadingView\";\n\ninterface Props extends PropsWithChildren {\n  id: Key;\n  data: never;\n  triggerRef?: Ref<HTMLDivElement>;\n  list: ListModel<never>;\n  isTile: boolean;\n  /** Stable invoker of the list's latest `onAction` */\n  onAction?: (data: never) => void;\n}\n\nconst ItemImpl = (props: Props) => {\n  const { id, data, triggerRef, list, isTile } = props;\n\n  const itemView = list.itemView;\n\n  const { gridItemProps, children } = useGridItemProps(props, list);\n\n  if (!itemView) {\n    return null;\n  }\n\n  const textValue = itemView.textValue ? itemView.textValue(data) : undefined;\n  const href = itemView.href ? itemView.href(data) : undefined;\n  const hasAction = !!gridItemProps.onAction || !!href;\n\n  const existingRef = \"ref\" in gridItemProps ? gridItemProps.ref : undefined;\n  const gridItemPropsWithRef = triggerRef\n    ? { ...gridItemProps, ref: mergeRefs(existingRef, triggerRef) }\n    : gridItemProps;\n\n  return (\n    <ItemsGridListItemView\n      id={id}\n      textValue={textValue}\n      href={href}\n      target={itemView.target}\n      hasAction={hasAction}\n      isTile={isTile}\n      {...gridItemPropsWithRef}\n    >\n      <Suspense fallback={<ItemLoadingView />}>{children}</Suspense>\n    </ItemsGridListItemView>\n  );\n};\n\n// The list model is rebuilt on every render, so it cannot be compared by\n// identity — but everything an item renders from it can. The render function\n// counts by its `renderDependencies`, or else by its identity: an inline one\n// changes whenever the consumer re-renders, so parent state no longer leaves\n// an item frozen on the values it first saw (#3065), while loading more still\n// skips the re-render. `onAction` arrives as a stable invoker of the latest\n// handler, and `textValue`/`href` count by their result.\nexport const Item = memo(\n  ItemImpl,\n  (prev, next) =>\n    prev.id === next.id &&\n    prev.data === next.data &&\n    prev.triggerRef === next.triggerRef &&\n    prev.isTile === next.isTile &&\n    !!prev.onAction === !!next.onAction &&\n    prev.list.accordion === next.list.accordion &&\n    !!prev.list.itemView?.rendersSameFor(next.list.itemView, next.data),\n);\nItem.displayName = \"Item\";\n\ninterface ItemContainerProps extends PropsWithChildren {\n  id?: Key;\n  data?: never;\n}\n\nexport const ItemContainer: FC<ItemContainerProps> = (props) => {\n  const list = useList();\n  return (\n    <ItemsGridListItemView\n      textValue=\"-\"\n      className={styles.item}\n      isTile={list.viewMode.isTiles}\n    >\n      {props.children}\n    </ItemsGridListItemView>\n  );\n};\n\nexport default Item;\n"],"mappings":";;;;;;;;;;;AAqBA,IAAM,YAAY,UAAiB;CACjC,MAAM,EAAE,IAAI,MAAM,YAAY,MAAM,WAAW;CAE/C,MAAM,WAAW,KAAK;CAEtB,MAAM,EAAE,eAAe,aAAa,iBAAiB,OAAO,IAAI;CAEhE,IAAI,CAAC,UACH,OAAO;CAGT,MAAM,YAAY,SAAS,YAAY,SAAS,UAAU,IAAI,IAAI,KAAA;CAClE,MAAM,OAAO,SAAS,OAAO,SAAS,KAAK,IAAI,IAAI,KAAA;CACnD,MAAM,YAAY,CAAC,CAAC,cAAc,YAAY,CAAC,CAAC;CAEhD,MAAM,cAAc,SAAS,gBAAgB,cAAc,MAAM,KAAA;CACjE,MAAM,uBAAuB,aACzB;EAAE,GAAG;EAAe,KAAK,UAAU,aAAa,UAAU;CAAE,IAC5D;CAEJ,OACE,oBAAC,uBAAD;EACM;EACO;EACL;EACN,QAAQ,SAAS;EACN;EACH;EACR,GAAI;EAEJ,UAAA,oBAAC,UAAD;GAAU,UAAU,oBAAC,iBAAD,CAAkB,CAAA;GAAI;EAAmB,CAAA;CACxC,CAAA;AAE3B;AASA,IAAa,OAAO,KAClB,WACC,MAAM,SACL,KAAK,OAAO,KAAK,MACjB,KAAK,SAAS,KAAK,QACnB,KAAK,eAAe,KAAK,cACzB,KAAK,WAAW,KAAK,UACrB,CAAC,CAAC,KAAK,aAAa,CAAC,CAAC,KAAK,YAC3B,KAAK,KAAK,cAAc,KAAK,KAAK,aAClC,CAAC,CAAC,KAAK,KAAK,UAAU,eAAe,KAAK,KAAK,UAAU,KAAK,IAAI,CACtE;AACA,KAAK,cAAc;AAOnB,IAAa,iBAAyC,UAAU;CAC9D,MAAM,OAAO,QAAQ;CACrB,OACE,oBAAC,uBAAD;EACE,WAAU;EACV,WAAWA,oBAAO;EAClB,QAAQ,KAAK,SAAS;EAErB,UAAA,MAAM;CACc,CAAA;AAE3B"}

package/dist/js/packages/components/src/components/List/components/Items/components/Item/hooks/useGridItemProps.mjs

@@ -7,9 +7,8 @@ import { useEffect, useId, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/List/components/Items/components/Item/hooks/useGridItemProps.tsx
 var useGridItemProps = (props, list) => {
-	const { data, children: childrenFromProps } = props;
+	const { data, onAction, children: childrenFromProps } = props;
 	const itemView = list.itemView;
-	const onAction = list.onAction;
 	const [isExpanded, setIsExpanded] = useState(itemView?.defaultExpanded?.(data) ?? false);
 	const contentElementId = useId();
 	const itemRef = useRef(null);

package/dist/js/packages/components/src/components/List/components/Items/components/Item/hooks/useGridItemProps.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useGridItemProps.mjs","names":[],"sources":["../../../../../../../../../../../../src/components/List/components/Items/components/Item/hooks/useGridItemProps.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport { useEffect, useId, useRef, useState } from \"react\";\nimport type List from \"@/components/List/model/List\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport { AccordionButton } from \"@/components/List/components/Items/components/Item/components/AccordionButton\";\n\ninterface P extends PropsWithChildren {\n  data: never;\n}\n\nexport const useGridItemProps = (props: P, list: List<never>) => {\n  const { data, children: childrenFromProps } = props;\n  const itemView = list.itemView;\n  const onAction = list.onAction;\n\n  const [isExpanded, setIsExpanded] = useState(\n    itemView?.defaultExpanded?.(data) ?? false,\n  );\n  const contentElementId = useId();\n  const itemRef = useRef<HTMLDivElement>(null);\n\n  const accordion = list.accordion;\n  const children = childrenFromProps ?? itemView?.render(data);\n\n  useEffect(() => {\n    if (accordion) {\n      itemRef.current?.setAttribute(\"aria-expanded\", String(isExpanded));\n      itemRef.current?.setAttribute(\"aria-controls\", contentElementId);\n    }\n  }, [isExpanded, contentElementId, itemRef.current, accordion]);\n\n  if (!accordion) {\n    return {\n      gridItemProps: {\n        onAction: onAction\n          ? () => {\n              onAction?.(data);\n            }\n          : undefined,\n      },\n      children,\n    };\n  }\n\n  const toggleAccordion = () => {\n    setIsExpanded((current) => !current);\n    onAction?.(data);\n  };\n\n  const propsContext: PropsContext = {\n    Content: {\n      id: dynamic((p) => (p.slot === \"bottom\" ? contentElementId : undefined)),\n      wrapWith: dynamic((p) =>\n        p.slot === \"bottom\" ? (\n          <AccordionButton\n            contentElementId={contentElementId}\n            toggle={toggleAccordion}\n            isExpanded={isExpanded}\n          />\n        ) : undefined,\n      ),\n    },\n  };\n\n  return {\n    gridItemProps: {\n      ref: itemRef,\n      onAction: toggleAccordion,\n    },\n    children: (\n      <PropsContextProvider\n        props={propsContext}\n        dependencies={[contentElementId, isExpanded]}\n      >\n        {children}\n      </PropsContextProvider>\n    ),\n  };\n};\n"],"mappings":";;;;;;;;AAWA,IAAa,oBAAoB,OAAU,SAAsB;CAC/D,MAAM,EAAE,MAAM,UAAU,sBAAsB;CAC9C,MAAM,WAAW,KAAK;CACtB,MAAM,WAAW,KAAK;CAEtB,MAAM,CAAC,YAAY,iBAAiB,SAClC,UAAU,kBAAkB,IAAI,KAAK,KACvC;CACA,MAAM,mBAAmB,MAAM;CAC/B,MAAM,UAAU,OAAuB,IAAI;CAE3C,MAAM,YAAY,KAAK;CACvB,MAAM,WAAW,qBAAqB,UAAU,OAAO,IAAI;CAE3D,gBAAgB;EACd,IAAI,WAAW;GACb,QAAQ,SAAS,aAAa,iBAAiB,OAAO,UAAU,CAAC;GACjE,QAAQ,SAAS,aAAa,iBAAiB,gBAAgB;EACjE;CACF,GAAG;EAAC;EAAY;EAAkB,QAAQ;EAAS;CAAS,CAAC;CAE7D,IAAI,CAAC,WACH,OAAO;EACL,eAAe,EACb,UAAU,iBACA;GACJ,WAAW,IAAI;EACjB,IACA,KAAA,EACN;EACA;CACF;CAGF,MAAM,wBAAwB;EAC5B,eAAe,YAAY,CAAC,OAAO;EACnC,WAAW,IAAI;CACjB;CAEA,MAAM,eAA6B,EACjC,SAAS;EACP,IAAI,SAAS,MAAO,EAAE,SAAS,WAAW,mBAAmB,KAAA,CAAU;EACvE,UAAU,SAAS,MACjB,EAAE,SAAS,WACT,oBAAC,iBAAD;GACoB;GAClB,QAAQ;GACI;EACb,CAAA,IACC,KAAA,CACN;CACF,EACF;CAEA,OAAO;EACL,eAAe;GACb,KAAK;GACL,UAAU;EACZ;EACA,UACE,oBAAC,sBAAD;GACE,OAAO;GACP,cAAc,CAAC,kBAAkB,UAAU;GAE1C;EACmB,CAAA;CAE1B;AACF"}
+{"version":3,"file":"useGridItemProps.mjs","names":[],"sources":["../../../../../../../../../../../../src/components/List/components/Items/components/Item/hooks/useGridItemProps.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport { useEffect, useId, useRef, useState } from \"react\";\nimport type List from \"@/components/List/model/List\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport { AccordionButton } from \"@/components/List/components/Items/components/Item/components/AccordionButton\";\n\ninterface P extends PropsWithChildren {\n  data: never;\n  onAction?: (data: never) => void;\n}\n\nexport const useGridItemProps = (props: P, list: List<never>) => {\n  const { data, onAction, children: childrenFromProps } = props;\n  const itemView = list.itemView;\n\n  const [isExpanded, setIsExpanded] = useState(\n    itemView?.defaultExpanded?.(data) ?? false,\n  );\n  const contentElementId = useId();\n  const itemRef = useRef<HTMLDivElement>(null);\n\n  const accordion = list.accordion;\n  const children = childrenFromProps ?? itemView?.render(data);\n\n  useEffect(() => {\n    if (accordion) {\n      itemRef.current?.setAttribute(\"aria-expanded\", String(isExpanded));\n      itemRef.current?.setAttribute(\"aria-controls\", contentElementId);\n    }\n  }, [isExpanded, contentElementId, itemRef.current, accordion]);\n\n  if (!accordion) {\n    return {\n      gridItemProps: {\n        onAction: onAction\n          ? () => {\n              onAction?.(data);\n            }\n          : undefined,\n      },\n      children,\n    };\n  }\n\n  const toggleAccordion = () => {\n    setIsExpanded((current) => !current);\n    onAction?.(data);\n  };\n\n  const propsContext: PropsContext = {\n    Content: {\n      id: dynamic((p) => (p.slot === \"bottom\" ? contentElementId : undefined)),\n      wrapWith: dynamic((p) =>\n        p.slot === \"bottom\" ? (\n          <AccordionButton\n            contentElementId={contentElementId}\n            toggle={toggleAccordion}\n            isExpanded={isExpanded}\n          />\n        ) : undefined,\n      ),\n    },\n  };\n\n  return {\n    gridItemProps: {\n      ref: itemRef,\n      onAction: toggleAccordion,\n    },\n    children: (\n      <PropsContextProvider\n        props={propsContext}\n        dependencies={[contentElementId, isExpanded]}\n      >\n        {children}\n      </PropsContextProvider>\n    ),\n  };\n};\n"],"mappings":";;;;;;;;AAYA,IAAa,oBAAoB,OAAU,SAAsB;CAC/D,MAAM,EAAE,MAAM,UAAU,UAAU,sBAAsB;CACxD,MAAM,WAAW,KAAK;CAEtB,MAAM,CAAC,YAAY,iBAAiB,SAClC,UAAU,kBAAkB,IAAI,KAAK,KACvC;CACA,MAAM,mBAAmB,MAAM;CAC/B,MAAM,UAAU,OAAuB,IAAI;CAE3C,MAAM,YAAY,KAAK;CACvB,MAAM,WAAW,qBAAqB,UAAU,OAAO,IAAI;CAE3D,gBAAgB;EACd,IAAI,WAAW;GACb,QAAQ,SAAS,aAAa,iBAAiB,OAAO,UAAU,CAAC;GACjE,QAAQ,SAAS,aAAa,iBAAiB,gBAAgB;EACjE;CACF,GAAG;EAAC;EAAY;EAAkB,QAAQ;EAAS;CAAS,CAAC;CAE7D,IAAI,CAAC,WACH,OAAO;EACL,eAAe,EACb,UAAU,iBACA;GACJ,WAAW,IAAI;EACjB,IACA,KAAA,EACN;EACA;CACF;CAGF,MAAM,wBAAwB;EAC5B,eAAe,YAAY,CAAC,OAAO;EACnC,WAAW,IAAI;CACjB;CAEA,MAAM,eAA6B,EACjC,SAAS;EACP,IAAI,SAAS,MAAO,EAAE,SAAS,WAAW,mBAAmB,KAAA,CAAU;EACvE,UAAU,SAAS,MACjB,EAAE,SAAS,WACT,oBAAC,iBAAD;GACoB;GAClB,QAAQ;GACI;EACb,CAAA,IACC,KAAA,CACN;CACF,EACF;CAEA,OAAO;EACL,eAAe;GACb,KAAK;GACL,UAAU;EACZ;EACA,UACE,oBAAC,sBAAD;GACE,OAAO;GACP,cAAc,CAAC,kBAAkB,UAAU;GAE1C;EACmB,CAAA;CAE1B;AACF"}

package/dist/js/packages/components/src/components/List/components/Items/views/GridList/GridList.mjs

@@ -1,13 +1,16 @@
 "use client"
 /* */
+import { useLabelledBySectionHeading } from "../../../../../Section/context.mjs";
 import { jsx } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
 //#region src/components/List/components/Items/views/GridList/GridList.tsx
 /** @flr-generate all */
 var GridList = (props) => {
 	const { tileMaxWidth, emptyView, ...rest } = props;
+	const ariaLabelledBy = useLabelledBySectionHeading(rest);
 	return /* @__PURE__ */ jsx(Aria.GridList, {
 		...rest,
+		"aria-labelledby": ariaLabelledBy,
 		renderEmptyState: () => emptyView,
 		style: { gridTemplateColumns: `repeat(auto-fill, minmax(${tileMaxWidth}px, 1fr))` }
 	});

package/dist/js/packages/components/src/components/List/components/Items/views/GridList/GridList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"GridList.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Items/views/GridList/GridList.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { FC, ReactNode } from \"react\";\n\nexport type GridListProps = Aria.GridListProps<never> & {\n  tileMaxWidth: number;\n  emptyView?: ReactNode;\n};\n\n/** @flr-generate all */\nexport const GridList: FC<GridListProps> = (props) => {\n  const { tileMaxWidth, emptyView, ...rest } = props;\n\n  return (\n    <Aria.GridList\n      {...rest}\n      renderEmptyState={() => emptyView}\n      style={{\n        gridTemplateColumns: `repeat(auto-fill, minmax(${tileMaxWidth}px, 1fr))`,\n      }}\n    />\n  );\n};\n\nexport default GridList;\n"],"mappings":";;;;;;AASA,IAAa,YAA+B,UAAU;CACpD,MAAM,EAAE,cAAc,WAAW,GAAG,SAAS;CAE7C,OACE,oBAAC,KAAK,UAAN;EACE,GAAI;EACJ,wBAAwB;EACxB,OAAO,EACL,qBAAqB,4BAA4B,aAAa,WAChE;CACD,CAAA;AAEL"}
+{"version":3,"file":"GridList.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Items/views/GridList/GridList.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { FC, ReactNode } from \"react\";\nimport { useLabelledBySectionHeading } from \"@/components/Section/context\";\n\nexport type GridListProps = Aria.GridListProps<never> & {\n  tileMaxWidth: number;\n  emptyView?: ReactNode;\n};\n\n/** @flr-generate all */\nexport const GridList: FC<GridListProps> = (props) => {\n  const { tileMaxWidth, emptyView, ...rest } = props;\n  const ariaLabelledBy = useLabelledBySectionHeading(rest);\n\n  return (\n    <Aria.GridList\n      {...rest}\n      aria-labelledby={ariaLabelledBy}\n      renderEmptyState={() => emptyView}\n      style={{\n        gridTemplateColumns: `repeat(auto-fill, minmax(${tileMaxWidth}px, 1fr))`,\n      }}\n    />\n  );\n};\n\nexport default GridList;\n"],"mappings":";;;;;;;AAUA,IAAa,YAA+B,UAAU;CACpD,MAAM,EAAE,cAAc,WAAW,GAAG,SAAS;CAC7C,MAAM,iBAAiB,4BAA4B,IAAI;CAEvD,OACE,oBAAC,KAAK,UAAN;EACE,GAAI;EACJ,mBAAiB;EACjB,wBAAwB;EACxB,OAAO,EACL,qBAAqB,4BAA4B,aAAa,WAChE;CACD,CAAA;AAEL"}

package/dist/js/packages/components/src/components/List/components/ListItemView/ListItemView.mjs

@@ -8,54 +8,56 @@ import { UiComponentTunnelExit } from "../../../UiComponentTunnel/UiComponentTun
 import { OptionsButton } from "../Items/components/Item/components/OptionsButton/OptionsButton.mjs";
 import ListItemView_module_default from "./ListItemView.module.mjs";
 import ListItemViewContentView from "../../../../views/ListItemViewContentView.mjs";
-import { useList } from "../../hooks/useList.mjs";
+import { useListSelector } from "../../hooks/useListSelector.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/List/components/ListItemView/ListItemView.tsx
+var buttonTunnel = {
+	id: "button",
+	component: "ListItemView"
+};
+var buildPropsContext = (buttonSize) => ({
+	...overlayTriggersTunneledTo(buttonTunnel),
+	ContextMenu: {
+		tunnel: buttonTunnel,
+		placement: "bottom right",
+		wrapWith: /* @__PURE__ */ jsx(OptionsButton, { className: ListItemView_module_default.action })
+	},
+	Button: {
+		tunnel: buttonTunnel,
+		size: buttonSize
+	},
+	ActionGroup: {
+		tunnel: buttonTunnel,
+		Button: { tunnel: null }
+	},
+	Avatar: { tunnel: {
+		id: "avatar",
+		component: "ListItemView"
+	} },
+	Heading: { tunnel: {
+		id: "title",
+		component: "ListItemView"
+	} },
+	Text: { tunnel: {
+		id: "text",
+		component: "ListItemView"
+	} },
+	Content: { tunnel: dynamic((p) => p.slot === "bottom" ? {
+		id: "bottom",
+		component: "ListItemView"
+	} : void 0) },
+	Checkbox: { tunnel: {
+		id: "checkbox",
+		component: "ListItemView"
+	} }
+});
+var listPropsContext = buildPropsContext("m");
+var tilesPropsContext = buildPropsContext("s");
 var ListItemView = flowComponent("ListItemView", (props) => {
 	const { children, s, m, l } = props;
-	const list = useList();
-	const buttonTunnel = {
-		id: "button",
-		component: "ListItemView"
-	};
-	const propsContext = {
-		...overlayTriggersTunneledTo(buttonTunnel),
-		ContextMenu: {
-			tunnel: buttonTunnel,
-			placement: "bottom right",
-			wrapWith: /* @__PURE__ */ jsx(OptionsButton, { className: ListItemView_module_default.action })
-		},
-		Button: {
-			tunnel: buttonTunnel,
-			size: dynamic(() => useList().viewMode.isTiles ? "s" : "m")
-		},
-		ActionGroup: {
-			tunnel: buttonTunnel,
-			Button: { tunnel: null }
-		},
-		Avatar: { tunnel: {
-			id: "avatar",
-			component: "ListItemView"
-		} },
-		Heading: { tunnel: {
-			id: "title",
-			component: "ListItemView"
-		} },
-		Text: { tunnel: {
-			id: "text",
-			component: "ListItemView"
-		} },
-		Content: { tunnel: dynamic((p) => p.slot === "bottom" ? {
-			id: "bottom",
-			component: "ListItemView"
-		} : void 0) },
-		Checkbox: { tunnel: {
-			id: "checkbox",
-			component: "ListItemView"
-		} }
-	};
+	const viewMode = useListSelector((list) => list.viewMode.value);
 	return /* @__PURE__ */ jsx(ListItemViewContentView, {
-		viewMode: list.viewMode.value,
+		viewMode,
 		title: /* @__PURE__ */ jsx(UiComponentTunnelExit, {
 			id: "title",
 			component: "ListItemView"
@@ -84,7 +86,7 @@ var ListItemView = flowComponent("ListItemView", (props) => {
 		m,
 		l,
 		children: /* @__PURE__ */ jsx(PropsContextProvider, {
-			props: propsContext,
+			props: viewMode === "tiles" ? tilesPropsContext : listPropsContext,
 			children
 		})
 	});

package/dist/js/packages/components/src/components/List/components/ListItemView/ListItemView.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemView.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/List/components/ListItemView/ListItemView.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./ListItemView.module.scss\";\nimport ListItemViewContentView from \"@/views/ListItemViewContentView\";\nimport {\n  dynamic,\n  overlayTriggersTunneledTo,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { OptionsButton } from \"@/components/List/components/Items/components/Item/components/OptionsButton\";\nimport { useList } from \"@/components/List\";\nimport type { ColumnLayoutProps } from \"@/components/ColumnLayout\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport type ListItemViewProps = PropsWithChildren &\n  Pick<ColumnLayoutProps, \"s\" | \"m\" | \"l\">;\n\nexport const ListItemView = flowComponent(\n  \"ListItemView\",\n  (props: ListItemViewProps) => {\n    const { children, s, m, l } = props;\n    const list = useList();\n\n    const buttonTunnel = {\n      id: \"button\",\n      component: \"ListItemView\",\n    } as const;\n\n    const propsContext: PropsContext = {\n      ...overlayTriggersTunneledTo(buttonTunnel),\n      ContextMenu: {\n        tunnel: buttonTunnel,\n        placement: \"bottom right\",\n        wrapWith: <OptionsButton className={styles.action} />,\n      },\n      Button: {\n        tunnel: buttonTunnel,\n        size: dynamic(() => (useList().viewMode.isTiles ? \"s\" : \"m\")),\n      },\n      ActionGroup: {\n        tunnel: buttonTunnel,\n        Button: {\n          tunnel: null,\n        },\n      },\n      Avatar: {\n        tunnel: {\n          id: \"avatar\",\n          component: \"ListItemView\",\n        },\n      },\n      Heading: {\n        tunnel: {\n          id: \"title\",\n          component: \"ListItemView\",\n        },\n      },\n      Text: {\n        tunnel: {\n          id: \"text\",\n          component: \"ListItemView\",\n        },\n      },\n      Content: {\n        tunnel: dynamic((p) =>\n          p.slot === \"bottom\"\n            ? {\n                id: \"bottom\",\n                component: \"ListItemView\",\n              }\n            : undefined,\n        ),\n      },\n      Checkbox: {\n        tunnel: {\n          id: \"checkbox\",\n          component: \"ListItemView\",\n        },\n      },\n    };\n\n    return (\n      <ListItemViewContentView\n        viewMode={list.viewMode.value}\n        title={<UiComponentTunnelExit id=\"title\" component=\"ListItemView\" />}\n        avatar={<UiComponentTunnelExit id=\"avatar\" component=\"ListItemView\" />}\n        button={<UiComponentTunnelExit id=\"button\" component=\"ListItemView\" />}\n        subTitle={<UiComponentTunnelExit id=\"text\" component=\"ListItemView\" />}\n        bottom={<UiComponentTunnelExit id=\"bottom\" component=\"ListItemView\" />}\n        checkbox={\n          <UiComponentTunnelExit id=\"checkbox\" component=\"ListItemView\" />\n        }\n        s={s}\n        m={m}\n        l={l}\n      >\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </ListItemViewContentView>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default ListItemView;\n"],"mappings":";;;;;;;;;;;;;AAkBA,IAAa,eAAe,cAC1B,iBACC,UAA6B;CAC5B,MAAM,EAAE,UAAU,GAAG,GAAG,MAAM;CAC9B,MAAM,OAAO,QAAQ;CAErB,MAAM,eAAe;EACnB,IAAI;EACJ,WAAW;CACb;CAEA,MAAM,eAA6B;EACjC,GAAG,0BAA0B,YAAY;EACzC,aAAa;GACX,QAAQ;GACR,WAAW;GACX,UAAU,oBAAC,eAAD,EAAe,WAAWA,4BAAO,OAAS,CAAA;EACtD;EACA,QAAQ;GACN,QAAQ;GACR,MAAM,cAAe,QAAQ,CAAC,CAAC,SAAS,UAAU,MAAM,GAAI;EAC9D;EACA,aAAa;GACX,QAAQ;GACR,QAAQ,EACN,QAAQ,KACV;EACF;EACA,QAAQ,EACN,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,SAAS,EACP,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,MAAM,EACJ,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,SAAS,EACP,QAAQ,SAAS,MACf,EAAE,SAAS,WACP;GACE,IAAI;GACJ,WAAW;EACb,IACA,KAAA,CACN,EACF;EACA,UAAU,EACR,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;CACF;CAEA,OACE,oBAAC,yBAAD;EACE,UAAU,KAAK,SAAS;EACxB,OAAO,oBAAC,uBAAD;GAAuB,IAAG;GAAQ,WAAU;EAAgB,CAAA;EACnE,QAAQ,oBAAC,uBAAD;GAAuB,IAAG;GAAS,WAAU;EAAgB,CAAA;EACrE,QAAQ,oBAAC,uBAAD;GAAuB,IAAG;GAAS,WAAU;EAAgB,CAAA;EACrE,UAAU,oBAAC,uBAAD;GAAuB,IAAG;GAAO,WAAU;EAAgB,CAAA;EACrE,QAAQ,oBAAC,uBAAD;GAAuB,IAAG;GAAS,WAAU;EAAgB,CAAA;EACrE,UACE,oBAAC,uBAAD;GAAuB,IAAG;GAAW,WAAU;EAAgB,CAAA;EAE9D;EACA;EACA;EAEH,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA;CACC,CAAA;AAE7B,GACA,EACE,MAAM,SACR,CACF"}
+{"version":3,"file":"ListItemView.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/List/components/ListItemView/ListItemView.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./ListItemView.module.scss\";\nimport ListItemViewContentView from \"@/views/ListItemViewContentView\";\nimport {\n  dynamic,\n  overlayTriggersTunneledTo,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { OptionsButton } from \"@/components/List/components/Items/components/Item/components/OptionsButton\";\nimport { useListSelector } from \"@/components/List/hooks/useListSelector\";\nimport type { ColumnLayoutProps } from \"@/components/ColumnLayout\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\n/*\n * Built once per view mode: a new object on every render would hand every item\n * a new props context and re-render its content.\n */\nconst buttonTunnel = {\n  id: \"button\",\n  component: \"ListItemView\",\n} as const;\n\nconst buildPropsContext = (buttonSize: \"s\" | \"m\"): PropsContext => ({\n  ...overlayTriggersTunneledTo(buttonTunnel),\n  ContextMenu: {\n    tunnel: buttonTunnel,\n    placement: \"bottom right\",\n    wrapWith: <OptionsButton className={styles.action} />,\n  },\n  Button: {\n    tunnel: buttonTunnel,\n    size: buttonSize,\n  },\n  ActionGroup: {\n    tunnel: buttonTunnel,\n    Button: {\n      tunnel: null,\n    },\n  },\n  Avatar: {\n    tunnel: {\n      id: \"avatar\",\n      component: \"ListItemView\",\n    },\n  },\n  Heading: {\n    tunnel: {\n      id: \"title\",\n      component: \"ListItemView\",\n    },\n  },\n  Text: {\n    tunnel: {\n      id: \"text\",\n      component: \"ListItemView\",\n    },\n  },\n  Content: {\n    tunnel: dynamic((p) =>\n      p.slot === \"bottom\"\n        ? {\n            id: \"bottom\",\n            component: \"ListItemView\",\n          }\n        : undefined,\n    ),\n  },\n  Checkbox: {\n    tunnel: {\n      id: \"checkbox\",\n      component: \"ListItemView\",\n    },\n  },\n});\n\nconst listPropsContext = buildPropsContext(\"m\");\nconst tilesPropsContext = buildPropsContext(\"s\");\n\nexport type ListItemViewProps = PropsWithChildren &\n  Pick<ColumnLayoutProps, \"s\" | \"m\" | \"l\">;\n\nexport const ListItemView = flowComponent(\n  \"ListItemView\",\n  (props: ListItemViewProps) => {\n    const { children, s, m, l } = props;\n    const viewMode = useListSelector((list) => list.viewMode.value);\n    const propsContext =\n      viewMode === \"tiles\" ? tilesPropsContext : listPropsContext;\n\n    return (\n      <ListItemViewContentView\n        viewMode={viewMode}\n        title={<UiComponentTunnelExit id=\"title\" component=\"ListItemView\" />}\n        avatar={<UiComponentTunnelExit id=\"avatar\" component=\"ListItemView\" />}\n        button={<UiComponentTunnelExit id=\"button\" component=\"ListItemView\" />}\n        subTitle={<UiComponentTunnelExit id=\"text\" component=\"ListItemView\" />}\n        bottom={<UiComponentTunnelExit id=\"bottom\" component=\"ListItemView\" />}\n        checkbox={\n          <UiComponentTunnelExit id=\"checkbox\" component=\"ListItemView\" />\n        }\n        s={s}\n        m={m}\n        l={l}\n      >\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </ListItemViewContentView>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default ListItemView;\n"],"mappings":";;;;;;;;;;;;;AAmBA,IAAM,eAAe;CACnB,IAAI;CACJ,WAAW;AACb;AAEA,IAAM,qBAAqB,gBAAyC;CAClE,GAAG,0BAA0B,YAAY;CACzC,aAAa;EACX,QAAQ;EACR,WAAW;EACX,UAAU,oBAAC,eAAD,EAAe,WAAWA,4BAAO,OAAS,CAAA;CACtD;CACA,QAAQ;EACN,QAAQ;EACR,MAAM;CACR;CACA,aAAa;EACX,QAAQ;EACR,QAAQ,EACN,QAAQ,KACV;CACF;CACA,QAAQ,EACN,QAAQ;EACN,IAAI;EACJ,WAAW;CACb,EACF;CACA,SAAS,EACP,QAAQ;EACN,IAAI;EACJ,WAAW;CACb,EACF;CACA,MAAM,EACJ,QAAQ;EACN,IAAI;EACJ,WAAW;CACb,EACF;CACA,SAAS,EACP,QAAQ,SAAS,MACf,EAAE,SAAS,WACP;EACE,IAAI;EACJ,WAAW;CACb,IACA,KAAA,CACN,EACF;CACA,UAAU,EACR,QAAQ;EACN,IAAI;EACJ,WAAW;CACb,EACF;AACF;AAEA,IAAM,mBAAmB,kBAAkB,GAAG;AAC9C,IAAM,oBAAoB,kBAAkB,GAAG;AAK/C,IAAa,eAAe,cAC1B,iBACC,UAA6B;CAC5B,MAAM,EAAE,UAAU,GAAG,GAAG,MAAM;CAC9B,MAAM,WAAW,iBAAiB,SAAS,KAAK,SAAS,KAAK;CAI9D,OACE,oBAAC,yBAAD;EACY;EACV,OAAO,oBAAC,uBAAD;GAAuB,IAAG;GAAQ,WAAU;EAAgB,CAAA;EACnE,QAAQ,oBAAC,uBAAD;GAAuB,IAAG;GAAS,WAAU;EAAgB,CAAA;EACrE,QAAQ,oBAAC,uBAAD;GAAuB,IAAG;GAAS,WAAU;EAAgB,CAAA;EACrE,UAAU,oBAAC,uBAAD;GAAuB,IAAG;GAAO,WAAU;EAAgB,CAAA;EACrE,QAAQ,oBAAC,uBAAD;GAAuB,IAAG;GAAS,WAAU;EAAgB,CAAA;EACrE,UACE,oBAAC,uBAAD;GAAuB,IAAG;GAAW,WAAU;EAAgB,CAAA;EAE9D;EACA;EACA;EAEH,UAAA,oBAAC,sBAAD;GAAsB,OAjBxB,aAAa,UAAU,oBAAoB;GAkBtC;EACmB,CAAA;CACC,CAAA;AAE7B,GACA,EACE,MAAM,SACR,CACF"}