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

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"}

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

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/List/components/ListItemView/ListItemView.module.scss
+// src/components/List/components/ListItemView/ListItemView.module.scss
 var view = "flow--list--list-item-view--view";
 var checkboxContainer = "flow--list--list-item-view--checkbox-container";
 var content = "flow--list--list-item-view--content";
@@ -39,7 +39,6 @@ var ListItemView_module_default = {
 	tileView,
 	avatarContainer
 };
-//#endregion
 export { action, avatar, avatarContainer, badge, bottomContent, checkboxContainer, columnLayout, content, contentWrapper, ListItemView_module_default as default, header, heading, listView, subTitle, text, tileView, title, topContent, view };
 
 //# sourceMappingURL=ListItemView.module.mjs.map

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

@@ -7,36 +7,36 @@ import Item_module_default from "../../../Items/components/Item/Item.module.mjs"
 import ListItemView_module_default from "../../ListItemView.module.mjs";
 import clsx from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/List/components/ListItemView/components/ListItemViewContent/ListItemViewContent.tsx
+// src/components/List/components/ListItemView/components/ListItemViewContent/ListItemViewContent.tsx
 var getStyleForContentSlot = (slot) => slot === "bottom" ? clsx(ListItemView_module_default.bottomContent, Item_module_default.bottomContent) : ListItemView_module_default.topContent;
+var contentProps = { bottom: {
+	onMouseDown: (e) => e.stopPropagation(),
+	onPointerDown: (e) => e.stopPropagation()
+} };
+var propsContext = {
+	ContextMenu: { placement: "bottom end" },
+	Button: { className: ListItemView_module_default.action },
+	ActionGroup: { className: ListItemView_module_default.action },
+	Content: {
+		className: dynamic((p) => getStyleForContentSlot(p.slot)),
+		onMouseDown: dynamic((p) => contentProps[p.slot ?? "top"]?.onMouseDown),
+		onPointerDown: dynamic((p) => contentProps[p.slot ?? "top"]?.onPointerDown)
+	},
+	Avatar: { className: ListItemView_module_default.avatar },
+	Heading: {
+		className: ListItemView_module_default.heading,
+		level: 5,
+		size: "xs",
+		elementType: "span",
+		Badge: { className: ListItemView_module_default.badge },
+		AlertBadge: { className: ListItemView_module_default.badge }
+	},
+	Text: { className: ListItemView_module_default.text },
+	Link: { unstyled: true }
+};
 /** @flr-generate all */
 var ListItemViewContent = (props) => {
 	const { children, avatar, title, subTitle, button, bottom, checkbox, viewMode, s, m, l } = props;
-	const contentProps = { bottom: {
-		onMouseDown: (e) => e.stopPropagation(),
-		onPointerDown: (e) => e.stopPropagation()
-	} };
-	const propsContext = {
-		ContextMenu: { placement: "bottom end" },
-		Button: { className: ListItemView_module_default.action },
-		ActionGroup: { className: ListItemView_module_default.action },
-		Content: {
-			className: dynamic((p) => getStyleForContentSlot(p.slot)),
-			onMouseDown: dynamic((p) => contentProps[p.slot ?? "top"]?.onMouseDown),
-			onPointerDown: dynamic((p) => contentProps[p.slot ?? "top"]?.onPointerDown)
-		},
-		Avatar: { className: ListItemView_module_default.avatar },
-		Heading: {
-			className: ListItemView_module_default.heading,
-			level: 5,
-			size: "xs",
-			elementType: "span",
-			Badge: { className: ListItemView_module_default.badge },
-			AlertBadge: { className: ListItemView_module_default.badge }
-		},
-		Text: { className: ListItemView_module_default.text },
-		Link: { unstyled: true }
-	};
 	const className = clsx(ListItemView_module_default.view, viewMode === "tiles" ? ListItemView_module_default.tileView : ListItemView_module_default.listView);
 	const header = /* @__PURE__ */ jsxs("div", {
 		className: ListItemView_module_default.header,
@@ -106,7 +106,6 @@ var ListItemViewContent = (props) => {
 		})
 	});
 };
