@mailstep/design-system 0.8.26 → 0.8.27-beta.1

package/README.md

@@ -1,76 +1,76 @@
-# Mailstep Design-system
-
-Live demo here: https://mailstep.gitlab.io/mailwise/mw2/design-system/storybook 
-
-## Peer dependencies
-- @xstyled/styled-components
-- styled-component
-- react-router
-- react-router-dom
-
-### How to develoop
-```
-yarn install
-yarn dev
-```
-
-### How to use
-```
-yarn add @mailstep/design-system
-```
-and add `import 'swiper/css'` somewhere to the root app.
-
-
-#### How to publish
-In root folder run 
-
-```
-npm run build
-npm run deploy
-```
-
-## Components
-There are Elements, Blocks and Forms components. Also you can use ThemeProvider and Utils package
-
-### Elements
-| Component   |      Description      | Info  |
-|----------|:-------------:|------:|
-| Alert |  TBD | [More info](ui/Elements/Alert/README.md) |
-| Avatar |  TBD | [More info](ui/Elements/Avatar/README.md) |
-| Badge |  TBD | [More info](ui/Elements/Badge/README.md) |
-| BorderedBox |  TBD | [More info](ui/Elements/BorderedBox/README.md) |
-| Button |  TBD | [More info](ui/Elements/Button/README.md) |
-| Card |  TBD | [More info](ui/Elements/Card/README.md) |
-| DialogOverlay |  TBD | [More info](ui/Elements/DialogOverlay/README.md) |
-| Dropdown |  TBD | [More info](ui/Elements/Dropdown/README.md) |
-| ErrorMessage |  TBD | [More info](ui/Elements/ErrorMessage/README.md) |
-| Icon |  TBD | [More info](ui/Elements/Icon/README.md) |
-| Image |  TBD | [More info](ui/Elements/Image/README.md) |
-| Label |  TBD | [More info](ui/Elements/Label/README.md) |
-| Link |  TBD | [More info](ui/Elements/Link/README.md) |
-| Logo |  TBD | [More info](ui/Elements/Logo/README.md) |
-| Overlay |  TBD | [More info](ui/Elements/Overlay/README.md) |
-| Pagination |  TBD | [More info](ui/Elements/Pagination/README.md) |
-| Paragraph |  TBD | [More info](ui/Elements/Paragraph/README.md) |
-| Spinner |  TBD | [More info](ui/Elements/Spinner/README.md) |
-
-### Blocks
-| Component   |      Description      | Info  |
-|----------|:-------------:|------:|
-| TBD |  TBD | TBD |
-
-### Forms
-| Component   |      Description      | Info  |
-|----------|:-------------:|------:|
-| TBD |  TBD | TBD |
-
-### System
-| Component   |      Description      | Info  |
-|----------|:-------------:|------:|
-| Fonts |  Import adjusted fonts of inter | TBD |
-
-### Theme Provider
-| Component   |      Description      | Info  |
-|----------|:-------------:|------:|
-| Theme Provider |  TBD | [More info](ui/ThemeProvider/README.md) |
-
+# Mailstep Design-system
+
+Live demo here: https://mailstep.gitlab.io/mailwise/mw2/design-system/storybook 
+
+## Peer dependencies
+- @xstyled/styled-components
+- styled-component
+- react-router
+- react-router-dom
+
+### How to develoop
+```
+yarn install
+yarn dev
+```
+
+### How to use
+```
+yarn add @mailstep/design-system
+```
+and add `import 'swiper/css'` somewhere to the root app.
+
+
+#### How to publish
+In root folder run 
+
+```
+npm run build
+npm run deploy
+```
+
+## Components
+There are Elements, Blocks and Forms components. Also you can use ThemeProvider and Utils package
+
+### Elements
+| Component   |      Description      | Info  |
+|----------|:-------------:|------:|
+| Alert |  TBD | [More info](ui/Elements/Alert/README.md) |
+| Avatar |  TBD | [More info](ui/Elements/Avatar/README.md) |
+| Badge |  TBD | [More info](ui/Elements/Badge/README.md) |
+| BorderedBox |  TBD | [More info](ui/Elements/BorderedBox/README.md) |
+| Button |  TBD | [More info](ui/Elements/Button/README.md) |
+| Card |  TBD | [More info](ui/Elements/Card/README.md) |
+| DialogOverlay |  TBD | [More info](ui/Elements/DialogOverlay/README.md) |
+| Dropdown |  TBD | [More info](ui/Elements/Dropdown/README.md) |
+| ErrorMessage |  TBD | [More info](ui/Elements/ErrorMessage/README.md) |
+| Icon |  TBD | [More info](ui/Elements/Icon/README.md) |
+| Image |  TBD | [More info](ui/Elements/Image/README.md) |
+| Label |  TBD | [More info](ui/Elements/Label/README.md) |
+| Link |  TBD | [More info](ui/Elements/Link/README.md) |
+| Logo |  TBD | [More info](ui/Elements/Logo/README.md) |
+| Overlay |  TBD | [More info](ui/Elements/Overlay/README.md) |
+| Pagination |  TBD | [More info](ui/Elements/Pagination/README.md) |
+| Paragraph |  TBD | [More info](ui/Elements/Paragraph/README.md) |
+| Spinner |  TBD | [More info](ui/Elements/Spinner/README.md) |
+
+### Blocks
+| Component   |      Description      | Info  |
+|----------|:-------------:|------:|
+| TBD |  TBD | TBD |
+
+### Forms
+| Component   |      Description      | Info  |
+|----------|:-------------:|------:|
+| TBD |  TBD | TBD |
+
+### System
+| Component   |      Description      | Info  |
+|----------|:-------------:|------:|
+| Fonts |  Import adjusted fonts of inter | TBD |
+
+### Theme Provider
+| Component   |      Description      | Info  |
+|----------|:-------------:|------:|
+| Theme Provider |  TBD | [More info](ui/ThemeProvider/README.md) |
+

