@mailstep/design-system 0.11.0 → 0.12.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.11.0",
+  "version": "0.12.0-beta.1",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Blocks/CommonGrid/components/Filters/ActionsFilter/ActionsFilter.js

@@ -5,8 +5,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region packages/ui/Blocks/CommonGrid/components/Filters/ActionsFilter/ActionsFilter.tsx
 const ActionsFilter = ({ actionColumn, rowsData, uxState, handleUxChange }) => {
 	const [allChecked, toggleCheckbox] = useToggleAllCheckbox(rowsData, uxState, handleUxChange);
-	const displayRowNumberLabel = actionColumn?.addRowNumbers;
-	const rowsNumberLabel = actionColumn?.addRowNumbersLabel ?? "#";
+	const rowsNumberLabel = actionColumn?.addRowNumbersLabel;
 	const displayCheckbox = actionColumn?.actionOptions?.length || actionColumn?.forceCheckboxes;
 	return /* @__PURE__ */ jsxs(x.div, {
 		display: "flex",
@@ -21,7 +20,7 @@ const ActionsFilter = ({ actionColumn, rowsData, uxState, handleUxChange }) => {
 				onChange: toggleCheckbox,
 				label: ""
 			}, "check-all")
-		}), displayRowNumberLabel && /* @__PURE__ */ jsx(x.div, {
+		}), actionColumn?.addRowNumbersLabel && /* @__PURE__ */ jsx(x.div, {
 			w: "100%",
 			pr: "12px",
 			display: "flex",

package/ui/Blocks/CommonGrid/components/gridCells/IconButtonInCell.js

@@ -19,7 +19,6 @@ const IconButtonInCell = ({ icon, isLoading, onClick, linkTo }) => {
 		"data-cy": `${icon ?? ""}IconBtn`,
 		cursor: "pointer",
 		h: "100%",
-		w: "100%",
 		display: "flex",
 		alignItems: "center",
 		justifyContent: "center",

package/ui/Blocks/CommonGrid/components/gridCells/RowActionsCell.d.ts

@@ -5,6 +5,7 @@ type Props = DataCellProps<{
 }> & {
     addRowNumbers?: boolean;
     rowIndex?: number;
+    rowNumberWidth?: number;
     actionColumnDefinition?: ActionColumn;
     checkedRows?: UxState['checkedRows'];
     onUxChange?: GridActionsType['handleUxChange'];

package/ui/Blocks/CommonGrid/components/gridCells/RowActionsCell.js

@@ -3,9 +3,9 @@ import { IconButtonInCell } from "./IconButtonInCell.js";
 import { useCallback, useMemo } from "react";
 import { x } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { isFunction } from "lodash/fp";
+import { isFunction, omit } from "lodash/fp";
 //#region packages/ui/Blocks/CommonGrid/components/gridCells/RowActionsCell.tsx
-const RowActionsCell = ({ actionColumnDefinition, rowData, addRowNumbers, rowIndex, checkedRows, withCheckboxes, onUxChange, onRowAction }) => {
+const RowActionsCell = ({ actionColumnDefinition, rowData, addRowNumbers, rowIndex, rowNumberWidth = 0, checkedRows, withCheckboxes, onUxChange, onRowAction }) => {
 	const rowDataId = rowData?.id;
 	const canEdit = isFunction(actionColumnDefinition?.canRowEdit) ? actionColumnDefinition?.canRowEdit(rowData) : actionColumnDefinition?.canRowEdit;
 	const canRead = isFunction(actionColumnDefinition?.canRowRead) ? actionColumnDefinition?.canRowRead(rowData) : actionColumnDefinition?.canRowRead;
@@ -26,9 +26,10 @@ const RowActionsCell = ({ actionColumnDefinition, rowData, addRowNumbers, rowInd
 	}, [canEdit, rowData?.id]);
 	const isChecked = !!checkedRows?.[rowDataId];
 	const onCheckboxChange = useCallback(() => {
-		const newCheckedRows = { ...checkedRows || {} };
-		if (!isChecked) newCheckedRows[rowDataId] = true;
-		else delete newCheckedRows[rowDataId];
+		const newCheckedRows = isChecked ? omit(rowDataId, checkedRows || {}) : {
+			...checkedRows || {},
+			[rowDataId]: true
+		};
 		onUxChange?.("checkedRows", newCheckedRows);
 	}, [
 		onUxChange,
@@ -40,14 +41,13 @@ const RowActionsCell = ({ actionColumnDefinition, rowData, addRowNumbers, rowInd
 		if (isFunction(onClick)) onClick();
 	}, [onClick]);
 	return /* @__PURE__ */ jsxs(x.div, {
-		w: "100%",
 		display: "flex",
-		gap: "16px",
+		gap: "12px",
 		pl: "4px",
 		pr: "4px",
 		children: [
 			withCheckboxes && /* @__PURE__ */ jsx(x.div, {
-				w: "100%",
+				w: "18px",
 				children: /* @__PURE__ */ jsx(Checkbox_default, {
 					checked: isChecked,
 					onChange: onCheckboxChange,
@@ -58,8 +58,8 @@ const RowActionsCell = ({ actionColumnDefinition, rowData, addRowNumbers, rowInd
 				display: "flex",
 				alignItems: "center",
 				justifyContent: "center",
-				pr: "8px",
-				w: "100%",
+				w: `${rowNumberWidth}px`,
+				flexShrink: 0,
 				children: rowIndex
 			}),
 			canEdit && /* @__PURE__ */ jsx(IconButtonInCell, {

package/ui/Blocks/CommonGrid/hooks/useEditReadAsColumn.js

@@ -1,3 +1,4 @@
+import { getActionsColumnExtraWidth, getRowNumbersExtraWidth } from "../utils/index.js";
 import "../types.js";
 import withProps from "../HoC/withProps.js";
 import { RowActionsCell } from "../components/gridCells/RowActionsCell.js";
@@ -5,25 +6,35 @@ import "../components/gridCells/index.js";
 import { useCallback, useMemo } from "react";
 //#region packages/ui/Blocks/CommonGrid/hooks/useEditReadAsColumn.tsx
 const useEditReadAsColumn = (props) => {
-	const { onRowAction, actionColumnDefinition, columnsDefinitions, gridSelectors, gridActions, onRowEditClick, onRowReadClick } = props;
+	const { onRowAction, actionColumnDefinition, columnsDefinitions, gridSelectors, gridActions, onRowEditClick, onRowReadClick, rowsData } = props;
 	const modifiedOnRowAction = useCallback((id, field, value, rowData) => {
 		if (field === "row_edit" || field === "row_read") {
 			if (field === "row_edit" && onRowEditClick) onRowEditClick(id, value);
 			if (field === "row_read" && onRowReadClick) onRowReadClick(id, value);
-		} else if (onRowAction) return onRowAction(id, field, value, rowData);
+		} else if (onRowAction) onRowAction(id, field, value, rowData);
 	}, [
 		onRowAction,
 		onRowEditClick,
 		onRowReadClick
 	]);
-	const { canRowEdit, canRowRead, addRowNumbers, stickTo = "left", flexBasis = 20 } = actionColumnDefinition || {};
+	const { canRowEdit, canRowRead, addRowNumbers, stickTo = "left", flexBasis = 0 } = actionColumnDefinition || {};
 	const withCheckboxes = !!actionColumnDefinition?.actionOptions?.length || actionColumnDefinition?.forceCheckboxes;
 	const hasActions = canRowEdit || canRowRead || withCheckboxes || addRowNumbers;
+	const page = gridSelectors?.page || 1;
+	const maxRowNumber = (gridSelectors?.rowsPerPage || 10) * (page - 1) + (rowsData?.length || 0);
+	const actionColumnFlexBasis = flexBasis + getActionsColumnExtraWidth({
+		addRowNumbers,
+		withCheckboxes,
+		canRowEdit,
+		canRowRead,
+		maxRowNumber
+	});
+	const rowNumberWidth = getRowNumbersExtraWidth(maxRowNumber);
 	return {
 		columnsDefinitions: useMemo(() => {
 			const editReadColumnDefinition = {
 				name: "actions-cell-cg",
-				flexBasis,
+				flexBasis: actionColumnFlexBasis,
 				filtering: withCheckboxes || addRowNumbers,
 				filteringType: "actions",
 				sorting: false,
@@ -34,6 +45,7 @@ const useEditReadAsColumn = (props) => {
 					actionColumnDefinition,
 					withCheckboxes,
 					addRowNumbers: actionColumnDefinition?.addRowNumbers,
+					rowNumberWidth,
 					checkedRows: gridSelectors?.uxState?.checkedRows,
 					onUxChange: gridActions?.handleUxChange
 				})(RowActionsCell)
@@ -42,7 +54,8 @@ const useEditReadAsColumn = (props) => {
 			else return [...columnsDefinitions, editReadColumnDefinition];
 		}, [
 			addRowNumbers,
-			flexBasis,
+			actionColumnFlexBasis,
+			rowNumberWidth,
 			stickTo,
 			hasActions,
 			columnsDefinitions,

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

@@ -86,11 +86,9 @@ export type RowProps = {
     id: string;
     [rowClassSymbol]?: string;
 };
-type ColumnBaseProps = {
-    flexBasis: number;
-};
 export type RowValueType = string | React.ReactNode | number | void;
-export type ColumnDefinition<ColumnName extends string = string> = ColumnBaseProps & {
+export type ColumnDefinition<ColumnName extends string = string> = {
+    flexBasis: number;
     asyncLoadKey?: string;
     name: ColumnName;
     group?: Group['name'];
@@ -140,7 +138,8 @@ type batchAction = {
     isEnabled?: (checkedRows: any[]) => boolean;
 };
 export type OnBatchActionFn<T = RowProps> = (action: batchAction, affectedRows: T[]) => void;
-export type ActionColumn = ColumnBaseProps & {
+export type ActionColumn = {
+    flexBasis?: number;
     actionOptions?: batchAction[];
     canRowEdit?: boolean | ((row: any) => boolean);
     canRowRead?: boolean | ((row: any) => boolean);

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

@@ -1,4 +1,4 @@
-import type { ColumnDefinition, ColumnConfig, FilterProps, Group, StickTo, FiltersConfig } from '../types';
+import type { ColumnDefinition, ColumnConfig, FilterProps, Group, StickTo, FiltersConfig, ActionColumn } from '../types';
 type CellSizePropsResult = {
     flexBasis?: number;
     flexGrow?: number;
@@ -13,6 +13,15 @@ export declare const calculatePaginator: (page: number, rowsPerPage: number) =>
     offset: number;
     limit: number;
 };
+export declare const getRowNumbersExtraWidth: (maxRowNumber?: number) => number;
+type ActionsColumnExtraWidthParams = {
+    addRowNumbers?: boolean;
+    withCheckboxes?: boolean;
+    canRowEdit?: ActionColumn['canRowEdit'];
+    canRowRead?: ActionColumn['canRowRead'];
+    maxRowNumber?: number;
+};
+export declare const getActionsColumnExtraWidth: ({ addRowNumbers, withCheckboxes, canRowEdit, canRowRead, maxRowNumber }: ActionsColumnExtraWidthParams) => number;
 export declare const createFilterType: (columnDefinition: ColumnDefinition) => FilterProps["type"];
 export declare const getGroups: (columns: ColumnDefinition[]) => Group[];
 export declare const getGroupClassNames: (group?: Group) => string;

package/ui/Blocks/CommonGrid/utils/index.js

@@ -4,6 +4,7 @@ import BooleanSelect_default from "../components/Filters/BooleanSelect/index.js"
 import DatePickerRange_default from "../components/Filters/DatePickerRange/index.js";
 import NumberRange_default from "../components/Filters/NumberRange/index.js";
 import TextRange_default from "../components/Filters/TextRange/index.js";
+import sum from "lodash/sum";
 //#region packages/ui/Blocks/CommonGrid/utils/index.ts
 const isDefined = (val) => typeof val !== "undefined";
 const getCellSizeProps = (column, columnWidth) => {
@@ -34,6 +35,25 @@ const calculatePaginator = (page, rowsPerPage) => ({
 	offset: rowsPerPage ? rowsPerPage * (page - 1) : rowsPerPage,
 	limit: rowsPerPage
 });
+const ROW_NUMBER_DIGIT_WIDTH = 8;
+const CHECKBOX_WIDTH = 18;
+const ICON_BUTTON_WIDTH = 20;
+const ACTIONS_CELL_GAP = 12;
+const ACTIONS_CELL_PADDING = 16;
+const getRowNumbersExtraWidth = (maxRowNumber = 0) => {
+	return String(maxRowNumber).length * ROW_NUMBER_DIGIT_WIDTH;
+};
+const getActionsColumnExtraWidth = ({ addRowNumbers, withCheckboxes, canRowEdit, canRowRead, maxRowNumber = 0 }) => {
+	const hasActionIcon = !!canRowEdit || !!canRowRead;
+	const parts = [];
+	if (withCheckboxes) parts.push(CHECKBOX_WIDTH);
+	if (addRowNumbers) parts.push(getRowNumbersExtraWidth(maxRowNumber));
+	if (hasActionIcon) parts.push(ICON_BUTTON_WIDTH);
+	if (!parts.length) return 0;
+	const gaps = (parts.length - 1) * ACTIONS_CELL_GAP;
+	parts.push(ACTIONS_CELL_PADDING);
+	return sum(parts) + gaps;
+};
 const createFilterType = (columnDefinition) => {
 	if (columnDefinition.filterOptions || columnDefinition.asyncLoadKey) return "options";
 	else return columnDefinition.filteringType || "text";
@@ -75,4 +95,4 @@ const checksColumnsOrder = (colsOrder, columnsDefinitions) => {
 	if (stickyRightColls.length && colsOrder.indexOf(stickyRightColls[0].name) !== colsOrder.length - 1 && stickyRightColls[0].name !== "actions-cell-cg") console.error("The Right sticky column should be the last one in a row");
 };
 //#endregion
-export { calculatePaginator, checksColumnsOrder, createFilterType, getCellSizeProps, getFilterName, getFilters, getGroupClassNames, getGroups, getSortName, getStickyCollClassNames, isColumnOn, isFilterActive };
+export { calculatePaginator, checksColumnsOrder, createFilterType, getActionsColumnExtraWidth, getCellSizeProps, getFilterName, getFilters, getGroupClassNames, getGroups, getRowNumbersExtraWidth, getSortName, getStickyCollClassNames, isColumnOn, isFilterActive };

package/ui/Blocks/ImageList/components/AddPhoto/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const IMAGE_MIME_PREFIX = "image/";
+export declare const INVALID_FORMAT_MESSAGE = "Unsupported file format";

package/ui/Blocks/ImageList/components/AddPhoto/constants.js

@@ -0,0 +1,5 @@
+//#region packages/ui/Blocks/ImageList/components/AddPhoto/constants.ts
+const IMAGE_MIME_PREFIX = "image/";
+const INVALID_FORMAT_MESSAGE = "Unsupported file format";
+//#endregion
+export { IMAGE_MIME_PREFIX, INVALID_FORMAT_MESSAGE };

package/ui/Blocks/ImageList/components/AddPhoto/hooks/useImageUpload.d.ts

@@ -0,0 +1,11 @@
+import { type ChangeEvent } from 'react';
+import { type ImageUploadProps } from '../../../types';
+type Props = {
+    onImageUpload?: (props: ImageUploadProps) => Promise<void>;
+};
+type HookType = (props: Props) => {
+    handleImageUpload: (event: ChangeEvent<HTMLInputElement>) => void;
+    hasInvalidFormat: boolean;
+};
+export declare const useImageUpload: HookType;
+export {};

package/ui/Blocks/ImageList/components/AddPhoto/hooks/useImageUpload.js

@@ -0,0 +1,34 @@
+import "../constants.js";
+import { useCallback, useState } from "react";
+//#region packages/ui/Blocks/ImageList/components/AddPhoto/hooks/useImageUpload.ts
+const useImageUpload = ({ onImageUpload }) => {
+	const [hasInvalidFormat, setHasInvalidFormat] = useState(false);
+	return {
+		handleImageUpload: useCallback((event) => {
+			const input = event.target;
+			const file = input?.files?.[0];
+			if (!file) {
+				setHasInvalidFormat(false);
+				return;
+			}
+			if (!file.type.startsWith("image/")) {
+				input.value = "";
+				setHasInvalidFormat(true);
+				return;
+			}
+			setHasInvalidFormat(false);
+			const reader = new FileReader();
+			reader.readAsDataURL(file);
+			reader.onload = async () => {
+				await onImageUpload?.({
+					base64image: reader.result?.split(",").pop(),
+					base64WithDataDeclaration: reader.result,
+					file
+				});
+			};
+		}, [onImageUpload]),
+		hasInvalidFormat
+	};
+};
+//#endregion
+export { useImageUpload };

package/ui/Blocks/ImageList/components/AddPhoto/index.d.ts

@@ -1,9 +1,9 @@
 import { type FC } from 'react';
 import { type ImageUploadProps } from '../../types';
-interface AddPhotoProps {
+type AddPhotoProps = {
     onImageUpload?: (props: ImageUploadProps) => Promise<void>;
     isDisabled?: boolean;
     hasRemove?: boolean;
-}
+};
 export declare const AddPhoto: FC<AddPhotoProps>;
 export {};

package/ui/Blocks/ImageList/components/AddPhoto/index.js

@@ -1,29 +1,15 @@
 import { AddPhoto as AddPhoto$1 } from "../../../../Elements/Icon/icons/AddPhoto.js";
-import { Container, HiddenInput } from "./styles.js";
-import { useCallback } from "react";
+import ErrorMessage from "../../../../Elements/ErrorMessage/ErrorMessage.js";
+import "../../../../Elements/ErrorMessage/index.js";
+import "./constants.js";
+import { useImageUpload } from "./hooks/useImageUpload.js";
+import { Container, ErrorWrapper, HiddenInput, Wrapper } from "./styles.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region packages/ui/Blocks/ImageList/components/AddPhoto/index.tsx
-const IMAGE_MIME_PREFIX = "image/";
 const AddPhoto = ({ onImageUpload, isDisabled, hasRemove }) => {
-	const handleImageUpload = useCallback((event) => {
-		const input = event.target;
-		const file = input?.files?.[0];
-		if (!file?.type.startsWith(IMAGE_MIME_PREFIX)) {
-			input.value = "";
-			return;
-		}
-		const reader = new FileReader();
-		reader.readAsDataURL(file);
-		reader.onload = async () => {
-			await onImageUpload?.({
-				base64image: reader.result?.split(",").pop(),
-				base64WithDataDeclaration: reader.result,
-				file
-			});
-		};
-	}, [onImageUpload]);
+	const { handleImageUpload, hasInvalidFormat } = useImageUpload({ onImageUpload });
 	if (!onImageUpload) return null;
-	return /* @__PURE__ */ jsxs(Container, {
+	return /* @__PURE__ */ jsxs(Wrapper, { children: [/* @__PURE__ */ jsxs(Container, {
 		isDisabled,
 		hasRemove,
 		children: [/* @__PURE__ */ jsx(HiddenInput, {
@@ -36,7 +22,13 @@ const AddPhoto = ({ onImageUpload, isDisabled, hasRemove }) => {
 			width: "36",
 			height: "36"
 		})]
-	});
+	}), hasInvalidFormat && /* @__PURE__ */ jsx(ErrorWrapper, {
+		hasRemove,
+		children: /* @__PURE__ */ jsx(ErrorMessage, {
+			appearance: "inline",
+			children: "Unsupported file format"
+		})
+	})] });
 };
 //#endregion
 export { AddPhoto };

package/ui/Blocks/ImageList/components/AddPhoto/styles.d.ts

@@ -3,3 +3,7 @@ export declare const Container: import("styled-components").StyledComponent<"div
     hasRemove?: boolean;
 }, never>;
 export declare const HiddenInput: import("styled-components").StyledComponent<"input", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const Wrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const ErrorWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
+    hasRemove?: boolean;
+}, never>;

package/ui/Blocks/ImageList/components/AddPhoto/styles.js

@@ -26,5 +26,17 @@ const HiddenInput = styled$1.input`
   height: 100%;
   cursor: pointer;
 `;
+const Wrapper = styled$1.div`
+  position: relative;
+  flex-shrink: 0;
+`;
+const ErrorWrapper = styled$1.div`
+  position: absolute;
+  top: ${({ hasRemove }) => hasRemove ? "100px" : "85px"};
+  left: 0;
+  width: 85px;
+  line-height: 1.2;
+  text-align: center;
+`;
 //#endregion
-export { Container, HiddenInput };
+export { Container, ErrorWrapper, HiddenInput, Wrapper };