-//#endregion
 export { ListItemViewContent, ListItemViewContent as default };
 
 //# sourceMappingURL=ListItemViewContent.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ListItemViewContent.mjs","names":["styles","itemStyles","_Fragment"],"sources":["../../../../../../../../../../../src/components/List/components/ListItemView/components/ListItemViewContent/ListItemViewContent.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren, ReactNode } from \"react\";\nimport styles from \"../../ListItemView.module.scss\";\nimport itemStyles from \"@/components/List/components/Items/components/Item/Item.module.scss\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport type { ListViewMode } from \"@/components/List/model/types\";\nimport clsx from \"clsx\";\nimport {\n  ColumnLayout,\n  type ColumnLayoutProps,\n} from \"@/components/ColumnLayout\";\n\nexport type ListItemViewContentProps = PropsWithChildren &\n  Pick<ColumnLayoutProps, \"s\" | \"m\" | \"l\"> & {\n    title?: ReactNode;\n    subTitle?: ReactNode;\n    avatar?: ReactNode;\n    button?: ReactNode;\n    bottom?: ReactNode;\n    checkbox?: ReactNode;\n    viewMode?: ListViewMode;\n  };\n\n/*\n * The bottom content also carries Item's own `bottomContent` class.\n * Item.module.scss uses it to exclude this area from the item's hover and\n * pressed background — it has its own interactive elements.\n */\nconst getStyleForContentSlot = (slot?: string) =>\n  slot === \"bottom\"\n    ? clsx(styles.bottomContent, itemStyles.bottomContent)\n    : styles.topContent;\n\n/** @flr-generate all */\nexport const ListItemViewContent = (props: ListItemViewContentProps) => {\n  const {\n    children,\n    avatar,\n    title,\n    subTitle,\n    button,\n    bottom,\n    checkbox,\n    viewMode,\n    s,\n    m,\n    l,\n  } = props;\n\n  const contentProps: Record<string, ComponentProps<\"div\">> = {\n    bottom: {\n      onMouseDown: (e) => e.stopPropagation(),\n      onPointerDown: (e) => e.stopPropagation(),\n    },\n  };\n\n  const propsContext: PropsContext = {\n    ContextMenu: {\n      placement: \"bottom end\",\n    },\n    Button: {\n      className: styles.action,\n    },\n    ActionGroup: {\n      className: styles.action,\n    },\n    Content: {\n      className: dynamic((p) => getStyleForContentSlot(p.slot)),\n      onMouseDown: dynamic((p) => contentProps[p.slot ?? \"top\"]?.onMouseDown),\n      onPointerDown: dynamic(\n        (p) => contentProps[p.slot ?? \"top\"]?.onPointerDown,\n      ),\n    },\n    Avatar: {\n      className: styles.avatar,\n    },\n    Heading: {\n      className: styles.heading,\n      level: 5,\n      size: \"xs\",\n      elementType: \"span\",\n      Badge: { className: styles.badge },\n      AlertBadge: { className: styles.badge },\n    },\n    Text: {\n      className: styles.text,\n    },\n    Link: {\n      unstyled: true,\n    },\n  };\n\n  const className = clsx(\n    styles.view,\n    viewMode === \"tiles\" ? styles.tileView : styles.listView,\n  );\n\n  const header = (\n    <div className={styles.header}>\n      <div className={styles.checkboxContainer}>{checkbox}</div>\n      {avatar}\n      <div className={styles.title}>\n        {title}\n        <div className={styles.subTitle}>{subTitle}</div>\n      </div>\n    </div>\n  );\n\n  const innerListContent = (\n    <>\n      {header}\n      {children}\n    </>\n  );\n\n  const listColumnsContentView = (\n    <ColumnLayout\n      s={s}\n      m={m}\n      l={l}\n      className={clsx(styles.content, styles.columnLayout)}\n    >\n      {innerListContent}\n    </ColumnLayout>\n  );\n\n  const listDefaultContentView = (\n    <div className={styles.content}>{innerListContent}</div>\n  );\n\n  const listView = (\n    <>\n      <div className={styles.contentWrapper}>\n        {s || m || l ? listColumnsContentView : listDefaultContentView}\n        {button}\n      </div>\n      {bottom}\n    </>\n  );\n\n  const tilesViews = (\n    <>\n      <div className={styles.avatarContainer}>{avatar}</div>\n      <div className={styles.content}>\n        <div className={styles.header}>\n          <div className={styles.checkboxContainer}>{checkbox}</div>\n          <div className={styles.title}>\n            {title}\n            <div className={styles.subTitle}>{subTitle}</div>\n          </div>\n          {button}\n        </div>\n        {children}\n        {bottom}\n      </div>\n    </>\n  );\n\n  return (\n    <div className={className}>\n      <PropsContextProvider props={propsContext}>\n        {viewMode === \"list\" && listView}\n        {viewMode === \"tiles\" && tilesViews}\n      </PropsContextProvider>\n    </div>\n  );\n};\n\nexport default ListItemViewContent;\n"],"mappings":";;;;;;;;;;AA+BA,IAAM,0BAA0B,SAC9B,SAAS,WACL,KAAKA,4BAAO,eAAeC,oBAAW,aAAa,IACnDD,4BAAO;;AAGb,IAAa,uBAAuB,UAAoC;CACtE,MAAM,EACJ,UACA,QACA,OACA,UACA,QACA,QACA,UACA,UACA,GACA,GACA,MACE;CAEJ,MAAM,eAAsD,EAC1D,QAAQ;EACN,cAAc,MAAM,EAAE,gBAAgB;EACtC,gBAAgB,MAAM,EAAE,gBAAgB;CAC1C,EACF;CAEA,MAAM,eAA6B;EACjC,aAAa,EACX,WAAW,aACb;EACA,QAAQ,EACN,WAAWA,4BAAO,OACpB;EACA,aAAa,EACX,WAAWA,4BAAO,OACpB;EACA,SAAS;GACP,WAAW,SAAS,MAAM,uBAAuB,EAAE,IAAI,CAAC;GACxD,aAAa,SAAS,MAAM,aAAa,EAAE,QAAQ,MAAM,EAAE,WAAW;GACtE,eAAe,SACZ,MAAM,aAAa,EAAE,QAAQ,MAAM,EAAE,aACxC;EACF;EACA,QAAQ,EACN,WAAWA,4BAAO,OACpB;EACA,SAAS;GACP,WAAWA,4BAAO;GAClB,OAAO;GACP,MAAM;GACN,aAAa;GACb,OAAO,EAAE,WAAWA,4BAAO,MAAM;GACjC,YAAY,EAAE,WAAWA,4BAAO,MAAM;EACxC;EACA,MAAM,EACJ,WAAWA,4BAAO,KACpB;EACA,MAAM,EACJ,UAAU,KACZ;CACF;CAEA,MAAM,YAAY,KAChBA,4BAAO,MACP,aAAa,UAAUA,4BAAO,WAAWA,4BAAO,QAClD;CAEA,MAAM,SACJ,qBAAC,OAAD;EAAK,WAAWA,4BAAO;EAAvB,UAAA;GACE,oBAAC,OAAD;IAAK,WAAWA,4BAAO;IAAoB,UAAA;GAAc,CAAA;GACxD;GACD,qBAAC,OAAD;IAAK,WAAWA,4BAAO;IAAvB,UAAA,CACG,OACD,oBAAC,OAAD;KAAK,WAAWA,4BAAO;KAAW,UAAA;IAAc,CAAA,CAC7C;;EACF;;CAGP,MAAM,mBACJ,qBAAAE,UAAA,EAAA,UAAA,CACG,QACA,QACD,EAAA,CAAA;CAGJ,MAAM,yBACJ,oBAAC,cAAD;EACK;EACA;EACA;EACH,WAAW,KAAKF,4BAAO,SAASA,4BAAO,YAAY;EAElD,UAAA;CACW,CAAA;CAGhB,MAAM,yBACJ,oBAAC,OAAD;EAAK,WAAWA,4BAAO;EAAU,UAAA;CAAsB,CAAA;CAGzD,MAAM,WACJ,qBAAAE,UAAA,EAAA,UAAA,CACE,qBAAC,OAAD;EAAK,WAAWF,4BAAO;EAAvB,UAAA,CACG,KAAK,KAAK,IAAI,yBAAyB,wBACvC,MACE;CACJ,CAAA,GAAA,MACD,EAAA,CAAA;CAGJ,MAAM,aACJ,qBAAAE,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD;EAAK,WAAWF,4BAAO;EAAkB,UAAA;CAAY,CAAA,GACrD,qBAAC,OAAD;EAAK,WAAWA,4BAAO;EAAvB,UAAA;GACE,qBAAC,OAAD;IAAK,WAAWA,4BAAO;IAAvB,UAAA;KACE,oBAAC,OAAD;MAAK,WAAWA,4BAAO;MAAoB,UAAA;KAAc,CAAA;KACzD,qBAAC,OAAD;MAAK,WAAWA,4BAAO;MAAvB,UAAA,CACG,OACD,oBAAC,OAAD;OAAK,WAAWA,4BAAO;OAAW,UAAA;MAAc,CAAA,CAC7C;;KACJ;IACE;;GACJ;GACA;EACE;CACL,CAAA,CAAA,EAAA,CAAA;CAGJ,OACE,oBAAC,OAAD;EAAgB;EACd,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACG,aAAa,UAAU,UACvB,aAAa,WAAW,UACL;;CACnB,CAAA;AAET"}