package/package.json

@@ -1,147 +1,146 @@
-{
-  "name": "@mailstep/design-system",
-  "version": "0.8.26",
-  "license": "ISC",
-  "type": "module",
-  "main": "./ui/index.js",
-  "module": "./ui/index.es.js",
-  "types": "./ui/index.d.ts",
-  "files": [
-    "ui",
-    "assets"
-  ],
-  "scripts": {
-    "storybook": "storybook dev -p 6006",
-    "build": "rm -rf ./build && tsc && vite build --emptyOutDir && cp package.json build && cp README.md build",
-    "build:win": "tsc && vite build --emptyOutDir && copy package.json build && copy README.md build",
-    "build-storybook": "storybook build",
-    "deploy": "npm run build && npm publish ./build",
-    "deploy:win": "npm run build:win && npm publish ./build",
-    "dev": "yarn storybook",
-    "test": "echo \"The tests are still waiting to be written, but it seems like they're really good at procrastinating!\"",
-    "lint": "eslint ./packages/ui/**/*.{ts,tsx}",
-    "prepare": "husky install"
-  },
-  "lint-staged": {
-    "*.{js,ts,tsx}": "yarn eslint --fix"
-  },
-  "devDependencies": {
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/modifiers": "^9.0.0",
-    "@dnd-kit/sortable": "^10.0.0",
-    "@fortawesome/fontawesome-svg-core": "^6.3.0",
-    "@fortawesome/free-brands-svg-icons": "^6.1.1",
-    "@fortawesome/pro-duotone-svg-icons": "^6.0.0",
-    "@fortawesome/pro-light-svg-icons": "^6.0.0",
-    "@fortawesome/pro-regular-svg-icons": "^6.0.0",
-    "@fortawesome/pro-solid-svg-icons": "^6.3.0",
-    "@fortawesome/react-fontawesome": "^0.2.0",
-    "@lingui/core": "^5.0.0",
-    "@lingui/react": "^5.0.0",
-    "@popperjs/core": "^2.11.8",
-    "@storybook/addon-designs": "^11.1.2",
-    "@storybook/addon-docs": "10.2.8",
-    "@storybook/addon-links": "10.2.8",
-    "@storybook/react-webpack5": "10.2.8",
-    "@svgr/rollup": "^8.0.1",
-    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
-    "@types/faker": "^4.1.11",
-    "@types/lodash": "^4.17.13",
-    "@types/luxon": "^3.4.2",
-    "@types/node": "^20.1.7",
-    "@types/react": "^19.2.2",
-    "@types/react-beautiful-dnd": "^13.1.2",
-    "@types/react-dom": "^19.2.2",
-    "@types/react-helmet": "^6.1.11",
-    "@types/react-router": "^5.1.20",
-    "@types/react-router-dom": "^5.3.3",
-    "@types/styled-components": "^5.1.26",
-    "@typescript-eslint/eslint-plugin": "^5.59.6",
-    "@typescript-eslint/parser": "^5.59.6",
-    "@vitejs/plugin-react-swc": "^4.3.0",
-    "@xstyled/styled-components": "^3.8.0",
-    "eslint": "^8.41.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-config-standard-with-typescript": "^34.0.1",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-n": "^17.9.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-promise": "^6.6.0",
-    "eslint-plugin-react": "^7.35.0",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-perf": "^3.3.2",
-    "eslint-plugin-storybook": "10.2.8",
-    "faker": "^5.1.0",
-    "husky": "^9.1.7",
-    "immer": "^9.0.19",
-    "lint-staged": "^16.4.0",
-    "lodash": "^4.17.21",
-    "luxon": "^3.4.4",
-    "moment": "^2.30.1",
-    "prettier": "2.8.8",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "react-helmet": "^6.1.0",
-    "react-image": "^4.1.0",
-    "react-onclickoutside": "^6.13.0",
-    "react-popper": "^2.3.0",
-    "react-redux": "*",
-    "react-router": "^5.1.2",
-    "react-router-dom": "^5.1.2",
-    "react-script": "^2.0.5",
-    "react-select": "^5.10.0",
-    "react-use-draggable-scroll": "^0.4.7",
-    "redux": ">=4.0.5",
-    "reselect": "5.0.0-alpha.2",
-    "storybook": "10.2.8",
-    "string-width": "6.1.0",
-    "styled-components": "^5.3.10",
-    "swiper": "^11.0.3",
-    "tslib": "^2.6.2",
-    "typescript": "^5.9.3",
-    "vite": "^8.0.9",
-    "vite-plugin-dts": "^3.6.4",
-    "vite-plugin-static-copy": "^1.0.0",
-    "webpack": "^5.82.1"
-  },
-  "peerDependencies": {
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/modifiers": "^9.0.0",
-    "@dnd-kit/sortable": "^10.0.0",
-    "@fortawesome/fontawesome-svg-core": "^6.3.0",
-    "@fortawesome/free-brands-svg-icons": "^6.1.1",
-    "@fortawesome/pro-duotone-svg-icons": "^6.0.0",
-    "@fortawesome/pro-light-svg-icons": "^6.0.0",
-    "@fortawesome/pro-regular-svg-icons": "^6.0.0",
-    "@fortawesome/pro-solid-svg-icons": "^6.3.0",
-    "@fortawesome/react-fontawesome": "^0.2.0",
-    "@lingui/core": "^5.0.0",
-    "@lingui/react": "^5.0.0",
-    "@popperjs/core": "^2.11.8",
-    "@xstyled/styled-components": "^3.8.0",
-    "immer": "^9.0.19",
-    "lodash": "^4.17.21",
-    "luxon": "^3.4.4",
-    "moment": "^2.30.1",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "react-helmet": "^6.1.0",
-    "react-image": "^4.1.0",
-    "react-onclickoutside": "^6.13.0",
-    "react-popper": "^2.3.0",
-    "react-redux": ">=4.0.5",
-    "react-router": "^5.1.2",
-    "react-router-dom": "^5.1.2",
-    "react-select": "^5.10.0",
-    "react-use-draggable-scroll": "^0.4.7",
-    "redux": ">=4.0.5",
-    "reselect": "5.0.0-alpha.2",
-    "styled-components": "^5.3.10",
-    "swiper": "^11.0.3",
-    "tslib": "^2.6.2",
-    "typescript": "^5.9.3"
-  },
-  "resolutions": {
-    "jackspeak": "2.1.1"
-  }
-}
+{
+  "name": "@mailstep/design-system",
+  "version": "0.8.27-beta.1",
+  "license": "ISC",
+  "type": "module",
+  "main": "./ui/index.js",
+  "module": "./ui/index.js",
+  "types": "./ui/index.d.ts",
+  "files": [
+    "ui",
+    "assets"
+  ],
+  "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "build": "rm -rf ./build && tsdown && tsc --emitDeclarationOnly && cp package.json build && cp README.md build",
+    "build:win": "tsdown && tsc --emitDeclarationOnly && copy package.json build && copy README.md build",
+    "build-storybook": "storybook build",
+    "deploy": "npm run build && npm publish ./build",
+    "deploy:win": "npm run build:win && npm publish ./build",
+    "dev": "yarn storybook",
+    "test": "echo \"The tests are still waiting to be written, but it seems like they're really good at procrastinating!\"",
+    "lint": "eslint ./packages/ui/**/*.{ts,tsx}",
+    "prepare": "husky install"
+  },
+  "lint-staged": {
+    "*.{js,ts,tsx}": "yarn eslint --fix"
+  },
+  "devDependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@fortawesome/fontawesome-svg-core": "^6.3.0",
+    "@fortawesome/free-brands-svg-icons": "^6.1.1",
+    "@fortawesome/pro-duotone-svg-icons": "^6.0.0",
+    "@fortawesome/pro-light-svg-icons": "^6.0.0",
+    "@fortawesome/pro-regular-svg-icons": "^6.0.0",
+    "@fortawesome/pro-solid-svg-icons": "^6.3.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@lingui/core": "^5.0.0",
+    "@lingui/react": "^5.0.0",
+    "@popperjs/core": "^2.11.8",
+    "@storybook/addon-designs": "^11.1.2",
+    "@storybook/addon-docs": "10.2.8",
+    "@storybook/addon-links": "10.2.8",
+    "@storybook/react-webpack5": "10.2.8",
+    "@svgr/rollup": "^8.0.1",
+    "@swc/core": "^1.15.30",
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@types/faker": "^4.1.11",
+    "@types/lodash": "^4.17.13",
+    "@types/luxon": "^3.4.2",
+    "@types/node": "^20.1.7",
+    "@types/react": "^19.2.2",
+    "@types/react-beautiful-dnd": "^13.1.2",
+    "@types/react-dom": "^19.2.2",
+    "@types/react-helmet": "^6.1.11",
+    "@types/react-router": "^5.1.20",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/styled-components": "^5.1.26",
+    "@typescript-eslint/eslint-plugin": "^5.59.6",
+    "@typescript-eslint/parser": "^5.59.6",
+    "@xstyled/styled-components": "^3.8.0",
+    "babel-loader": "^10.1.1",
+    "eslint": "^8.41.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-config-standard-with-typescript": "^34.0.1",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-n": "^17.9.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-promise": "^6.6.0",
+    "eslint-plugin-react": "^7.35.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-perf": "^3.3.2",
+    "eslint-plugin-storybook": "10.2.8",
+    "faker": "^5.1.0",
+    "husky": "^9.1.7",
+    "immer": "^9.0.19",
+    "lint-staged": "^16.4.0",
+    "lodash": "^4.18.0",
+    "luxon": "^3.4.4",
+    "moment": "^2.30.1",
+    "prettier": "2.8.8",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-helmet": "^6.1.0",
+    "react-image": "^4.1.0",
+    "react-onclickoutside": "^6.13.0",
+    "react-popper": "^2.3.0",
+    "react-redux": "*",
+    "react-router": "^5.1.2",
+    "react-router-dom": "^5.1.2",
+    "react-script": "^2.0.5",
+    "react-select": "^5.10.0",
+    "react-use-draggable-scroll": "^0.4.7",
+    "redux": ">=4.0.5",
+    "reselect": "5.0.0-alpha.2",
+    "storybook": "10.2.8",
+    "string-width": "6.1.0",
+    "styled-components": "^5.3.10",
+    "swiper": "^11.0.3",
+    "tsdown": "^0.21.9",
+    "tslib": "^2.6.2",
+    "typescript": "^5.9.3",
+    "webpack": "^5.82.1"
+  },
+  "peerDependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@fortawesome/fontawesome-svg-core": "^6.3.0",
+    "@fortawesome/free-brands-svg-icons": "^6.1.1",
+    "@fortawesome/pro-duotone-svg-icons": "^6.0.0",
+    "@fortawesome/pro-light-svg-icons": "^6.0.0",
+    "@fortawesome/pro-regular-svg-icons": "^6.0.0",
+    "@fortawesome/pro-solid-svg-icons": "^6.3.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@lingui/core": "^5.0.0",
+    "@lingui/react": "^5.0.0",
+    "@popperjs/core": "^2.11.8",
+    "@xstyled/styled-components": "^3.8.0",
+    "immer": "^9.0.19",
+    "lodash": "^4.17.21",
+    "luxon": "^3.4.4",
+    "moment": "^2.30.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-helmet": "^6.1.0",
+    "react-image": "^4.1.0",
+    "react-onclickoutside": "^6.13.0",
+    "react-popper": "^2.3.0",
+    "react-redux": ">=4.0.5",
+    "react-router": "^5.1.2",
+    "react-router-dom": "^5.1.2",
+    "react-select": "^5.10.0",
+    "react-use-draggable-scroll": "^0.4.7",
+    "redux": ">=4.0.5",
+    "reselect": "5.0.0-alpha.2",
+    "styled-components": "^5.3.10",
+    "swiper": "^11.0.3",
+    "tslib": "^2.6.2",
+    "typescript": "^5.9.3"
+  },
+  "resolutions": {
+    "jackspeak": "2.1.1"
+  }
+}

