@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/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/Header/components/SearchField/SearchField.module.mjs

@@ -1,9 +1,8 @@
 "use client"
 /* */
-//#region src/components/List/components/Header/components/SearchField/SearchField.module.scss
+// src/components/List/components/Header/components/SearchField/SearchField.module.scss
 var searchField = "flow--list--header--search-field";
 var SearchField_module_default = { searchField };
-//#endregion
 export { SearchField_module_default as default, searchField };
 
 //# sourceMappingURL=SearchField.module.mjs.map

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

@@ -13,7 +13,7 @@ import { useList } from "../../../../hooks/useList.mjs";
 import Header_module_default from "../../Header.module.mjs";
 import { SortingMenuItem } from "./SortingMenuItem.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/List/components/Header/components/SortingContextMenu/SortingContextMenu.tsx
+// src/components/List/components/Header/components/SortingContextMenu/SortingContextMenu.tsx
 var SortingContextMenu = (props) => {
 	const { isDisabled } = props;
 	const list = useList();
@@ -35,7 +35,6 @@ var SortingContextMenu = (props) => {
 		children: sortingItems
 	})] });
 };
-//#endregion
 export { SortingContextMenu };
 
 //# sourceMappingURL=SortingContextMenu.mjs.map

package/dist/js/packages/components/src/components/List/components/Header/components/SortingContextMenu/SortingMenuItem.mjs

@@ -3,7 +3,7 @@
 import { useList } from "../../../../hooks/useList.mjs";
 import MenuItemView from "../../../../../../views/MenuItemView.mjs";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/List/components/Header/components/SortingContextMenu/SortingMenuItem.tsx
+// src/components/List/components/Header/components/SortingContextMenu/SortingMenuItem.tsx
 var SortingMenuItem = (props) => {
 	const { sorting } = props;
 	const list = useList();
@@ -15,7 +15,6 @@ var SortingMenuItem = (props) => {
 		children: `${sorting.name ?? sorting.property} ${sorting.directionName ?? ""}`.trim()
 	});
 };
-//#endregion
 export { SortingMenuItem };
 
 //# sourceMappingURL=SortingMenuItem.mjs.map

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

@@ -12,7 +12,7 @@ import Header_module_default from "../../Header.module.mjs";
 import { ViewModeMenuItem } from "./ViewModeMenuItem.mjs";
 import { useAvailableViewModes } from "../../lib.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/List/components/Header/components/ViewModeContextMenu/ViewModeContextMenu.tsx
+// src/components/List/components/Header/components/ViewModeContextMenu/ViewModeContextMenu.tsx
 var ViewModeContextMenu = (props) => {
 	const { isDisabled } = props;
 	const stringFormatter = useLocalizedStringFormatter(__locale_default, "List");
@@ -32,7 +32,6 @@ var ViewModeContextMenu = (props) => {
 		children: availableViewModes.map((viewMode) => /* @__PURE__ */ jsx(ViewModeMenuItem, { viewMode }, viewMode))
 	})] });
 };
-//#endregion
 export { ViewModeContextMenu };
 
 //# sourceMappingURL=ViewModeContextMenu.mjs.map

package/dist/js/packages/components/src/components/List/components/Header/components/ViewModeContextMenu/ViewModeMenuItem.mjs

@@ -6,7 +6,7 @@ import { useList } from "../../../../hooks/useList.mjs";
 import MenuItemView from "../../../../../../views/MenuItemView.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/List/components/Header/components/ViewModeContextMenu/ViewModeMenuItem.tsx
+// src/components/List/components/Header/components/ViewModeContextMenu/ViewModeMenuItem.tsx
 var ViewModeMenuItem = (props) => {
 	const { viewMode } = props;
 	const list = useList();
@@ -19,7 +19,6 @@ var ViewModeMenuItem = (props) => {
 		children: stringFormatter.format(`settings.viewMode.${viewMode}`)
 	});
 };
-//#endregion
 export { ViewModeMenuItem };
 
 //# sourceMappingURL=ViewModeMenuItem.mjs.map

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

@@ -1,7 +1,7 @@
 "use client"
 /* */
 import { useList } from "../../hooks/useList.mjs";
-//#region src/components/List/components/Header/lib.ts
+// src/components/List/components/Header/lib.ts
 var useAvailableViewModes = () => {
 	const list = useList();
 	const availableViewModes = [];
@@ -10,7 +10,6 @@ var useAvailableViewModes = () => {
 	if (list.itemView?.showTiles) availableViewModes.push("tiles");
 	return availableViewModes;
 };
-//#endregion
 export { useAvailableViewModes };
 
 //# sourceMappingURL=lib.mjs.map

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";
-//#region src/components/List/components/Items/Items.tsx
+import { isShallowEqual } from "remeda";
+// 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,8 +60,13 @@ var Items = () => {
 			children: items.length === 0 && isInitiallyLoading ? /* @__PURE__ */ jsx(FallbackItems, {}) : items
 		})
 	});