+{"version":3,"file":"ListItemViewContent.mjs","names":["styles","itemStyles","_Fragment"],"sources":["../../../../../../../../../../../src/components/List/components/ListItemView/components/ListItemViewContent/ListItemViewContent.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren, ReactNode } from \"react\";\nimport styles from \"../../ListItemView.module.scss\";\nimport itemStyles from \"@/components/List/components/Items/components/Item/Item.module.scss\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport type { ListViewMode } from \"@/components/List/model/types\";\nimport clsx from \"clsx\";\nimport {\n  ColumnLayout,\n  type ColumnLayoutProps,\n} from \"@/components/ColumnLayout\";\n\nexport type ListItemViewContentProps = PropsWithChildren &\n  Pick<ColumnLayoutProps, \"s\" | \"m\" | \"l\"> & {\n    title?: ReactNode;\n    subTitle?: ReactNode;\n    avatar?: ReactNode;\n    button?: ReactNode;\n    bottom?: ReactNode;\n    checkbox?: ReactNode;\n    viewMode?: ListViewMode;\n  };\n\n/*\n * The bottom content also carries Item's own `bottomContent` class.\n * Item.module.scss uses it to exclude this area from the item's hover and\n * pressed background — it has its own interactive elements.\n */\nconst getStyleForContentSlot = (slot?: string) =>\n  slot === \"bottom\"\n    ? clsx(styles.bottomContent, itemStyles.bottomContent)\n    : styles.topContent;\n\nconst contentProps: Record<string, ComponentProps<\"div\">> = {\n  bottom: {\n    onMouseDown: (e) => e.stopPropagation(),\n    onPointerDown: (e) => e.stopPropagation(),\n  },\n};\n\nconst propsContext: PropsContext = {\n  ContextMenu: {\n    placement: \"bottom end\",\n  },\n  Button: {\n    className: styles.action,\n  },\n  ActionGroup: {\n    className: styles.action,\n  },\n  Content: {\n    className: dynamic((p) => getStyleForContentSlot(p.slot)),\n    onMouseDown: dynamic((p) => contentProps[p.slot ?? \"top\"]?.onMouseDown),\n    onPointerDown: dynamic((p) => contentProps[p.slot ?? \"top\"]?.onPointerDown),\n  },\n  Avatar: {\n    className: styles.avatar,\n  },\n  Heading: {\n    className: styles.heading,\n    level: 5,\n    size: \"xs\",\n    elementType: \"span\",\n    Badge: { className: styles.badge },\n    AlertBadge: { className: styles.badge },\n  },\n  Text: {\n    className: styles.text,\n  },\n  Link: {\n    unstyled: true,\n  },\n};\n\n/** @flr-generate all */\nexport const ListItemViewContent = (props: ListItemViewContentProps) => {\n  const {\n    children,\n    avatar,\n    title,\n    subTitle,\n    button,\n    bottom,\n    checkbox,\n    viewMode,\n    s,\n    m,\n    l,\n  } = props;\n\n  const className = clsx(\n    styles.view,\n    viewMode === \"tiles\" ? styles.tileView : styles.listView,\n  );\n\n  const header = (\n    <div className={styles.header}>\n      <div className={styles.checkboxContainer}>{checkbox}</div>\n      {avatar}\n      <div className={styles.title}>\n        {title}\n        <div className={styles.subTitle}>{subTitle}</div>\n      </div>\n    </div>\n  );\n\n  const innerListContent = (\n    <>\n      {header}\n      {children}\n    </>\n  );\n\n  const listColumnsContentView = (\n    <ColumnLayout\n      s={s}\n      m={m}\n      l={l}\n      className={clsx(styles.content, styles.columnLayout)}\n    >\n      {innerListContent}\n    </ColumnLayout>\n  );\n\n  const listDefaultContentView = (\n    <div className={styles.content}>{innerListContent}</div>\n  );\n\n  const listView = (\n    <>\n      <div className={styles.contentWrapper}>\n        {s || m || l ? listColumnsContentView : listDefaultContentView}\n        {button}\n      </div>\n      {bottom}\n    </>\n  );\n\n  const tilesViews = (\n    <>\n      <div className={styles.avatarContainer}>{avatar}</div>\n      <div className={styles.content}>\n        <div className={styles.header}>\n          <div className={styles.checkboxContainer}>{checkbox}</div>\n          <div className={styles.title}>\n            {title}\n            <div className={styles.subTitle}>{subTitle}</div>\n          </div>\n          {button}\n        </div>\n        {children}\n        {bottom}\n      </div>\n    </>\n  );\n\n  return (\n    <div className={className}>\n      <PropsContextProvider props={propsContext}>\n        {viewMode === \"list\" && listView}\n        {viewMode === \"tiles\" && tilesViews}\n      </PropsContextProvider>\n    </div>\n  );\n};\n\nexport default ListItemViewContent;\n"],"mappings":";;;;;;;;;;AA+BA,IAAM,0BAA0B,SAC9B,SAAS,WACL,KAAKA,4BAAO,eAAeC,oBAAW,aAAa,IACnDD,4BAAO;AAEb,IAAM,eAAsD,EAC1D,QAAQ;CACN,cAAc,MAAM,EAAE,gBAAgB;CACtC,gBAAgB,MAAM,EAAE,gBAAgB;AAC1C,EACF;AAEA,IAAM,eAA6B;CACjC,aAAa,EACX,WAAW,aACb;CACA,QAAQ,EACN,WAAWA,4BAAO,OACpB;CACA,aAAa,EACX,WAAWA,4BAAO,OACpB;CACA,SAAS;EACP,WAAW,SAAS,MAAM,uBAAuB,EAAE,IAAI,CAAC;EACxD,aAAa,SAAS,MAAM,aAAa,EAAE,QAAQ,MAAM,EAAE,WAAW;EACtE,eAAe,SAAS,MAAM,aAAa,EAAE,QAAQ,MAAM,EAAE,aAAa;CAC5E;CACA,QAAQ,EACN,WAAWA,4BAAO,OACpB;CACA,SAAS;EACP,WAAWA,4BAAO;EAClB,OAAO;EACP,MAAM;EACN,aAAa;EACb,OAAO,EAAE,WAAWA,4BAAO,MAAM;EACjC,YAAY,EAAE,WAAWA,4BAAO,MAAM;CACxC;CACA,MAAM,EACJ,WAAWA,4BAAO,KACpB;CACA,MAAM,EACJ,UAAU,KACZ;AACF;;AAGA,IAAa,uBAAuB,UAAoC;CACtE,MAAM,EACJ,UACA,QACA,OACA,UACA,QACA,QACA,UACA,UACA,GACA,GACA,MACE;CAEJ,MAAM,YAAY,KAChBA,4BAAO,MACP,aAAa,UAAUA,4BAAO,WAAWA,4BAAO,QAClD;CAEA,MAAM,SACJ,qBAAC,OAAD;EAAK,WAAWA,4BAAO;EAAvB,UAAA;GACE,oBAAC,OAAD;IAAK,WAAWA,4BAAO;IAAoB,UAAA;GAAc,CAAA;GACxD;GACD,qBAAC,OAAD;IAAK,WAAWA,4BAAO;IAAvB,UAAA,CACG,OACD,oBAAC,OAAD;KAAK,WAAWA,4BAAO;KAAW,UAAA;IAAc,CAAA,CAC7C;;EACF;;CAGP,MAAM,mBACJ,qBAAAE,UAAA,EAAA,UAAA,CACG,QACA,QACD,EAAA,CAAA;CAGJ,MAAM,yBACJ,oBAAC,cAAD;EACK;EACA;EACA;EACH,WAAW,KAAKF,4BAAO,SAASA,4BAAO,YAAY;EAElD,UAAA;CACW,CAAA;CAGhB,MAAM,yBACJ,oBAAC,OAAD;EAAK,WAAWA,4BAAO;EAAU,UAAA;CAAsB,CAAA;CAGzD,MAAM,WACJ,qBAAAE,UAAA,EAAA,UAAA,CACE,qBAAC,OAAD;EAAK,WAAWF,4BAAO;EAAvB,UAAA,CACG,KAAK,KAAK,IAAI,yBAAyB,wBACvC,MACE;CACJ,CAAA,GAAA,MACD,EAAA,CAAA;CAGJ,MAAM,aACJ,qBAAAE,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD;EAAK,WAAWF,4BAAO;EAAkB,UAAA;CAAY,CAAA,GACrD,qBAAC,OAAD;EAAK,WAAWA,4BAAO;EAAvB,UAAA;GACE,qBAAC,OAAD;IAAK,WAAWA,4BAAO;IAAvB,UAAA;KACE,oBAAC,OAAD;MAAK,WAAWA,4BAAO;MAAoB,UAAA;KAAc,CAAA;KACzD,qBAAC,OAAD;MAAK,WAAWA,4BAAO;MAAvB,UAAA,CACG,OACD,oBAAC,OAAD;OAAK,WAAWA,4BAAO;OAAW,UAAA;MAAc,CAAA,CAC7C;;KACJ;IACE;;GACJ;GACA;EACE;CACL,CAAA,CAAA,EAAA,CAAA;CAGJ,OACE,oBAAC,OAAD;EAAgB;EACd,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACG,aAAa,UAAU,UACvB,aAAa,WAAW,UACL;;CACnB,CAAA;AAET"}

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

@@ -4,24 +4,19 @@ import { flowComponent } from "../../../../lib/componentFactory/flowComponent.mj
 import ListSummary_module_default from "./ListSummary.module.mjs";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/List/components/ListSummary/ListSummary.tsx
+// src/components/List/components/ListSummary/ListSummary.tsx
 /** @flr-generate all */
 var ListSummary = flowComponent("ListSummary", (props) => {
-	const { children, position = "top", ref } = props;
+	const { position = "top", className, ...rest } = props;
 	if (position === "bottom") return /* @__PURE__ */ jsx("footer", {
-		ref,
-		className: clsx(ListSummary_module_default.listSummary, ListSummary_module_default.bottom),
-		...props,
-		children
+		...rest,
+		className: clsx(ListSummary_module_default.listSummary, ListSummary_module_default.bottom, className)
 	});
 	return /* @__PURE__ */ jsx("header", {
-		ref,
-		className: clsx(ListSummary_module_default.listSummary, ListSummary_module_default.top),
-		...props,
-		children
+		...rest,
+		className: clsx(ListSummary_module_default.listSummary, ListSummary_module_default.top, className)
 	});
 });