package/ui/Blocks/CommonGrid/CommonGrid.d.ts

@@ -1,7 +1,6 @@
-import { FC } from 'react';
-import { DragEndEvent } from '@dnd-kit/core';
-import { CommonGridProps, FiltersConfig, ColumnDefinition } from './types';
-
+import type { FC } from 'react';
+import type { DragEndEvent } from '@dnd-kit/core';
+import type { CommonGridProps, FiltersConfig, ColumnDefinition } from './types';
 type Props = CommonGridProps & {
     filters?: FiltersConfig;
     handleDragEnd: (item: DragEndEvent) => void;

package/ui/Blocks/CommonGrid/CommonGrid.js

@@ -0,0 +1,107 @@
+import { getGroups } from "./utils/index.js";
+import DataRow from "./components/DataRow.js";
+import FilterRow from "./components/FilterRow.js";
+import FloatingButton from "./components/FloatingButton/FloatingButton.js";
+import { GridStatus } from "./components/GridStatus/index.js";
+import GroupRow from "./components/GroupRow.js";
+import HeadRow from "./components/HeadRow.js";
+import OversizedScroll from "./components/OversizedScroll.js";
+import useColumnSizes from "./hooks/useColumnSizes.js";
+import useRowsKeyControls from "./hooks/useRowsKeyControls.js";
+import useUxReset from "./hooks/useUxReset.js";
+import { initialState } from "./store/index.js";
+import { useCallback, useMemo } from "react";
+import { x } from "@xstyled/styled-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Blocks/CommonGrid/CommonGrid.tsx
+const rowsStyles = { outline: "none" };
+const defaultVoidFunction = (...args) => null;
+const defaultUxState = initialState.uxState;
+const defaultColumnsWidth = {};
+const CommonGrid = ({ filters, comparators, handleDragEnd, gridSelectors, gridActions, isLoading, rowsData, hasColouredRows, actionColumnDefinition, allowRowSelect, allowRowSelectOnAction, onRowAction, onRowClick, onAsyncLoadFilterOptions, columnLayout = "normal", displayColumnsDefinitions, className, minColumnWidth, errorMessage, floatingButtonProps, hasGroups, hasFilters, isSortTerminated }) => {
+	const { uxState = defaultUxState, columnsWidth = defaultColumnsWidth, columnsWidthVariant, page = 1, filter, sorting, rowsPerPage = 10 } = gridSelectors;
+	const { clearUxState, handleUxChange, addFilter = defaultVoidFunction, addSorting = defaultVoidFunction, setColumnWidth = defaultVoidFunction } = gridActions;
+	const handleRowsKeyDown = useRowsKeyControls(rowsData, uxState, handleUxChange);
+	useUxReset(rowsData, uxState, clearUxState);
+	const { displayColumnsWidth, totalColumnsWidth, gridBoxRef, handleResizeDrag } = useColumnSizes(displayColumnsDefinitions, columnsWidth, columnsWidthVariant, setColumnWidth, columnLayout, minColumnWidth);
+	const groups = useMemo(() => {
+		return getGroups(displayColumnsDefinitions);
+	}, [displayColumnsDefinitions]);
+	const commonGridRef = useCallback((node) => {
+		gridBoxRef.current = node;
+	}, []);
+	const isEmpty = !isLoading && !errorMessage && (!rowsData || rowsData.length < 1);
+	const hasFloatingChildren = isLoading || errorMessage || isEmpty;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(x.div, {
+		className: className || "",
+		children: /* @__PURE__ */ jsxs(OversizedScroll, {
+			columnLayout,
+			totalColumnsWidth,
+			floatingChildren: hasFloatingChildren && /* @__PURE__ */ jsx(GridStatus, {
+				isLoading,
+				isEmpty,
+				errorMessage
+			}),
+			ref: commonGridRef,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "gridHead",
+				children: [
+					hasGroups && /* @__PURE__ */ jsx(GroupRow, {
+						actionColumn: actionColumnDefinition,
+						columns: displayColumnsDefinitions,
+						displayColumnsWidth,
+						groups
+					}),
+					/* @__PURE__ */ jsx(HeadRow, {
+						columns: displayColumnsDefinitions,
+						onAddSort: addSorting,
+						columnLayout,
+						sortingValues: sorting,
+						displayColumnsWidth,
+						handleResizeDrag,
+						groups,
+						handleDragEnd,
+						isSortTerminated
+					}),
+					hasFilters && /* @__PURE__ */ jsx(FilterRow, {
+						filters,
+						comparators,
+						columns: displayColumnsDefinitions,
+						actionColumn: actionColumnDefinition,
+						onChange: addFilter,
+						filterValues: filter,
+						displayColumnsWidth,
+						groups,
+						rowsData,
+						uxState,
+						handleUxChange,
+						onAsyncLoadFilterOptions
+					})
+				]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "body flx_1",
+				style: rowsStyles,
+				tabIndex: -1,
+				onKeyDown: handleRowsKeyDown,
+				children: !isLoading && rowsData && displayColumnsDefinitions && rowsData.map((row, index) => {
+					return /* @__PURE__ */ jsx(DataRow, {
+						rowData: row,
+						rowIndex: rowsPerPage * page + (index + 1) - rowsPerPage,
+						uxState,
+						isEven: hasColouredRows && (index + 1) % 2 === 0,
+						allowRowSelect,
+						allowRowSelectOnAction,
+						onRowAction,
+						onUxChange: handleUxChange,
+						onRowClick,
+						columns: displayColumnsDefinitions,
+						displayColumnsWidth,
+						groups
+					}, row.id);
+				})
+			})]
+		})
+	}), floatingButtonProps && /* @__PURE__ */ jsx(FloatingButton, { ...floatingButtonProps })] });
+};
+//#endregion
+export { CommonGrid as default };

package/ui/Blocks/CommonGrid/CommonGridContainer.d.ts

@@ -1,5 +1,4 @@
-import { FC } from 'react';
-import { GridProps } from './types';
-
+import type { FC } from 'react';
+import type { GridProps } from './types';
 declare const CommonGridContainer: FC<GridProps>;
 export default CommonGridContainer;