+	lastRender.current = {
+		inputs,
+		list,
+		element
+	};
+	return element;
 };
-//#endregion
 export { Items, Items as default };
 
 //# sourceMappingURL=Items.mjs.map

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

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/List/components/Items/Items.module.scss
+// src/components/List/components/Items/Items.module.scss
 var items = "flow--list--items";
 var isLoading = "flow--list--items--is-loading";
 var tiles = "flow--list--items--tiles";
@@ -11,7 +11,6 @@ var Items_module_default = {
 	tiles,
 	emptyView
 };
-//#endregion
 export { Items_module_default as default, emptyView, isLoading, items, tiles };
 
 //# sourceMappingURL=Items.module.mjs.map

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

@@ -4,7 +4,7 @@ import { useList } from "../../../../hooks/useList.mjs";
 import { ItemLoadingView } from "../Item/components/ItemLoadingView/ItemLoadingView.mjs";
 import { ItemContainer } from "../Item/Item.mjs";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/List/components/Items/components/FallbackItems/FallbackItems.tsx
+// src/components/List/components/Items/components/FallbackItems/FallbackItems.tsx
 var FallbackItems = () => {
 	const list = useList();
 	return Array.from(Array(list.loadingItemsCount)).map((_, i) => /* @__PURE__ */ jsx(ItemContainer, {
@@ -13,7 +13,6 @@ var FallbackItems = () => {
 		children: /* @__PURE__ */ jsx(ItemLoadingView, {})
 	}, i));
 };
-//#endregion
 export { FallbackItems };
 
 //# sourceMappingURL=FallbackItems.mjs.map

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

@@ -8,7 +8,7 @@ import { ItemLoadingView } from "./components/ItemLoadingView/ItemLoadingView.mj
 import { Suspense, memo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { mergeRefs } from "@react-aria/utils";
-//#region src/components/List/components/Items/components/Item/Item.tsx
+// src/components/List/components/Items/components/Item/Item.tsx
 var ItemImpl = (props) => {
 	const { id, data, triggerRef, list, isTile } = props;
 	const itemView = list.itemView;
@@ -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();
@@ -47,7 +47,6 @@ var ItemContainer = (props) => {
 		children: props.children
 	});
 };
-//#endregion
 export { Item, Item as default, ItemContainer };
 
 //# sourceMappingURL=Item.mjs.map

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

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/List/components/Items/components/Item/Item.module.scss
+// src/components/List/components/Items/components/Item/Item.module.scss
 var item = "flow--list--items--item";
 var isSelected = "flow--list--items--item--is-selected";
 var hasAction = "flow--list--items--item--has-action";
@@ -15,7 +15,6 @@ var Item_module_default = {
 	link,
 	tile
 };
-//#endregion
 export { bottomContent, Item_module_default as default, hasAction, isSelected, item, link, tile };
 
 //# sourceMappingURL=Item.module.mjs.map

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

@@ -7,7 +7,7 @@ import ButtonView from "../../../../../../../views/ButtonView.mjs";
 import __locale_default from "../../../../../../../../../../_virtual/_18.locale.mjs";
 import ListItemView_module_default from "../../../../ListItemView/ListItemView.module.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/List/components/Items/components/Item/components/AccordionButton.tsx
+// src/components/List/components/Items/components/Item/components/AccordionButton.tsx
 var AccordionButton = (props) => {
 	const { isExpanded, toggle, children, contentElementId } = props;
 	const stringFormatter = useLocalizedStringFormatter(__locale_default, "List");
@@ -26,7 +26,6 @@ var AccordionButton = (props) => {
 		children: isExpanded ? /* @__PURE__ */ jsx(IconChevronUp, {}) : /* @__PURE__ */ jsx(IconChevronDown, {})
 	}), isExpanded && children] });
 };
-//#endregion
 export { AccordionButton };
 
 //# sourceMappingURL=AccordionButton.mjs.map

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

@@ -3,12 +3,11 @@
 import { useList } from "../../../../../../hooks/useList.mjs";
 import { ListItemSkeletonView } from "../ListItemSkeletonView/ListItemSkeletonView.mjs";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/List/components/Items/components/Item/components/ItemLoadingView/ItemLoadingView.tsx