-//#endregion
 export { ListSummary, ListSummary as default };
 
 //# sourceMappingURL=ListSummary.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ListSummary.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/List/components/ListSummary/ListSummary.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./ListSummary.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\n\nexport interface ListSummaryProps\n  extends FlowComponentProps, PropsWithChildren {\n  /** Whether the summary is placed above or underneath the list @default: \"top\" */\n  position?: \"top\" | \"bottom\";\n}\n\n/** @flr-generate all */\nexport const ListSummary = flowComponent(\"ListSummary\", (props) => {\n  const { children, position = \"top\", ref } = props;\n\n  if (position === \"bottom\") {\n    return (\n      <footer\n        ref={ref}\n        className={clsx(styles.listSummary, styles.bottom)}\n        {...props}\n      >\n        {children}\n      </footer>\n    );\n  }\n\n  return (\n    <header\n      ref={ref}\n      className={clsx(styles.listSummary, styles.top)}\n      {...props}\n    >\n      {children}\n    </header>\n  );\n});\n\nexport default ListSummary;\n"],"mappings":";;;;;;;;AAaA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CACjE,MAAM,EAAE,UAAU,WAAW,OAAO,QAAQ;CAE5C,IAAI,aAAa,UACf,OACE,oBAAC,UAAD;EACO;EACL,WAAW,KAAKA,2BAAO,aAAaA,2BAAO,MAAM;EACjD,GAAI;EAEH;CACK,CAAA;CAIZ,OACE,oBAAC,UAAD;EACO;EACL,WAAW,KAAKA,2BAAO,aAAaA,2BAAO,GAAG;EAC9C,GAAI;EAEH;CACK,CAAA;AAEZ,CAAC"}
+{"version":3,"file":"ListSummary.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/List/components/ListSummary/ListSummary.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./ListSummary.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\n\nexport interface ListSummaryProps\n  extends PropsWithClassName, FlowComponentProps, PropsWithChildren {\n  /** Whether the summary is placed above or underneath the list @default \"top\" */\n  position?: \"top\" | \"bottom\";\n}\n\n/** @flr-generate all */\nexport const ListSummary = flowComponent(\"ListSummary\", (props) => {\n  const { position = \"top\", className, ...rest } = props;\n\n  if (position === \"bottom\") {\n    return (\n      <footer\n        {...rest}\n        className={clsx(styles.listSummary, styles.bottom, className)}\n      />\n    );\n  }\n\n  return (\n    <header\n      {...rest}\n      className={clsx(styles.listSummary, styles.top, className)}\n    />\n  );\n});\n\nexport default ListSummary;\n"],"mappings":";;;;;;;;AAcA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CACjE,MAAM,EAAE,WAAW,OAAO,WAAW,GAAG,SAAS;CAEjD,IAAI,aAAa,UACf,OACE,oBAAC,UAAD;EACE,GAAI;EACJ,WAAW,KAAKA,2BAAO,aAAaA,2BAAO,QAAQ,SAAS;CAC7D,CAAA;CAIL,OACE,oBAAC,UAAD;EACE,GAAI;EACJ,WAAW,KAAKA,2BAAO,aAAaA,2BAAO,KAAK,SAAS;CAC1D,CAAA;AAEL,CAAC"}

package/dist/js/packages/components/src/components/List/components/ListSummary/ListSummary.module.mjs

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/List/components/ListSummary/ListSummary.module.scss
+// src/components/List/components/ListSummary/ListSummary.module.scss
 var listSummary = "flow--list--list-summary";
 var top = "flow--list--list-summary--top";
 var bottom = "flow--list--list-summary--bottom";
@@ -9,7 +9,6 @@ var ListSummary_module_default = {
 	top,
 	bottom
 };
-//#endregion
 export { bottom, ListSummary_module_default as default, listSummary, top };
 
 //# sourceMappingURL=ListSummary.module.mjs.map

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

@@ -2,40 +2,50 @@
 /* */
 import { useList } from "../../hooks/useList.mjs";
 import { useInfiniteScrollTrigger } from "../../hooks/useInfiniteScrollTrigger.mjs";
+import { useLatestOnAction } from "../../hooks/useLatestOnAction.mjs";
 import Table_module_default from "./Table.module.mjs";
 import TableView from "../../../../views/TableView.mjs";
 import TableHeaderView from "../../../../views/TableHeaderView.mjs";
 import TableBodyView from "../../../../views/TableBodyView.mjs";
-import TableRowView from "../../../../views/TableRowView.mjs";
-import TableCellView from "../../../../views/TableCellView.mjs";
 import TableColumnView from "../../../../views/TableColumnView.mjs";
 import { TableBodyLoadingView } from "./components/TableBodyLoadingView.mjs";
+import { Row } from "./components/Row.mjs";
 import clsx from "clsx";
