@mailstep/design-system 0.8.49 → 0.8.51

package/package.json

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

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

@@ -4,6 +4,7 @@ type ItemType = {
     title: string | React.ReactElement;
     onClick: () => void;
     link?: string;
+    disabled?: boolean;
 };
 export type Props = {
     items: ItemType[];

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

@@ -1,5 +1,5 @@
-import { DragEndEvent } from '@dnd-kit/core';
-import { CommonGridProps, GridActionsType, GridSelectorsType, ColumnDefinition } from '../types';
+import { type CommonGridProps, type GridActionsType, type GridSelectorsType, type ColumnDefinition } from '../types';
+import { type DragEndEvent } from '@dnd-kit/core';
 type Props = {
     columns: CommonGridProps['columnsDefinitions'];
     gridActions: GridActionsType;

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

@@ -2,7 +2,7 @@ import { checksColumnsOrder, isColumnOn } from "../utils/index.js";
 import { useCallback, useEffect, useMemo, useState } from "react";
 //#region packages/ui/Blocks/CommonGrid/hooks/useManageColumn.ts
 const useManageColumn = ({ columns, gridSelectors, gridActions, onClose }) => {
-	const { resetGrid, setColumnConfig, setColumnsOrder } = gridActions;
+	const { setColumnConfig, setColumnsOrder } = gridActions;
 	const { columnConfig, columnsOrder } = gridSelectors;
 	const initialColumnsOrder = useMemo(() => columns?.map((col) => col.name), [columns]);
 	const columnsOrderValue = columnsOrder?.length ? columnsOrder : initialColumnsOrder;
@@ -29,14 +29,15 @@ const useManageColumn = ({ columns, gridSelectors, gridActions, onClose }) => {
 	]);
 	const resetColumnConfig = useCallback(() => {
 		setUpdatedColumnsOrder(initialColumnsOrder);
-		resetGrid?.();
+		setColumnConfig?.({});
+		setColumnsOrder?.([]);
 		onClose?.();
 		setColumnsConfigOptions({});
 	}, [
 		onClose,
-		resetGrid,
-		initialColumnsOrder,
-		columnConfig
+		setColumnConfig,
+		setColumnsOrder,
+		initialColumnsOrder
 	]);
 	const onCloseForm = useCallback(() => {
 		setUpdatedColumnsOrder(columnsOrderValue);

package/ui/Elements/DropdownMenu/components/MenuItem.js

@@ -16,6 +16,11 @@ const StyledLink = styled$1(Link)`
     background-color: bgLightGray1;
     border-radius: 6px;
   }
+  ${({ $disabled }) => $disabled && css`
+      opacity: 0.5;
+      pointer-events: none;
+      cursor: not-allowed;
+    `}
   ${({ $isActive }) => $isActive && css`
     background-color: red1;
     color: white;
@@ -32,23 +37,31 @@ const StyledLink = styled$1(Link)`
 `}
 `;
 const MenuItem = ({ item, ItemComponent, onClose }) => {
-	const { onClick, link, hasSeparator, name, autoClose } = item;
+	const { onClick, link, hasSeparator, name, autoClose, disabled } = item;
+	const isActive = link === useLocation().pathname;
+	const onClickCallback = useCallback((e) => {
+		if (disabled) {
+			e.preventDefault();
+			return;
+		}
+		if (onClick) {
+			e.preventDefault();
+			onClick();
+		}
+		if (autoClose && onClose) setTimeout(() => {
+			onClose();
+		}, 200);
+	}, [
+		autoClose,
+		disabled,
+		onClick,
+		onClose
+	]);
 	return /* @__PURE__ */ jsx(StyledLink, {
-		to: link,
-		$isActive: link === useLocation().pathname,
-		onClick: useCallback((e) => {
-			if (onClick) {
-				e.preventDefault();
-				onClick();
-			}
-			if (autoClose && onClose) setTimeout(() => {
-				onClose();
-			}, 200);
-		}, [
-			autoClose,
-			onClick,
-			onClose
-		]),
+		to: disabled ? void 0 : link,
+		$isActive: isActive,
+		$disabled: !!disabled,
+		onClick: onClickCallback,
 		$hasSeparator: !!hasSeparator,
 		"data-cy": name,
 		size: "inherit",

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

@@ -11,6 +11,7 @@ export type DefaultItem = {
     hidden?: boolean;
     count?: number;
     autoClose?: boolean;
+    disabled?: boolean;
 };
 export type Item = {
     link?: string | Pathname;
@@ -19,6 +20,7 @@ export type Item = {
     name?: string;
     autoClose?: boolean;
     hidden?: boolean;
+    disabled?: boolean;
 };
 export type MenuItemProps<ItemType extends Item> = {
     item: ItemType;