@mittwald/flow-react-components 1.3.0-next.25 → 1.3.0-next.27

package/dist/js/packages/components/src/components/Image/Image.mjs

@@ -7,8 +7,8 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/Image/Image.tsx
 /** @flr-generate all */
 var Image = flowComponent("Image", (props) => {
-	const { className, withBorder, style, aspectRatio, width, height, ref, ...rest } = props;
-	const rootClassName = clsx(Image_module_default.image, withBorder && Image_module_default.border, aspectRatio && Image_module_default.aspectRatio, className);
+	const { className, withBorder, withRoundedCorners = true, style, aspectRatio, width, height, ref, ...rest } = props;
+	const rootClassName = clsx(Image_module_default.image, withBorder && Image_module_default.border, withRoundedCorners && Image_module_default.roundedCorners, aspectRatio && Image_module_default.aspectRatio, className);
 	return /* @__PURE__ */ jsx("img", {
 		ref,
 		className: rootClassName,

package/dist/js/packages/components/src/components/Image/Image.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Image.mjs","names":[],"sources":["../../../../../../../src/components/Image/Image.tsx"],"sourcesContent":["import type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\nimport type { ComponentProps } from \"react\";\nimport styles from \"./Image.module.scss\";\n\nexport interface ImageProps\n  extends\n    Omit<ComponentProps<\"img\">, \"ref\">,\n    FlowComponentProps<HTMLImageElement> {\n  /** Display the image with border and rounded edges. */\n  withBorder?: boolean;\n  /**\n   * The aspect ratio of the images container. Larger images will be centered\n   * and their overflow will be hidden.\n   */\n  aspectRatio?: number;\n}\n\n/** @flr-generate all */\nexport const Image = flowComponent(\"Image\", (props) => {\n  const {\n    className,\n    withBorder,\n    style,\n    aspectRatio,\n    width,\n    height,\n    ref,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.image,\n    withBorder && styles.border,\n    aspectRatio && styles.aspectRatio,\n    className,\n  );\n\n  return (\n    <img\n      ref={ref}\n      className={rootClassName}\n      style={{\n        ...style,\n        ...(aspectRatio !== undefined && { aspectRatio }),\n        ...(width !== undefined && { width }),\n        ...(height !== undefined && { height }),\n      }}\n      {...rest}\n    />\n  );\n});\n\nexport default Image;\n"],"mappings":";;;;;;;;AAoBA,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EACJ,WACA,YACA,OACA,aACA,OACA,QACA,KACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpB,qBAAO,OACP,cAAc,qBAAO,QACrB,eAAe,qBAAO,aACtB,SACF;CAEA,OACE,oBAAC,OAAD;EACO;EACL,WAAW;EACX,OAAO;GACL,GAAG;GACH,GAAI,gBAAgB,KAAA,KAAa,EAAE,YAAY;GAC/C,GAAI,UAAU,KAAA,KAAa,EAAE,MAAM;GACnC,GAAI,WAAW,KAAA,KAAa,EAAE,OAAO;EACvC;EACA,GAAI;CACL,CAAA;AAEL,CAAC"}
+{"version":3,"file":"Image.mjs","names":[],"sources":["../../../../../../../src/components/Image/Image.tsx"],"sourcesContent":["import type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\nimport type { ComponentProps } from \"react\";\nimport styles from \"./Image.module.scss\";\n\nexport interface ImageProps\n  extends\n    Omit<ComponentProps<\"img\">, \"ref\">,\n    FlowComponentProps<HTMLImageElement> {\n  /** Display the image with a border. */\n  withBorder?: boolean;\n  /**\n   * Display the image with rounded corners.\n   *\n   * @default true\n   */\n  withRoundedCorners?: boolean;\n  /**\n   * The aspect ratio of the images container. Larger images will be centered\n   * and their overflow will be hidden.\n   */\n  aspectRatio?: number;\n}\n\n/** @flr-generate all */\nexport const Image = flowComponent(\"Image\", (props) => {\n  const {\n    className,\n    withBorder,\n    withRoundedCorners = true,\n    style,\n    aspectRatio,\n    width,\n    height,\n    ref,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.image,\n    withBorder && styles.border,\n    withRoundedCorners && styles.roundedCorners,\n    aspectRatio && styles.aspectRatio,\n    className,\n  );\n\n  return (\n    <img\n      ref={ref}\n      className={rootClassName}\n      style={{\n        ...style,\n        ...(aspectRatio !== undefined && { aspectRatio }),\n        ...(width !== undefined && { width }),\n        ...(height !== undefined && { height }),\n      }}\n      {...rest}\n    />\n  );\n});\n\nexport default Image;\n"],"mappings":";;;;;;;;AA0BA,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EACJ,WACA,YACA,qBAAqB,MACrB,OACA,aACA,OACA,QACA,KACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpB,qBAAO,OACP,cAAc,qBAAO,QACrB,sBAAsB,qBAAO,gBAC7B,eAAe,qBAAO,aACtB,SACF;CAEA,OACE,oBAAC,OAAD;EACO;EACL,WAAW;EACX,OAAO;GACL,GAAG;GACH,GAAI,gBAAgB,KAAA,KAAa,EAAE,YAAY;GAC/C,GAAI,UAAU,KAAA,KAAa,EAAE,MAAM;GACnC,GAAI,WAAW,KAAA,KAAa,EAAE,OAAO;EACvC;EACA,GAAI;CACL,CAAA;AAEL,CAAC"}

package/dist/js/packages/components/src/components/Image/Image.module.mjs

@@ -3,13 +3,15 @@
 //#region src/components/Image/Image.module.scss
 var image = "flow--image";
 var border = "flow--image--border";
+var roundedCorners = "flow--image--rounded-corners";
 var aspectRatio = "flow--image--aspect-ratio";
 var Image_module_default = {
 	image,
 	border,
+	roundedCorners,
 	aspectRatio
 };
 //#endregion
-export { aspectRatio, border, Image_module_default as default, image };
+export { aspectRatio, border, Image_module_default as default, image, roundedCorners };
 
 //# sourceMappingURL=Image.module.mjs.map

package/dist/js/packages/components/src/components/Image/Image.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Image.module.mjs","names":[],"sources":["../../../../../../../src/components/Image/Image.module.scss"],"sourcesContent":[".image {\n  max-width: 100%;\n\n  &.border {\n    border-width: var(--image--border-width);\n    border-style: var(--image--border-style);\n    border-radius: var(--image--corner-radius);\n    border-color: var(--image--border-color);\n    overflow: hidden;\n  }\n\n  &:where(.aspectRatio) {\n    overflow-clip-margin: unset;\n    object-fit: cover;\n    width: fit-content;\n    overflow: hidden;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Image.module.mjs","names":[],"sources":["../../../../../../../src/components/Image/Image.module.scss"],"sourcesContent":[".image {\n  max-width: 100%;\n\n  &.border {\n    border-width: var(--image--border-width);\n    border-style: var(--image--border-style);\n    border-color: var(--image--border-color);\n  }\n\n  &.roundedCorners {\n    border-radius: var(--image--corner-radius);\n    overflow: hidden;\n  }\n\n  &:where(.aspectRatio) {\n    overflow-clip-margin: unset;\n    object-fit: cover;\n    width: fit-content;\n    overflow: hidden;\n  }\n}\n"],"mappings":""}

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

@@ -6,9 +6,8 @@ import { useList } from "../../hooks/useList.mjs";
 import { Item } from "./components/Item/Item.mjs";
 import ItemsGridListView from "../../../../views/ItemsGridListView.mjs";
 import { FallbackItems } from "./components/FallbackItems/FallbackItems.mjs";
-import { getLoadMoreThresholdRows, useInfiniteScrollTrigger } from "./hooks/useInfiniteScrollTrigger.mjs";
+import { useInfiniteScrollTrigger } from "../../hooks/useInfiniteScrollTrigger.mjs";
 import clsx from "clsx";
-import { useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/List/components/Items/Items.tsx
 var Items = () => {
@@ -17,16 +16,14 @@ var Items = () => {
 	const isLoading = list.loader.useIsLoading();
 	const isInitiallyLoading = list.loader.useIsInitiallyLoading();
 	const isLoadingMore = list.loader.useIsLoadingMore();
-	const triggerRef = useRef(null);
-	useInfiniteScrollTrigger(triggerRef);
+	const { triggerRef, triggerIndex } = useInfiniteScrollTrigger();
 	if (!list.itemView) return null;
-	const triggerIndex = Math.max(0, list.items.entries.length - getLoadMoreThresholdRows(list.batches.batchSize));
 	const items = list.items.entries.map((item, index) => /* @__PURE__ */ jsx(Item, {
 		data: item.data,
 		id: item.id,
 		list,
 		isTile: tiles,
-		triggerRef: list.infiniteScroll && index === triggerIndex ? triggerRef : void 0
+		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;

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

@@ -1 +1 @@
-{"version":3,"file":"Items.mjs","names":[],"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 { useRef } from \"react\";\nimport styles from \"./Items.module.scss\";\nimport { FallbackItems } from \"./components/FallbackItems\";\nimport {\n  getLoadMoreThresholdRows,\n  useInfiniteScrollTrigger,\n} from \"./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 = useRef<HTMLDivElement>(null);\n  useInfiniteScrollTrigger(triggerRef);\n\n  if (!list.itemView) {\n    return null;\n  }\n\n  const triggerIndex = Math.max(\n    0,\n    list.items.entries.length -\n      getLoadMoreThresholdRows(list.batches.batchSize),\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={\n        list.infiniteScroll && index === triggerIndex ? triggerRef : undefined\n      }\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":";;;;;;;;;;;;;AAcA,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,aAAa,OAAuB,IAAI;CAC9C,yBAAyB,UAAU;CAEnC,IAAI,CAAC,KAAK,UACR,OAAO;CAGT,MAAM,eAAe,KAAK,IACxB,GACA,KAAK,MAAM,QAAQ,SACjB,yBAAyB,KAAK,QAAQ,SAAS,CACnD;CAEA,MAAM,QAAQ,KAAK,MAAM,QAAQ,KAAK,MAAM,UAC1C,oBAAC,MAAD;EAEE,MAAM,KAAK;EACX,IAAI,KAAK;EACH;EACN,QAAQ;EACR,YACE,KAAK,kBAAkB,UAAU,eAAe,aAAa,KAAA;CAEhE,GARM,KAAK,EAQX,CACF;CAED,MAAM,gBAAgB,KACpB,qBAAO,OACP,aAAa,EAAE,KAAK,kBAAkB,kBAAkB,qBAAO,WAC/D,SAAS,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":[],"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,KACpB,qBAAO,OACP,aAAa,EAAE,KAAK,kBAAkB,kBAAkB,qBAAO,WAC/D,SAAS,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"}

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

@@ -1,6 +1,7 @@
 "use client"
 /* */
 import { useList } from "../../hooks/useList.mjs";
+import { useInfiniteScrollTrigger } from "../../hooks/useInfiniteScrollTrigger.mjs";
 import Table_module_default from "./Table.module.mjs";
 import TableView from "../../../../views/TableView.mjs";
 import TableHeaderView from "../../../../views/TableHeaderView.mjs";
@@ -18,14 +19,17 @@ var Table = () => {
 	const listIsEmpty = list.useIsEmpty();
 	const isLoading = list.loader.useIsLoading();
 	const isInitiallyLoading = list.loader.useIsInitiallyLoading();
+	const isLoadingMore = list.loader.useIsLoadingMore();
+	const { triggerRef, triggerIndex } = useInfiniteScrollTrigger();
 	if (!table || listIsEmpty) return null;
 	const rowAction = table.list.onAction;
-	const tableClassName = clsx(Table_module_default.table, isLoading && Table_module_default.isLoading, table.componentProps.className);
-	const rows = list.items.entries.map((item) => /* @__PURE__ */ jsx(TableRowView, {
+	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),
 		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

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

@@ -1 +1 @@
-{"version":3,"file":"Table.mjs","names":[],"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\";\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\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 && styles.isLoading,\n    table.componentProps.className,\n  );\n\n  const rows = list.items.entries.map((item) => (\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    >\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":";;;;;;;;;;;;;;AAYA,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;CAE7D,IAAI,CAAC,SAAS,aACZ,OAAO;CAGT,MAAM,YAAY,MAAM,KAAK;CAE7B,MAAM,iBAAiB,KACrB,qBAAO,OACP,aAAa,qBAAO,WACpB,MAAM,eAAe,SACvB;CAEA,MAAM,OAAO,KAAK,MAAM,QAAQ,KAAK,SACnC,oBAAC,cAAD;EACE,WAAW,KACT,qBAAO,KACP,aAAa,qBAAO,WACpB,MAAM,KAAK,IAAI,eAAe,SAChC;EAEA,IAAI,KAAK;EACT,UAAU,kBAAkB,UAAU,KAAK,IAAI,IAAI,KAAA;EACnD,GAAI,MAAM,KAAK,IAAI;EAElB,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,GAVP,KAAK,EAUE,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":[],"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,KACrB,qBAAO,OACP,aAAa,EAAE,KAAK,kBAAkB,kBAAkB,qBAAO,WAC/D,MAAM,eAAe,SACvB;CAEA,MAAM,OAAO,KAAK,MAAM,QAAQ,KAAK,MAAM,UACzC,oBAAC,cAAD;EACE,WAAW,KACT,qBAAO,KACP,aAAa,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"}

package/dist/js/packages/components/src/components/List/{components/Items/hooks → hooks}/useInfiniteScrollTrigger.mjs

@@ -1,34 +1,33 @@
 "use client"
 /* */
-import { useList } from "../../../hooks/useList.mjs";
-import { useEffect, useEffectEvent } from "react";
-//#region src/components/List/components/Items/hooks/useInfiniteScrollTrigger.ts
+import { useList } from "./useList.mjs";
+import { useEffect, useEffectEvent, useState } from "react";
+//#region src/components/List/hooks/useInfiniteScrollTrigger.ts
 var loadMoreThresholdFactor = .2;
 var minLoadMoreThresholdRows = 1;
 var maxLoadMoreThresholdRows = 8;
 var getLoadMoreThresholdRows = (batchSize) => Math.min(maxLoadMoreThresholdRows, Math.max(minLoadMoreThresholdRows, Math.round(batchSize * loadMoreThresholdFactor)));
-var useInfiniteScrollTrigger = (triggerRef) => {
+var useInfiniteScrollTrigger = () => {
 	const list = useList();
 	const isLoading = list.loader.useIsLoading();
-	const visibleItemsCount = list.batches.getVisibleItemsCount();
+	const [trigger, setTrigger] = useState(null);
 	const loadNextBatch = useEffectEvent(() => {
 		if (list.batches.hasNextBatch() && !isLoading) list.batches.nextBatch();
 	});
 	useEffect(() => {
-		const trigger = triggerRef.current;
 		if (!trigger) return;
 		const observer = new IntersectionObserver((entries) => {
 			if (entries.some((entry) => entry.isIntersecting)) loadNextBatch();
 		});
 		observer.observe(trigger);
 		return () => observer.disconnect();
-	}, [
-		loadNextBatch,
-		triggerRef,
-		visibleItemsCount
-	]);
+	}, [trigger]);
+	return {
+		triggerRef: setTrigger,
+		triggerIndex: list.infiniteScroll ? Math.max(0, list.items.entries.length - getLoadMoreThresholdRows(list.batches.batchSize)) : void 0
+	};
 };
 //#endregion
-export { getLoadMoreThresholdRows, useInfiniteScrollTrigger };
+export { useInfiniteScrollTrigger };
 
 //# sourceMappingURL=useInfiniteScrollTrigger.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useInfiniteScrollTrigger.mjs","names":[],"sources":["../../../../../../../../src/components/List/hooks/useInfiniteScrollTrigger.ts"],"sourcesContent":["import { useEffect, useEffectEvent, useState, type RefCallback } from \"react\";\nimport { useList } from \"./useList\";\n\nconst loadMoreThresholdFactor = 0.2;\nconst minLoadMoreThresholdRows = 1;\nconst maxLoadMoreThresholdRows = 8;\n\nconst getLoadMoreThresholdRows = (batchSize: number): number =>\n  Math.min(\n    maxLoadMoreThresholdRows,\n    Math.max(\n      minLoadMoreThresholdRows,\n      Math.round(batchSize * loadMoreThresholdFactor),\n    ),\n  );\n\ninterface InfiniteScrollTrigger {\n  /**\n   * Attach to whatever the view renders for `triggerIndex`. A callback ref, so\n   * the observer follows the trigger as it moves on with every loaded batch — a\n   * ref object would leave the effect without a signal that the element it\n   * observes has been replaced.\n   */\n  triggerRef: RefCallback<HTMLElement>;\n  /**\n   * Index of the item that loads the next batch once it scrolls into view, or\n   * `undefined` while infinite scrolling is off.\n   */\n  triggerIndex: number | undefined;\n}\n\nexport const useInfiniteScrollTrigger = (): InfiniteScrollTrigger => {\n  const list = useList();\n  const isLoading = list.loader.useIsLoading();\n  const [trigger, setTrigger] = useState<HTMLElement | null>(null);\n\n  const loadNextBatch = useEffectEvent(() => {\n    if (list.batches.hasNextBatch() && !isLoading) {\n      list.batches.nextBatch();\n    }\n  });\n\n  useEffect(() => {\n    if (!trigger) {\n      return;\n    }\n\n    const observer = new IntersectionObserver((entries) => {\n      if (entries.some((entry) => entry.isIntersecting)) {\n        loadNextBatch();\n      }\n    });\n    observer.observe(trigger);\n\n    return () => observer.disconnect();\n  }, [trigger]);\n\n  return {\n    triggerRef: setTrigger,\n    triggerIndex: list.infiniteScroll\n      ? Math.max(\n          0,\n          list.items.entries.length -\n            getLoadMoreThresholdRows(list.batches.batchSize),\n        )\n      : undefined,\n  };\n};\n"],"mappings":";;;;;AAGA,IAAM,0BAA0B;AAChC,IAAM,2BAA2B;AACjC,IAAM,2BAA2B;AAEjC,IAAM,4BAA4B,cAChC,KAAK,IACH,0BACA,KAAK,IACH,0BACA,KAAK,MAAM,YAAY,uBAAuB,CAChD,CACF;AAiBF,IAAa,iCAAwD;CACnE,MAAM,OAAO,QAAQ;CACrB,MAAM,YAAY,KAAK,OAAO,aAAa;CAC3C,MAAM,CAAC,SAAS,cAAc,SAA6B,IAAI;CAE/D,MAAM,gBAAgB,qBAAqB;EACzC,IAAI,KAAK,QAAQ,aAAa,KAAK,CAAC,WAClC,KAAK,QAAQ,UAAU;CAE3B,CAAC;CAED,gBAAgB;EACd,IAAI,CAAC,SACH;EAGF,MAAM,WAAW,IAAI,sBAAsB,YAAY;GACrD,IAAI,QAAQ,MAAM,UAAU,MAAM,cAAc,GAC9C,cAAc;EAElB,CAAC;EACD,SAAS,QAAQ,OAAO;EAExB,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,OAAO,CAAC;CAEZ,OAAO;EACL,YAAY;EACZ,cAAc,KAAK,iBACf,KAAK,IACH,GACA,KAAK,MAAM,QAAQ,SACjB,yBAAyB,KAAK,QAAQ,SAAS,CACnD,IACA,KAAA;CACN;AACF"}

package/dist/js/packages/design-tokens/dist/json-runtime/all-dark.mjs

@@ -1099,7 +1099,7 @@ var image = {
 		"path": ["image", "border-style"]
 	},
 	"border-color": {
-		"value": "#DCE9F7",
+		"value": "#8FA1B4",
 		"path": ["image", "border-color"]
 	}
 };