+import { useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/List/components/Table/Table.tsx
+import { isShallowEqual } from "remeda";
+// src/components/List/components/Table/Table.tsx
 var Table = () => {
 	const list = useList();
+	const lastRender = useRef(null);
 	const table = list.table;
 	const listIsEmpty = list.useIsEmpty();
 	const isLoading = list.loader.useIsLoading();
 	const isInitiallyLoading = list.loader.useIsInitiallyLoading();
 	const isLoadingMore = list.loader.useIsLoadingMore();
 	const { triggerRef, triggerIndex } = useInfiniteScrollTrigger();
+	const onAction = useLatestOnAction(list);
 	if (!table || listIsEmpty) return null;
-	const rowAction = table.list.onAction;
 	const tableClassName = clsx(Table_module_default.table, isLoading && !(list.infiniteScroll && isLoadingMore) && Table_module_default.isLoading, table.componentProps.className);
-	const rows = list.items.entries.map((item, index) => /* @__PURE__ */ jsx(TableRowView, {
-		className: clsx(Table_module_default.row, rowAction && Table_module_default.hasAction, table.body.row.componentProps.className),
+	const inputs = [
+		tableClassName,
+		isInitiallyLoading,
+		isLoading,
+		onAction,
+		triggerIndex,
+		triggerRef,
+		...list.items.entries.flatMap((item) => [item.id, item.data])
+	];
+	const last = lastRender.current;
+	if (last && isShallowEqual(last.inputs, inputs) && table.rendersSameAs(last.table)) return last.element;
+	const rows = list.items.entries.map((item, index) => /* @__PURE__ */ jsx(Row, {
 		id: item.id,
-		onAction: rowAction ? () => rowAction(item.data) : void 0,
-		...table.body.row.componentProps,
-		...index === triggerIndex ? { ref: triggerRef } : {},
-		children: table.body.row?.cells.map((cell, i) => /* @__PURE__ */ jsx(TableCellView, {
-			...cell.componentProps,
-			children: cell.renderFn ? cell.renderFn(item.data, list) : void 0
-		}, i))
+		data: item.data,
+		list,
+		onAction,
+		triggerRef: index === triggerIndex ? triggerRef : void 0
 	}, item.id));
-	return /* @__PURE__ */ jsxs(TableView, {
+	const element = /* @__PURE__ */ jsxs(TableView, {
 		...list.componentProps,
 		...table.componentProps,
 		className: tableClassName,
@@ -49,8 +59,13 @@ var Table = () => {
 			children: isInitiallyLoading ? /* @__PURE__ */ jsx(TableBodyLoadingView, {}) : rows
 		})]
 	});
+	lastRender.current = {
+		inputs,
+		table,
+		element
+	};
+	return element;
 };
-//#endregion
 export { Table };
 
 //# sourceMappingURL=Table.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Table.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/List/components/Table/Table.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useList } from \"@/components/List\";\nimport styles from \"./Table.module.scss\";\nimport clsx from \"clsx\";\nimport TableView from \"@/views/TableView\";\nimport TableHeaderView from \"@/views/TableHeaderView\";\nimport TableBodyView from \"@/views/TableBodyView\";\nimport TableRowView from \"@/views/TableRowView\";\nimport TableCellView from \"@/views/TableCellView\";\nimport TableColumnView from \"@/views/TableColumnView\";\nimport { TableBodyLoadingView } from \"@/components/List/components/Table/components/TableBodyLoadingView\";\nimport { useInfiniteScrollTrigger } from \"@/components/List/hooks/useInfiniteScrollTrigger\";\n\nexport const Table: FC = () => {\n  const list = useList();\n  const table = list.table;\n  const listIsEmpty = list.useIsEmpty();\n\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 (!table || listIsEmpty) {\n    return null;\n  }\n\n  const rowAction = table.list.onAction;\n\n  const tableClassName = clsx(\n    styles.table,\n    isLoading && !(list.infiniteScroll && isLoadingMore) && styles.isLoading,\n    table.componentProps.className,\n  );\n\n  const rows = list.items.entries.map((item, index) => (\n    <TableRowView\n      className={clsx(\n        styles.row,\n        rowAction && styles.hasAction,\n        table.body.row.componentProps.className,\n      )}\n      key={item.id}\n      id={item.id}\n      onAction={rowAction ? () => rowAction(item.data) : undefined}\n      {...table.body.row.componentProps}\n      {...(index === triggerIndex ? { ref: triggerRef } : {})}\n    >\n      {table.body.row?.cells.map((cell, i) => (\n        <TableCellView key={i} {...cell.componentProps}>\n          {cell.renderFn ? cell.renderFn(item.data, list) : undefined}\n        </TableCellView>\n      ))}\n    </TableRowView>\n  ));\n\n  return (\n    <TableView\n      {...list.componentProps}\n      {...table.componentProps}\n      className={tableClassName}\n      aria-hidden={isInitiallyLoading}\n      aria-busy={isLoading}\n    >\n      <TableHeaderView {...table.header.componentProps}>\n        {table.header.columns.map((col, i) => (\n          <TableColumnView key={i} {...col.componentProps} />\n        ))}\n      </TableHeaderView>\n      <TableBodyView {...table.body.componentProps}>\n        {isInitiallyLoading ? <TableBodyLoadingView /> : rows}\n      </TableBodyView>\n    </TableView>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAaA,IAAa,cAAkB;CAC7B,MAAM,OAAO,QAAQ;CACrB,MAAM,QAAQ,KAAK;CACnB,MAAM,cAAc,KAAK,WAAW;CAEpC,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,SAAS,aACZ,OAAO;CAGT,MAAM,YAAY,MAAM,KAAK;CAE7B,MAAM,iBAAiB,KACrBA,qBAAO,OACP,aAAa,EAAE,KAAK,kBAAkB,kBAAkBA,qBAAO,WAC/D,MAAM,eAAe,SACvB;CAEA,MAAM,OAAO,KAAK,MAAM,QAAQ,KAAK,MAAM,UACzC,oBAAC,cAAD;EACE,WAAW,KACTA,qBAAO,KACP,aAAaA,qBAAO,WACpB,MAAM,KAAK,IAAI,eAAe,SAChC;EAEA,IAAI,KAAK;EACT,UAAU,kBAAkB,UAAU,KAAK,IAAI,IAAI,KAAA;EACnD,GAAI,MAAM,KAAK,IAAI;EACnB,GAAK,UAAU,eAAe,EAAE,KAAK,WAAW,IAAI,CAAC;EAEpD,UAAA,MAAM,KAAK,KAAK,MAAM,KAAK,MAAM,MAChC,oBAAC,eAAD;GAAuB,GAAI,KAAK;GAC7B,UAAA,KAAK,WAAW,KAAK,SAAS,KAAK,MAAM,IAAI,IAAI,KAAA;EACrC,GAFK,CAEL,CAChB;CACW,GAXP,KAAK,EAWE,CACf;CAED,OACE,qBAAC,WAAD;EACE,GAAI,KAAK;EACT,GAAI,MAAM;EACV,WAAW;EACX,eAAa;EACb,aAAW;EALb,UAAA,CAOE,oBAAC,iBAAD;GAAiB,GAAI,MAAM,OAAO;GAC/B,UAAA,MAAM,OAAO,QAAQ,KAAK,KAAK,MAC9B,oBAAC,iBAAD,EAAyB,GAAI,IAAI,eAAiB,GAA5B,CAA4B,CACnD;EACc,CAAA,GACjB,oBAAC,eAAD;GAAe,GAAI,MAAM,KAAK;GAC3B,UAAA,qBAAqB,oBAAC,sBAAD,CAAuB,CAAA,IAAI;EACpC,CAAA,CACN;;AAEf"}
+{"version":3,"file":"Table.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/List/components/Table/Table.tsx"],"sourcesContent":["import type { FC, ReactElement } from \"react\";\nimport { useRef } from \"react\";\nimport { isShallowEqual } from \"remeda\";\nimport { useList } from \"@/components/List\";\nimport styles from \"./Table.module.scss\";\nimport clsx from \"clsx\";\nimport TableView from \"@/views/TableView\";\nimport TableHeaderView from \"@/views/TableHeaderView\";\nimport TableBodyView from \"@/views/TableBodyView\";\nimport TableColumnView from \"@/views/TableColumnView\";\nimport { TableBodyLoadingView } from \"@/components/List/components/Table/components/TableBodyLoadingView\";\nimport { useInfiniteScrollTrigger } from \"@/components/List/hooks/useInfiniteScrollTrigger\";\nimport { useLatestOnAction } from \"@/components/List/hooks/useLatestOnAction\";\nimport { Row } from \"@/components/List/components/Table/components/Row\";\nimport type { Table as TableModel } from \"@/components/List/model/table/Table\";\n\ninterface LastRender {\n  inputs: unknown[];\n  table: TableModel<never>;\n  element: ReactElement;\n}\n\nexport const Table: FC = () => {\n  const list = useList();\n  const lastRender = useRef<LastRender | null>(null);\n  const table = list.table;\n  const listIsEmpty = list.useIsEmpty();\n\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  const onAction = useLatestOnAction(list);\n\n  if (!table || listIsEmpty) {\n    return null;\n  }\n\n  const tableClassName = clsx(\n    styles.table,\n    isLoading && !(list.infiniteScroll && isLoadingMore) && styles.isLoading,\n    table.componentProps.className,\n  );\n\n  /*\n   * react-aria re-renders every row and cell whenever its table renders, its\n   * row memo or not (adobe/react-spectrum#10759). While nothing the table\n   * shows has changed, it gets the element of the last render, so it does not\n   * render at all.\n   */\n  const inputs = [\n    tableClassName,\n    isInitiallyLoading,\n    isLoading,\n    onAction,\n    triggerIndex,\n    triggerRef,\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    table.rendersSameAs(last.table)\n  ) {\n    return last.element;\n  }\n\n  const rows = list.items.entries.map((item, index) => (\n    <Row\n      key={item.id}\n      id={item.id}\n      data={item.data}\n      list={list}\n      onAction={onAction}\n      triggerRef={index === triggerIndex ? triggerRef : undefined}\n    />\n  ));\n\n  const element = (\n    <TableView\n      {...list.componentProps}\n      {...table.componentProps}\n      className={tableClassName}\n      aria-hidden={isInitiallyLoading}\n      aria-busy={isLoading}\n    >\n      <TableHeaderView {...table.header.componentProps}>\n        {table.header.columns.map((col, i) => (\n          <TableColumnView key={i} {...col.componentProps} />\n        ))}\n      </TableHeaderView>\n      <TableBodyView {...table.body.componentProps}>\n        {isInitiallyLoading ? <TableBodyLoadingView /> : rows}\n      </TableBodyView>\n    </TableView>\n  );\n  lastRender.current = { inputs, table, element };\n  return element;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAsBA,IAAa,cAAkB;CAC7B,MAAM,OAAO,QAAQ;CACrB,MAAM,aAAa,OAA0B,IAAI;CACjD,MAAM,QAAQ,KAAK;CACnB,MAAM,cAAc,KAAK,WAAW;CAEpC,MAAM,YAAY,KAAK,OAAO,aAAa;CAC3C,MAAM,qBAAqB,KAAK,OAAO,sBAAsB;CAC7D,MAAM,gBAAgB,KAAK,OAAO,iBAAiB;CAEnD,MAAM,EAAE,YAAY,iBAAiB,yBAAyB;CAC9D,MAAM,WAAW,kBAAkB,IAAI;CAEvC,IAAI,CAAC,SAAS,aACZ,OAAO;CAGT,MAAM,iBAAiB,KACrBA,qBAAO,OACP,aAAa,EAAE,KAAK,kBAAkB,kBAAkBA,qBAAO,WAC/D,MAAM,eAAe,SACvB;CAQA,MAAM,SAAS;EACb;EACA;EACA;EACA;EACA;EACA;EACA,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,MAAM,cAAc,KAAK,KAAK,GAE9B,OAAO,KAAK;CAGd,MAAM,OAAO,KAAK,MAAM,QAAQ,KAAK,MAAM,UACzC,oBAAC,KAAD;EAEE,IAAI,KAAK;EACT,MAAM,KAAK;EACL;EACI;EACV,YAAY,UAAU,eAAe,aAAa,KAAA;CACnD,GANM,KAAK,EAMX,CACF;CAED,MAAM,UACJ,qBAAC,WAAD;EACE,GAAI,KAAK;EACT,GAAI,MAAM;EACV,WAAW;EACX,eAAa;EACb,aAAW;EALb,UAAA,CAOE,oBAAC,iBAAD;GAAiB,GAAI,MAAM,OAAO;GAC/B,UAAA,MAAM,OAAO,QAAQ,KAAK,KAAK,MAC9B,oBAAC,iBAAD,EAAyB,GAAI,IAAI,eAAiB,GAA5B,CAA4B,CACnD;EACc,CAAA,GACjB,oBAAC,eAAD;GAAe,GAAI,MAAM,KAAK;GAC3B,UAAA,qBAAqB,oBAAC,sBAAD,CAAuB,CAAA,IAAI;EACpC,CAAA,CACN;;CAEb,WAAW,UAAU;EAAE;EAAQ;EAAO;CAAQ;CAC9C,OAAO;AACT"}

package/dist/js/packages/components/src/components/List/components/Table/Table.module.mjs

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/List/components/Table/Table.module.scss
+// src/components/List/components/Table/Table.module.scss
 var table = "flow--list--table";
 var isLoading = "flow--list--table--is-loading";
 var row = "flow--list--table--row";
@@ -11,7 +11,6 @@ var Table_module_default = {
 	row,
 	hasAction
 };
-//#endregion
 export { Table_module_default as default, hasAction, isLoading, row, table };
 
 //# sourceMappingURL=Table.module.mjs.map

package/dist/js/packages/components/src/components/List/components/Table/components/Row.mjs

@@ -0,0 +1,30 @@
+"use client"
+/* */
+import Table_module_default from "../Table.module.mjs";
+import TableRowView from "../../../../../views/TableRowView.mjs";
+import TableCellView from "../../../../../views/TableCellView.mjs";
+import clsx from "clsx";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+// src/components/List/components/Table/components/Row.tsx
+var RowImpl = (props) => {
+	const { id, data, list, onAction, triggerRef } = props;
+	const row = list.table?.body.row;
+	if (!row) return null;
+	return /* @__PURE__ */ jsx(TableRowView, {
+		...row.componentProps,
+		className: clsx(Table_module_default.row, onAction && Table_module_default.hasAction, row.componentProps.className),
+		id,
+		onAction: onAction ? () => onAction(data) : void 0,
+		...triggerRef ? { ref: triggerRef } : {},
+		children: row.cells.map((cell, i) => /* @__PURE__ */ jsx(TableCellView, {
+			...cell.componentProps,
+			children: cell.renderFn ? cell.renderFn(data, list) : void 0
+		}, i))
+	});
+};
+var Row = memo(RowImpl, (prev, next) => prev.id === next.id && prev.data === next.data && prev.triggerRef === next.triggerRef && !!prev.onAction === !!next.onAction && !!prev.list.table?.body.row.rendersSameAs(next.list.table?.body.row));
+Row.displayName = "Row";
+export { Row, Row as default };
+
+//# sourceMappingURL=Row.mjs.map

package/dist/js/packages/components/src/components/List/components/Table/components/Row.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Row.mjs","names":["styles"],"sources":["../../../../../../../../../../src/components/List/components/Table/components/Row.tsx"],"sourcesContent":["import type { Ref } from \"react\";\nimport { memo } from \"react\";\nimport clsx from \"clsx\";\nimport type { Key } from \"react-aria-components\";\nimport type ListModel from \"@/components/List/model/List\";\nimport TableRowView from \"@/views/TableRowView\";\nimport TableCellView from \"@/views/TableCellView\";\nimport styles from \"../Table.module.scss\";\n\ninterface Props {\n  id: Key;\n  data: never;\n  list: ListModel<never>;\n  /** Stable invoker of the list's latest `onAction` */\n  onAction?: (data: never) => void;\n  triggerRef?: Ref<HTMLTableRowElement>;\n}\n\nconst RowImpl = (props: Props) => {\n  const { id, data, list, onAction, triggerRef } = props;\n  const row = list.table?.body.row;\n\n  if (!row) {\n    return null;\n  }\n\n  return (\n    <TableRowView\n      {...row.componentProps}\n      className={clsx(\n        styles.row,\n        onAction && styles.hasAction,\n        row.componentProps.className,\n      )}\n      id={id}\n      onAction={onAction ? () => onAction(data) : undefined}\n      {...(triggerRef ? { ref: triggerRef } : {})}\n    >\n      {row.cells.map((cell, i) => (\n        <TableCellView key={i} {...cell.componentProps}>\n          {cell.renderFn ? cell.renderFn(data, list) : undefined}\n        </TableCellView>\n      ))}\n    </TableRowView>\n  );\n};\n\n// The list model is rebuilt on every render, so it cannot be compared by\n// identity. A row that declares `renderDependencies` re-renders only when its data,\n// those dependencies or a cell's props change — the cells' render functions\n// count by the dependencies. Without them, rows re-render with the list.\nexport const Row = memo(\n  RowImpl,\n  (prev, next) =>\n    prev.id === next.id &&\n    prev.data === next.data &&\n    prev.triggerRef === next.triggerRef &&\n    !!prev.onAction === !!next.onAction &&\n    !!prev.list.table?.body.row.rendersSameAs(next.list.table?.body.row),\n);\nRow.displayName = \"Row\";\n\nexport default Row;\n"],"mappings":";;;;;;;;;AAkBA,IAAM,WAAW,UAAiB;CAChC,MAAM,EAAE,IAAI,MAAM,MAAM,UAAU,eAAe;CACjD,MAAM,MAAM,KAAK,OAAO,KAAK;CAE7B,IAAI,CAAC,KACH,OAAO;CAGT,OACE,oBAAC,cAAD;EACE,GAAI,IAAI;EACR,WAAW,KACTA,qBAAO,KACP,YAAYA,qBAAO,WACnB,IAAI,eAAe,SACrB;EACI;EACJ,UAAU,iBAAiB,SAAS,IAAI,IAAI,KAAA;EAC5C,GAAK,aAAa,EAAE,KAAK,WAAW,IAAI,CAAC;EAExC,UAAA,IAAI,MAAM,KAAK,MAAM,MACpB,oBAAC,eAAD;GAAuB,GAAI,KAAK;GAC7B,UAAA,KAAK,WAAW,KAAK,SAAS,MAAM,IAAI,IAAI,KAAA;EAChC,GAFK,CAEL,CAChB;CACW,CAAA;AAElB;AAMA,IAAa,MAAM,KACjB,UACC,MAAM,SACL,KAAK,OAAO,KAAK,MACjB,KAAK,SAAS,KAAK,QACnB,KAAK,eAAe,KAAK,cACzB,CAAC,CAAC,KAAK,aAAa,CAAC,CAAC,KAAK,YAC3B,CAAC,CAAC,KAAK,KAAK,OAAO,KAAK,IAAI,cAAc,KAAK,KAAK,OAAO,KAAK,GAAG,CACvE;AACA,IAAI,cAAc"}

package/dist/js/packages/components/src/components/List/components/Table/components/TableBodyLoadingView.mjs

@@ -3,12 +3,11 @@
 import { useList } from "../../../hooks/useList.mjs";
 import { TableRowSkeletonView } from "./TableRowSkeletonView.mjs";
 import { Fragment, jsx } from "react/jsx-runtime";
-//#region src/components/List/components/Table/components/TableBodyLoadingView.tsx
+// src/components/List/components/Table/components/TableBodyLoadingView.tsx
 var TableBodyLoadingView = () => {
 	const list = useList();
 	return /* @__PURE__ */ jsx(Fragment, { children: Array.from(Array(list.loadingItemsCount)).map((_, i) => /* @__PURE__ */ jsx(TableRowSkeletonView, {}, i)) });
 };
-//#endregion
 export { TableBodyLoadingView };
 
 //# sourceMappingURL=TableBodyLoadingView.mjs.map

package/dist/js/packages/components/src/components/List/components/Table/components/TableRowSkeletonView.mjs

@@ -8,7 +8,7 @@ import TableCellView from "../../../../../views/TableCellView.mjs";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 import invariant from "invariant";
-//#region src/components/List/components/Table/components/TableRowSkeletonView.tsx
+// src/components/List/components/Table/components/TableRowSkeletonView.tsx
 var TableRowSkeletonView = () => {
 	const table = useList().table;
 	invariant(!!table, "TableRowSkeletonView must be used within a Table component");
@@ -22,7 +22,6 @@ var TableRowSkeletonView = () => {
 		}, i))
 	});
 };