+// src/components/List/components/Items/components/Item/components/ItemLoadingView/ItemLoadingView.tsx
 var ItemLoadingView = () => {
 	const list = useList();
 	return list.itemView?.loadingView ?? /* @__PURE__ */ jsx(ListItemSkeletonView, { viewMode: list.viewMode.value });
 };
-//#endregion
 export { ItemLoadingView };
 
 //# sourceMappingURL=ItemLoadingView.mjs.map

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

@@ -7,7 +7,7 @@ import TextView from "../../../../../../../../views/TextView.mjs";
 import AvatarView from "../../../../../../../../views/AvatarView.mjs";
 import SkeletonView from "../../../../../../../../views/SkeletonView.mjs";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/List/components/Items/components/Item/components/ListItemSkeletonView/ListItemSkeletonView.tsx
+// src/components/List/components/Items/components/Item/components/ListItemSkeletonView/ListItemSkeletonView.tsx
 var ListItemSkeletonView = (props) => {
 	const { viewMode } = props;
 	return /* @__PURE__ */ jsx(ListItemViewContentView, {
@@ -17,7 +17,6 @@ var ListItemSkeletonView = (props) => {
 		subTitle: /* @__PURE__ */ jsx(TextView, { children: /* @__PURE__ */ jsx(SkeletonTextView, { width: "300px" }) })
 	});
 };
-//#endregion
 export { ListItemSkeletonView };
 
 //# sourceMappingURL=ListItemSkeletonView.mjs.map

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

@@ -6,7 +6,7 @@ import ButtonView from "../../../../../../../../views/ButtonView.mjs";
 import __locale_default from "../../../../../../../../../../../_virtual/_18.locale.mjs";
 import ContextMenuTriggerView from "../../../../../../../../views/ContextMenuTriggerView.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/List/components/Items/components/Item/components/OptionsButton/OptionsButton.tsx
+// src/components/List/components/Items/components/Item/components/OptionsButton/OptionsButton.tsx
 var OptionsButton = (props) => {
 	const { className, children } = props;
 	const stringFormatter = useLocalizedStringFormatter(__locale_default, "List");
@@ -19,7 +19,6 @@ var OptionsButton = (props) => {
 		children: /* @__PURE__ */ jsx(IconContextMenu, {})
 	}), children] });
 };
-//#endregion
 export { OptionsButton, OptionsButton as default };
 
 //# sourceMappingURL=OptionsButton.mjs.map

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

@@ -5,11 +5,10 @@ import dynamic from "../../../../../../../lib/propsContext/dynamicProps/dynamic.
 import { AccordionButton } from "../components/AccordionButton.mjs";
 import { useEffect, useId, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/List/components/Items/components/Item/hooks/useGridItemProps.tsx
+// 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);
@@ -56,7 +55,6 @@ var useGridItemProps = (props, list) => {
 		})
 	};
 };
-//#endregion
 export { useGridItemProps };
 
 //# sourceMappingURL=useGridItemProps.mjs.map

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,18 +1,20 @@
 "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
+// 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))` }
 	});
 };
-//#endregion
 export { GridList, GridList as default };
 
 //# sourceMappingURL=GridList.mjs.map

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/Items/views/GridListItem/GridListItem.mjs

@@ -5,7 +5,7 @@ import clsx from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useLinkProps } from "@react-aria/utils";
 import * as Aria from "react-aria-components";
-//#region src/components/List/components/Items/views/GridListItem/GridListItem.tsx
+// src/components/List/components/Items/views/GridListItem/GridListItem.tsx
 /** @flr-generate all */
 var GridListItem = (props) => {
 	const { hasAction, isTile, children, ...restProps } = props;
@@ -23,7 +23,6 @@ var GridListItem = (props) => {
 		children: (renderProps) => /* @__PURE__ */ jsxs(Fragment, { children: [typeof children === "function" ? children(renderProps) : children, linkOverlay] })
 	});
 };
-//#endregion
 export { GridListItem, GridListItem as default };
 
 //# sourceMappingURL=GridListItem.mjs.map

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
+// 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,12 +86,11 @@ var ListItemView = flowComponent("ListItemView", (props) => {
 		m,
 		l,
 		children: /* @__PURE__ */ jsx(PropsContextProvider, {
-			props: propsContext,
+			props: viewMode === "tiles" ? tilesPropsContext : listPropsContext,
 			children
 		})
 	});
 }, { type: "layout" });
-//#endregion
 export { ListItemView, ListItemView as default };
 
 //# sourceMappingURL=ListItemView.mjs.map