@mailstep/design-system 0.11.1 → 0.12.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.11.1",
+  "version": "0.12.0-beta.2",
   "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: addRowNumbers ? "12px" : "18px",
 		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,27 @@ 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_WITH_ROW_NUMBERS = 12;
+const ACTIONS_CELL_GAP = 18;
+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 gap = addRowNumbers ? ACTIONS_CELL_GAP_WITH_ROW_NUMBERS : ACTIONS_CELL_GAP;
+	const gaps = (parts.length - 1) * 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 +97,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/Elements/Select/components/ChevronOption.js

@@ -12,7 +12,7 @@ const ChevronOption = (props) => {
 		...props,
 		children: [(showCheckbox || showToggle) && /* @__PURE__ */ jsxs(SelectedIndicator, { children: [showCheckbox && /* @__PURE__ */ jsx(Checkbox_default, {
 			checked: isSelected,
-			size: 2,
+			size: "14px",
 			readOnly: true
 		}), showToggle && /* @__PURE__ */ jsx(Toggle, {
 			name: "",

package/ui/Elements/Select/components/SelectAll.js

@@ -66,7 +66,7 @@ const SelectAll = ({ onCustomSelectAll, onCustomDeselectAll, value, options, max
 		children: [
 			(showCheckbox || showToggle) && /* @__PURE__ */ jsxs(SelectedIndicator, { children: [showCheckbox && /* @__PURE__ */ jsx(Checkbox_default, {
 				checked: isSelected,
-				size: 2,
+				size: "14px",
 				readOnly: true
 			}), showToggle && /* @__PURE__ */ jsx(Toggle, {
 				name: "",

package/ui/Forms/Checkbox/Checkbox.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { type CheckboxProps } from './types';
-declare const _default: React.NamedExoticComponent<CheckboxProps>;
+declare const _default: import("react").NamedExoticComponent<CheckboxProps>;
 export default _default;

package/ui/Forms/Checkbox/Checkbox.js

@@ -1,14 +1,11 @@
 import { CheckIcon, CheckboxWrap, FakeInput, Label } from "./styles.js";
 import { memo, useId } from "react";
-import { th, useTheme } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region packages/ui/Forms/Checkbox/Checkbox.tsx
-const Checkbox = ({ name, label, onChange, checked, defaultChecked, size = 4, className, disabled, inputRef, readOnly, minusIcon = false }) => {
-	const theme = useTheme();
-	const themeSize = th.fontSize(size)({ theme });
+const Checkbox = ({ name, label, onChange, checked, defaultChecked, size = "18px", className, disabled, inputRef, readOnly, minusIcon = false }) => {
 	const id = useId();
 	return /* @__PURE__ */ jsxs(CheckboxWrap, {
-		size: themeSize,
+		size,
 		className,
 		children: [
 			/* @__PURE__ */ jsx("input", {
@@ -26,10 +23,10 @@ const Checkbox = ({ name, label, onChange, checked, defaultChecked, size = 4, cl
 				id
 			}),
 			/* @__PURE__ */ jsx(FakeInput, {
-				size: themeSize,
+				size,
 				children: /* @__PURE__ */ jsx(CheckIcon, {
 					icon: minusIcon ? "minus" : "check",
-					size: themeSize
+					size
 				})
 			}),
 			label && /* @__PURE__ */ jsx(Label, {

package/ui/Forms/Checkbox/types.d.ts

@@ -8,7 +8,7 @@ export type CheckboxProps = {
     disabled?: boolean;
     color?: string;
     unsetColor?: string;
-    size?: number;
+    size?: string;
     className?: string;
     inputRef?: RefObject<HTMLInputElement>;
     readOnly?: boolean;