-//#endregion
 export { TableRowSkeletonView };
 
 //# sourceMappingURL=TableRowSkeletonView.mjs.map

package/dist/js/packages/components/src/components/List/hooks/useAriaAnnounceSearchState.mjs

@@ -6,7 +6,7 @@ import { useList } from "./useList.mjs";
 import { useEffect } from "react";
 import { announce } from "@react-aria/live-announcer";
 import { useDebounceCallback } from "usehooks-ts";
-//#region src/components/List/hooks/useAriaAnnounceSearchState.ts
+// src/components/List/hooks/useAriaAnnounceSearchState.ts
 var announceDebounceMs = 600;
 var useAriaAnnounceSearchState = () => {
 	const formatter = useLocalizedStringFormatter(__locale_default, "List");
@@ -31,7 +31,6 @@ var useAriaAnnounceSearchState = () => {
 		isLoading
 	]);
 };
-//#endregion
 export { useAriaAnnounceSearchState };
 
 //# sourceMappingURL=useAriaAnnounceSearchState.mjs.map

package/dist/js/packages/components/src/components/List/hooks/useInfiniteScrollTrigger.mjs

@@ -2,7 +2,7 @@
 /* */
 import { useList } from "./useList.mjs";
 import { useEffect, useEffectEvent, useState } from "react";
