@mailstep/design-system 0.8.40 → 0.8.43-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.8.40",
+  "version": "0.8.43-beta.1",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",
@@ -16,11 +16,12 @@
     "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:beta": "npm run build && npm publish ./build --tag beta",
     "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"
+    "prepare": "husky"
   },
   "lint-staged": {
     "*.{js,ts,tsx}": "yarn eslint --fix"

package/ui/Blocks/CommonGrid/components/GridModals/index.js

@@ -104,6 +104,7 @@ const GridModals = ({ manageColumnFormVisible, onCloseForm, resetColumnConfig, o
 				type: "text",
 				onChange: handleChangePresetName,
 				value: presetName,
+				maxLength: 40,
 				label: /* @__PURE__ */ jsx(Trans, {
 					id: "dataGrid.presetName.title",
 					message: "Preset name"

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

@@ -1,5 +1,5 @@
-import { ChangeEvent } from 'react';
-import { Filtering, GridActionsType } from '../types';
+import { type ChangeEvent } from 'react';
+import { type Filtering, type GridActionsType } from '../types';
 type Props = {
     gridName?: string;
     filters?: Filtering;
@@ -15,5 +15,6 @@ type HookType = (props: Props) => {
     handleChangePresetName: (event: ChangeEvent<HTMLInputElement>) => void;
     handleCreatePreset: () => void;
 };
+export declare const maxPresetNameLength = 40;
 export declare const useCreatePreset: HookType;
 export {};

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

@@ -3,11 +3,12 @@ import { useEvent } from "./useEvent.js";
 import { useCallback, useState } from "react";
 import isEmpty from "lodash/isEmpty";
 //#region packages/ui/Blocks/CommonGrid/hooks/useCreatePreset.ts
+const maxPresetNameLength = 40;
 const useCreatePreset = ({ gridName, filters, onClosePresetsModal, setSelectedPresetName, gridActions }) => {
 	const { isOpen: isCreatePresetModalOpen, onOpen: onOpenCreatePresetModal, onClose: onCloseCreatePresetModal } = useModal();
 	const [presetName, setPresetName] = useState("");
 	const handleChangePresetName = useCallback((event) => {
-		setPresetName(event.target.value);
+		setPresetName(event.target.value.slice(0, 40));
 	}, []);
 	return {
 		isCreatePresetModalOpen,
@@ -29,4 +30,4 @@ const useCreatePreset = ({ gridName, filters, onClosePresetsModal, setSelectedPr
 	};
 };
 //#endregion
-export { useCreatePreset };
+export { maxPresetNameLength, useCreatePreset };

package/ui/Elements/Avatar/Avatar.js

@@ -9,7 +9,7 @@ const getInitials = (user) => {
 	if (initials) return initials;
 	return (user?.username ?? "?").slice(0, 2).toUpperCase();
 };
-const Avatar = ({ user, src, size = 34, colorFront, colorBack, className, hoverColorBack, onClick, withInitials, withChevron, withName }) => {
+const Avatar = ({ user, src, size = 34, colorFront, colorBack, className, hoverColorBack, onClick, withInitials, withChevron, withName, children }) => {
 	return /* @__PURE__ */ jsxs(AvatarWrap, {
 		onClick,
 		children: [
@@ -29,7 +29,7 @@ const Avatar = ({ user, src, size = 34, colorFront, colorBack, className, hoverC
 					!src && !withInitials && /* @__PURE__ */ jsx(Profile, { stroke: colorFront })
 				]
 			}),
-			withName && user?.username,
+			/* @__PURE__ */ jsxs("div", { children: [withName && user?.username, children] }),
 			withChevron && /* @__PURE__ */ jsx(Chevron, { children: /* @__PURE__ */ jsx(Icon, {
 				icon: "goDown",
 				fill: "white",

package/ui/Elements/Avatar/types.d.ts

@@ -1,3 +1,4 @@
+import { type ReactNode } from 'react';
 export type Props = {
     user?: {
         firstName?: string;
@@ -15,4 +16,5 @@ export type Props = {
     withInitials?: boolean;
     withChevron?: boolean;
     withName?: boolean;
+    children?: ReactNode;
 };

package/ui/Forms/Input/Input.js

@@ -39,7 +39,11 @@ const Input = ({ appearance = "primary", type, name, label, value, icon, variant
 	]);
 	const handleBlur = useCallback((event) => {
 		onBlur?.(event);
-		if (forceFocus && (event.relatedTarget?.tagName?.toLowerCase() !== "input" || !allowedInputTypes.includes(event.relatedTarget?.type?.toLowerCase()))) event.target?.focus();
+		if (forceFocus) {
+			const relatedTag = event.relatedTarget?.tagName?.toLowerCase();
+			const relatedType = event.relatedTarget?.type?.toLowerCase();
+			if (!(relatedTag === "input" && allowedInputTypes.includes(relatedType)) && !(relatedTag === "textarea")) event.target?.focus();
+		}
 	}, [forceFocus, onBlur]);
 	const handleKeyDown = useCallback((event) => {
 		if (event.key === "Enter") onEnter?.();