-//#region src/components/List/hooks/useInfiniteScrollTrigger.ts
+// src/components/List/hooks/useInfiniteScrollTrigger.ts
 var loadMoreThresholdFactor = .2;
 var minLoadMoreThresholdRows = 1;
 var maxLoadMoreThresholdRows = 8;
@@ -27,7 +27,6 @@ var useInfiniteScrollTrigger = () => {
 		triggerIndex: list.infiniteScroll ? Math.max(0, list.items.entries.length - getLoadMoreThresholdRows(list.batches.batchSize)) : void 0
 	};
 };
-//#endregion
 export { useInfiniteScrollTrigger };
 
 //# sourceMappingURL=useInfiniteScrollTrigger.mjs.map

package/dist/js/packages/components/src/components/List/hooks/useLatestOnAction.mjs

@@ -0,0 +1,20 @@
+"use client"
+/* */
+import { useCallback, useLayoutEffect, useRef } from "react";
+// src/components/List/hooks/useLatestOnAction.ts
+/**
+* A stable invoker of the list's latest `onAction`, or `undefined` without one.
+* An event handler only ever needs to be the latest one, so items and rows do
+* not re-render for an inline `onAction`.
+*/
+var useLatestOnAction = (list) => {
+	const onActionRef = useRef(list.onAction);
+	useLayoutEffect(() => {
+		onActionRef.current = list.onAction;
+	});
+	const invokeOnAction = useCallback((data) => onActionRef.current?.(data), []);
+	return list.onAction ? invokeOnAction : void 0;
+};
+export { useLatestOnAction };
+
+//# sourceMappingURL=useLatestOnAction.mjs.map

package/dist/js/packages/components/src/components/List/hooks/useLatestOnAction.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLatestOnAction.mjs","names":[],"sources":["../../../../../../../../src/components/List/hooks/useLatestOnAction.ts"],"sourcesContent":["import { useCallback, useLayoutEffect, useRef } from \"react\";\nimport type List from \"@/components/List/model/List\";\n\n/**\n * A stable invoker of the list's latest `onAction`, or `undefined` without one.\n * An event handler only ever needs to be the latest one, so items and rows do\n * not re-render for an inline `onAction`.\n */\nexport const useLatestOnAction = (list: List<never>) => {\n  const onActionRef = useRef(list.onAction);\n  useLayoutEffect(() => {\n    onActionRef.current = list.onAction;\n  });\n  const invokeOnAction = useCallback(\n    (data: never) => onActionRef.current?.(data),\n    [],\n  );\n  return list.onAction ? invokeOnAction : undefined;\n};\n"],"mappings":";;;;;;;;;AAQA,IAAa,qBAAqB,SAAsB;CACtD,MAAM,cAAc,OAAO,KAAK,QAAQ;CACxC,sBAAsB;EACpB,YAAY,UAAU,KAAK;CAC7B,CAAC;CACD,MAAM,iBAAiB,aACpB,SAAgB,YAAY,UAAU,IAAI,GAC3C,CAAC,CACH;CACA,OAAO,KAAK,WAAW,iBAAiB,KAAA;AAC1C"}

package/dist/js/packages/components/src/components/List/hooks/useList.mjs

@@ -2,9 +2,8 @@
 /* */
 import { listContext } from "../listContext.mjs";
 import { useContext } from "react";
-//#region src/components/List/hooks/useList.ts
+// src/components/List/hooks/useList.ts
 var useList = () => useContext(listContext).list;
-//#endregion
 export { useList };
 
 //# sourceMappingURL=useList.mjs.map

package/dist/js/packages/components/src/components/List/hooks/useListMetadata.mjs

@@ -3,12 +3,11 @@
 import useSelector from "../../../lib/mobx/useSelector.mjs";
 import { listContext } from "../listContext.mjs";
 import { useContext } from "react";
-//#region src/components/List/hooks/useListMetadata.ts
+// src/components/List/hooks/useListMetadata.ts
 function useListMetadata() {
 	const { list } = useContext(listContext);
 	return useSelector(() => list?.loader?.loaderState?.metadata, [list]);
 }
-//#endregion
 export { useListMetadata };
 
 //# sourceMappingURL=useListMetadata.mjs.map

package/dist/js/packages/components/src/components/List/hooks/useListSelector.mjs

@@ -0,0 +1,17 @@
+"use client"
+/* */
+import { listStoreContext } from "../listContext.mjs";
+import { useContext, useSyncExternalStore } from "react";
+// src/components/List/hooks/useListSelector.ts
+/**
+* A value read from the list model, re-rendering only when it changes. The
+* selector has to return a primitive or a value that keeps its identity.
+*/
+var useListSelector = (selector) => {
+	const store = useContext(listStoreContext);
+	const getValue = () => selector(store.getList());
+	return useSyncExternalStore(store.subscribe, getValue, getValue);
+};
+export { useListSelector };
+
+//# sourceMappingURL=useListSelector.mjs.map

package/dist/js/packages/components/src/components/List/hooks/useListSelector.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useListSelector.mjs","names":[],"sources":["../../../../../../../../src/components/List/hooks/useListSelector.ts"],"sourcesContent":["import { useContext, useSyncExternalStore } from \"react\";\nimport { listStoreContext } from \"@/components/List/listContext\";\nimport type List from \"@/components/List/model/List\";\n\n/**\n * A value read from the list model, re-rendering only when it changes. The\n * selector has to return a primitive or a value that keeps its identity.\n */\nexport const useListSelector = <R, T = never>(\n  selector: (list: List<T>) => R,\n): R => {\n  const store = useContext(listStoreContext);\n  const getValue = () => selector(store.getList() as unknown as List<T>);\n  return useSyncExternalStore(store.subscribe, getValue, getValue);\n};\n"],"mappings":";;;;;;;;;AAQA,IAAa,mBACX,aACM;CACN,MAAM,QAAQ,WAAW,gBAAgB;CACzC,MAAM,iBAAiB,SAAS,MAAM,QAAQ,CAAuB;CACrE,OAAO,qBAAqB,MAAM,WAAW,UAAU,QAAQ;AACjE"}

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

@@ -1,9 +1,38 @@
 "use client"
 /* */
-import { createContext } from "react";
-//#region src/components/List/listContext.ts
+import { createContext, useLayoutEffect, useState } from "react";
+// src/components/List/listContext.ts
 var listContext = createContext({});
-//#endregion
-export { listContext };
+/**
+* Hands the committed list model to `useListSelector` without changing the
+* context value. The model is rebuilt on every render of `List`; read from
+* `listContext`, it re-renders every consumer, including the ones inside items
+* that skip their own render. A selector re-renders only when the value it
+* reads changes.
+*/
+var ListContextStore = class ListContextStore {
+	list;
+	listeners = /* @__PURE__ */ new Set();
+	constructor(list) {
+		this.list = list;
+	}
+	static useNew(list) {
+		const store = useState(() => new ListContextStore(list))[0];
+		useLayoutEffect(() => {
+			store.list = list;
+			store.listeners.forEach((listener) => listener());
+		});
+		return store;
+	}
+	getList = () => this.list;
+	subscribe = (listener) => {
+		this.listeners.add(listener);
+		return () => {
+			this.listeners.delete(listener);
+		};
+	};
+};
+var listStoreContext = createContext(new ListContextStore(void 0));
+export { ListContextStore, listContext, listStoreContext };
 
 //# sourceMappingURL=listContext.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"listContext.mjs","names":[],"sources":["../../../../../../../src/components/List/listContext.ts"],"sourcesContent":["import { createContext } from \"react\";\nimport type List from \"@/components/List/model/List\";\n\ninterface ListContext {\n  list: List<never>;\n}\n\nexport const listContext = createContext<ListContext>({} as ListContext);\n"],"mappings":";;;;AAOA,IAAa,cAAc,cAA2B,CAAC,CAAgB"}
+{"version":3,"file":"listContext.mjs","names":[],"sources":["../../../../../../../src/components/List/listContext.ts"],"sourcesContent":["import { createContext, useLayoutEffect, useState } from \"react\";\nimport type List from \"@/components/List/model/List\";\n\ninterface ListContext {\n  list: List<never>;\n}\n\nexport const listContext = createContext<ListContext>({} as ListContext);\n\n/**\n * Hands the committed list model to `useListSelector` without changing the\n * context value. The model is rebuilt on every render of `List`; read from\n * `listContext`, it re-renders every consumer, including the ones inside items\n * that skip their own render. A selector re-renders only when the value it\n * reads changes.\n */\nexport class ListContextStore {\n  private list: List<never>;\n  private readonly listeners = new Set<() => void>();\n\n  public constructor(list: List<never>) {\n    this.list = list;\n  }\n\n  public static useNew(list: List<never>): ListContextStore {\n    const store = useState(() => new ListContextStore(list))[0];\n    useLayoutEffect(() => {\n      store.list = list;\n      store.listeners.forEach((listener) => listener());\n    });\n    return store;\n  }\n\n  public readonly getList = (): List<never> => this.list;\n\n  public readonly subscribe = (listener: () => void): (() => void) => {\n    this.listeners.add(listener);\n    return () => {\n      this.listeners.delete(listener);\n    };\n  };\n}\n\nexport const listStoreContext = createContext(\n  new ListContextStore(undefined as unknown as List<never>),\n);\n"],"mappings":";;;;AAOA,IAAa,cAAc,cAA2B,CAAC,CAAgB;;;;;;;;AASvE,IAAa,mBAAb,MAAa,iBAAiB;CAC5B;CACA,4BAA6B,IAAI,IAAgB;CAEjD,YAAmB,MAAmB;EACpC,KAAK,OAAO;CACd;CAEA,OAAc,OAAO,MAAqC;EACxD,MAAM,QAAQ,eAAe,IAAI,iBAAiB,IAAI,CAAC,CAAC,CAAC;EACzD,sBAAsB;GACpB,MAAM,OAAO;GACb,MAAM,UAAU,SAAS,aAAa,SAAS,CAAC;EAClD,CAAC;EACD,OAAO;CACT;CAEA,gBAA6C,KAAK;CAElD,aAA6B,aAAuC;EAClE,KAAK,UAAU,IAAI,QAAQ;EAC3B,aAAa;GACX,KAAK,UAAU,OAAO,QAAQ;EAChC;CACF;AACF;AAEA,IAAa,mBAAmB,cAC9B,IAAI,iBAAiB,KAAA,CAAmC,CAC1D"}

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

@@ -16,7 +16,7 @@ import { ListViewMode } from "./ListViewMode.mjs";
 import { useSettings } from "../../SettingsProvider/SettingsProvider.mjs";
 import { useEffect } from "react";
 import invariant from "invariant";
-//#region src/components/List/model/List.ts
+// src/components/List/model/List.ts
 var List = class List {
 	filters;
 	itemView;
@@ -43,6 +43,7 @@ var List = class List {
 		const { settingStorageKey, itemView, table, filters = [], sorting = [], batchesController, onChange, loader, search, onAction, getItemId, defaultViewMode, accordion = false, infiniteScroll = false, loadingItemsCount = 5, settingsStorageDefaults, emptyView, emptySearchResultView, ...componentProps } = shape;
 		const warnDeprecation = useWarnDeprecation();
 		if (itemView?.fallback !== void 0) warnDeprecation("The 'fallback' prop is deprecated and will be removed in a future release. Use 'loadingView' instead.");
+		if (itemView?.dependencies !== void 0) warnDeprecation("The 'dependencies' prop of 'List.Item' is deprecated and will be removed in a future release. Use 'renderDependencies' instead.");
 		this.settingsStorageDefaults = settingsStorageDefaults;
 		const generalSettingsStore = useSettings();
 		this.settingsStorage = settingStorageKey && generalSettingsStore ? new ListSettingsStore(this, generalSettingsStore, { storageKey: settingStorageKey }) : void 0;
@@ -113,7 +114,6 @@ var List = class List {
 		return !this.loader.useIsLoading() && this.items.entries.length === 0;
 	}
 };
-//#endregion
 export { List, List as default };
 
 //# sourceMappingURL=List.mjs.map