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

package/ui/Blocks/CommonGrid/components/ColumnTitle/ColumnTitle.js

@@ -0,0 +1,132 @@
+import Icon from "../../../../Elements/Icon/Icon.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import styled$1, { css, x } from "@xstyled/styled-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Blocks/CommonGrid/components/ColumnTitle/ColumnTitle.tsx
+const WRAPPER_WIDTH = 35;
+const Wrap = styled$1.div`
+  width: 100%;
+  font-size: 0.8rem;
+`;
+const Title = styled$1.h4`
+  margin: unset;
+  align-self: center;
+  flex-shrink: 1;
+`;
+const arrowStyles = css`
+  flex-direction: row;
+  & > * {
+    cursor: pointer;
+  }
+`;
+const InlineArrowWrap = styled$1.div`
+  display: ${({ $isPopup }) => $isPopup ? "none" : "flex"};
+  position: static;
+  font-size: 1rem;
+  ${arrowStyles}
+  margin-left: 6px;
+`;
+const PopupArrowWrap = styled$1.div`
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: -24px;
+  background-color: lightGray2;
+  font-size: 0.8rem;
+  border-radius: 0.4rem;
+  padding: 0 4px;
+  ${arrowStyles}
+  width: ${WRAPPER_WIDTH}px;
+  box-shadow: tooltipShadow;
+  z-index: 1;
+`;
+const OverflowWrap = styled$1.div`
+  display: none;
+  position: relative;
+  overflow: visible;
+  &:hover {
+    display: block;
+  }
+`;
+const WarningWrap = styled$1.div`
+  position: relative;
+  display: ${({ $isPopup }) => $isPopup ? "block" : "none"};
+  font-size: 0.7rem;
+  margin-right: 6px;
+  align-self: center;
+  &:hover + ${OverflowWrap} {
+    display: flex;
+  }
+`;
+const Content = styled$1.div`
+  justify-content: ${({ $isPopup }) => $isPopup ? "space-between" : "unset"};
+  display: flex;
+`;
+const ColumnTitle = ({ title, isSortable, onSetSort, sortValue }) => {
+	const [isOverflowing, setIsOverflowing] = useState(false);
+	const onSetAsc = useCallback(() => onSetSort?.("asc"), [onSetSort]);
+	const onSetDesc = useCallback(() => onSetSort?.("desc"), [onSetSort]);
+	const onSetNull = useCallback(() => onSetSort?.(null), [onSetSort]);
+	const isAsc = sortValue === "asc";
+	const isDesc = sortValue === "desc";
+	const wrapRef = useRef(null);
+	const contentRef = useRef(null);
+	useEffect(() => {
+		const wrapRefCopy = wrapRef.current;
+		const contentRefCopy = contentRef.current;
+		if (!wrapRefCopy || !contentRefCopy) return;
+		const resizeObserver = new ResizeObserver(() => {
+			const wrapWidth = wrapRefCopy.offsetWidth;
+			setIsOverflowing(wrapWidth <= contentRefCopy.offsetWidth + 42);
+		});
+		resizeObserver.observe(wrapRefCopy?.parentNode);
+		return () => {
+			resizeObserver.unobserve(wrapRefCopy?.parentNode);
+		};
+	}, [wrapRef?.current]);
+	const Arrows = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(x.div, {
+		onClick: isAsc ? onSetNull : onSetAsc,
+		children: /* @__PURE__ */ jsx(Icon, {
+			icon: "chevronUp",
+			fill: isAsc ? "blue2" : "lightGray3"
+		})
+	}), /* @__PURE__ */ jsx(x.div, {
+		onClick: isDesc ? onSetNull : onSetDesc,
+		children: /* @__PURE__ */ jsx(Icon, {
+			icon: "chevronDown",
+			fill: isDesc ? "blue2" : "lightGray3"
+		})
+	})] });
+	return /* @__PURE__ */ jsx(Wrap, {
+		ref: wrapRef,
+		children: /* @__PURE__ */ jsxs(Content, {
+			$isPopup: isOverflowing,
+			children: [/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Title, {
+				ref: contentRef,
+				children: title
+			}) }), isSortable && /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(WarningWrap, {
+					$isPopup: isOverflowing,
+					children: /* @__PURE__ */ jsx(Icon, {
+						icon: "warningDual",
+						fill: "black",
+						secondaryColor: "yellow2"
+					})
+				}),
+				/* @__PURE__ */ jsx(OverflowWrap, {
+					$isPopup: isOverflowing,
+					children: /* @__PURE__ */ jsx(PopupArrowWrap, {
+						$isPopup: isOverflowing,
+						children: Arrows
+					})
+				}),
+				/* @__PURE__ */ jsx(InlineArrowWrap, {
+					$isPopup: isOverflowing,
+					children: Arrows
+				})
+			] })]
+		})
+	});
+};
+//#endregion
+export { ColumnTitle as default };

package/ui/Blocks/CommonGrid/components/ColumnTitle/index.d.ts

@@ -1,3 +1,2 @@
-import { default as ColumnTitle } from './ColumnTitle';
-
+import ColumnTitle from './ColumnTitle';
 export default ColumnTitle;

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

@@ -0,0 +1,5 @@
+import ColumnTitle from "./ColumnTitle.js";
+//#region packages/ui/Blocks/CommonGrid/components/ColumnTitle/index.tsx
+var ColumnTitle_default = ColumnTitle;
+//#endregion
+export { ColumnTitle_default as default };

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

@@ -1,5 +1,4 @@
-import { default as React } from 'react';
-import { ColumnTitleComponentType } from '../types';
-
+import React from 'react';
+import type { ColumnTitleComponentType } from '../types';
 declare const _default: React.NamedExoticComponent<ColumnTitleComponentType>;
 export default _default;

package/ui/Blocks/CommonGrid/components/ColumnTitle.js

@@ -0,0 +1,40 @@
+import { SortingDown, SortingUp } from "./icons/Sorting.js";
+import React from "react";
+import styled$1 from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Blocks/CommonGrid/components/ColumnTitle.tsx
+const Title = styled$1.span`
+  & + * {
+    margin-left: 1em;
+  }
+`;
+const ColumnTitle = ({ title, isSortable, onSetSort, sortValue }) => {
+	const [mouseDownTimestamp, setMouseDownTimestamp] = React.useState(0);
+	const handleMouseDown = React.useCallback(() => {
+		setMouseDownTimestamp(Date.now());
+	}, []);
+	const handleMouseUp = React.useCallback(() => {
+		if (Date.now() - mouseDownTimestamp < 200) {
+			const newValue = sortValue ? sortValue === "asc" ? "desc" : null : "asc";
+			if (onSetSort) onSetSort(newValue);
+		}
+		setMouseDownTimestamp(0);
+	}, [
+		mouseDownTimestamp,
+		onSetSort,
+		sortValue
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		onMouseDown: isSortable ? handleMouseDown : void 0,
+		onMouseUp: isSortable ? handleMouseUp : void 0,
+		className: isSortable ? "sortable" : "",
+		children: [
+			/* @__PURE__ */ jsx(Title, { children: title }),
+			isSortable && sortValue === "asc" && /* @__PURE__ */ jsx(SortingUp, { width: "16" }),
+			isSortable && sortValue === "desc" && /* @__PURE__ */ jsx(SortingDown, { width: "16" })
+		]
+	});
+};
+var ColumnTitle_default = React.memo(ColumnTitle);
+//#endregion
+export { ColumnTitle_default as default };

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

@@ -1,6 +1,6 @@
-import { default as React, Dispatch, FC } from 'react';
-import { CommonGridProps, GridActionsType, GridSelectorsType, ColumnDefinition, FiltersConfig } from '../../types';
-
+import React from 'react';
+import type { Dispatch, FC } from 'react';
+import { type CommonGridProps, type GridActionsType, type GridSelectorsType, type ColumnDefinition, type FiltersConfig } from '../../types';
 type Props = {
     extraControlButtons: CommonGridProps['extraControlButtons'];
     gridActions: GridActionsType;

package/ui/Blocks/CommonGrid/components/ControlButtons/ControlButtons.js

@@ -0,0 +1,160 @@
+import { Settings2 } from "../../../../Elements/Icon/icons/Settings2.js";
+import { Filter } from "../../../../Elements/Icon/icons/Filter.js";
+import { Sort } from "../../../../Elements/Icon/icons/Sort.js";
+import Button from "../../../../Elements/Button/Button.js";
+import Tag from "../../../../Elements/Tag/Tag.js";
+import { palettes } from "../../../../Elements/Tag/palettes.js";
+import { H6 } from "../../../../Elements/Typography/Typography.js";
+import "../../../../Elements/Typography/index.js";
+import { isFilterActive } from "../../utils/index.js";
+import useQuickFilter from "../../hooks/useQuickFilter.js";
+import "../../types.js";
+import ExtraControlButtons_default from "../ExtraControlButtons/index.js";
+import QuickFilter_default from "../QuickFilter/index.js";
+import { ControlButtonsContainer, Left, Right, StyledColumnButton } from "./styles.js";
+import { useEffect, useMemo } from "react";
+import { useColor, x } from "@xstyled/styled-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { i18n } from "@lingui/core";
+import { Trans } from "@lingui/react";
+//#region packages/ui/Blocks/CommonGrid/components/ControlButtons/ControlButtons.tsx
+const ControlButtons = ({ extraControlButtons, gridActions, gridSelectors, quickFilter = "", columns, filters, hideControlButtons, displayManageColumnButton, openManageColumnForm, setDisplayManageColumnButton, onOpenPresetsModal, gridName, selectedPresetName, withPresets, withManageColumnButton, onOpenMobileFilters, onOpenMobileSorting, isSortTerminated }) => {
+	const { searchedValue, translatedValue, onChangeInputValue, onClear, onClearSettings, onDisplayInput, displayInput, isMobileInputView, isMobile, filter } = useQuickFilter({
+		gridActions,
+		gridSelectors,
+		quickFilter,
+		columns,
+		filters
+	});
+	useEffect(() => {
+		setDisplayManageColumnButton(!isMobileInputView && !!withManageColumnButton);
+	}, [
+		isMobileInputView,
+		withManageColumnButton,
+		setDisplayManageColumnButton
+	]);
+	const red = useColor("red1");
+	const filtersCount = useMemo(() => filter ? Object.values(filter).filter((item) => isFilterActive(item.value)).length : 0, [filter]);
+	const hasFilterableColumns = !!columns?.some((col) => col.filtering);
+	const hasSortableColumns = !!columns?.some((col) => col.sorting);
+	const sortCount = gridSelectors.sorting?.length ?? 0;
+	return /* @__PURE__ */ jsxs(ControlButtonsContainer, { children: [/* @__PURE__ */ jsxs(Left, { children: [
+		!hideControlButtons && /* @__PURE__ */ jsxs(Fragment, { children: [
+			quickFilter && !isMobile && /* @__PURE__ */ jsx(QuickFilter_default, {
+				searchedValue,
+				placeholderText: i18n._({
+					id: "controlButtons.searchPlaceholder",
+					message: `Search ${translatedValue} ...`,
+					values: { translatedValue }
+				}),
+				onChange: onChangeInputValue,
+				onClear,
+				onClick: onDisplayInput,
+				displayInput,
+				isMobileInputView
+			}),
+			/* @__PURE__ */ jsx(ExtraControlButtons_default, {
+				extraControlButtons,
+				targetPosition: "top-left"
+			}),
+			/* @__PURE__ */ jsx(x.div, { children: !!filtersCount && !isMobile && /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				onClick: onClearSettings,
+				variant: "default",
+				appearance: "secondary",
+				"data-cy": "resetFiltersBtn",
+				children: /* @__PURE__ */ jsx(Trans, {
+					id: "dataGrid.buttonClearSettings",
+					message: "Reset"
+				})
+			}) })
+		] }),
+		isMobile && hasFilterableColumns && /* @__PURE__ */ jsxs(Button, {
+			type: "button",
+			appearance: filtersCount ? "primary" : "tertiary",
+			onClick: onOpenMobileFilters,
+			"data-cy": "mobileFilterBtn",
+			children: [/* @__PURE__ */ jsx(Filter, { fill: filtersCount ? "white" : red }), /* @__PURE__ */ jsxs(H6, {
+				variant: "semiBold",
+				mt: 0,
+				mb: 0,
+				ml: "6px",
+				children: [
+					/* @__PURE__ */ jsx(Trans, {
+						id: "dataGrid.filter",
+						message: "Filter"
+					}),
+					" ",
+					filtersCount > 0 && `(${filtersCount})`
+				]
+			})]
+		}),
+		isMobile && hasSortableColumns && /* @__PURE__ */ jsx(x.div, {
+			ml: "10px",
+			children: /* @__PURE__ */ jsxs(Button, {
+				type: "button",
+				appearance: sortCount ? "primary" : "tertiary",
+				onClick: onOpenMobileSorting,
+				disabled: isSortTerminated,
+				"data-cy": "mobileSortBtn",
+				children: [/* @__PURE__ */ jsx(Sort, { stroke: sortCount ? "white" : red }), /* @__PURE__ */ jsxs(H6, {
+					variant: "semiBold",
+					mt: 0,
+					mb: 0,
+					ml: "6px",
+					children: [
+						/* @__PURE__ */ jsx(Trans, {
+							id: "dataGrid.sort",
+							message: "Sort"
+						}),
+						" ",
+						sortCount > 0 && `(${sortCount})`
+					]
+				})]
+			})
+		}),
+		withPresets && gridName && !isMobile && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(x.div, {
+			mx: "12px",
+			children: /* @__PURE__ */ jsx(Button, {
+				onClick: onOpenPresetsModal,
+				type: "button",
+				variant: "default",
+				appearance: "tertiary",
+				children: /* @__PURE__ */ jsx(Trans, {
+					id: "dataGrid.presets.title",
+					message: "Presets"
+				})
+			})
+		}), selectedPresetName && /* @__PURE__ */ jsx(Tag, {
+			size: "medium",
+			...palettes.redWhite,
+			children: /* @__PURE__ */ jsx(H6, {
+				mt: 0,
+				mb: 0,
+				variant: "semiBold",
+				children: selectedPresetName
+			})
+		})] })
+	] }), /* @__PURE__ */ jsxs(Right, { children: [/* @__PURE__ */ jsx(ExtraControlButtons_default, {
+		extraControlButtons,
+		targetPosition: "top-right",
+		isMobile
+	}), displayManageColumnButton && !isMobile && /* @__PURE__ */ jsx(StyledColumnButton, {
+		type: "button",
+		variant: "ghost",
+		appearance: "primary",
+		iconLeft: /* @__PURE__ */ jsx(Settings2, {}),
+		onClick: openManageColumnForm,
+		children: /* @__PURE__ */ jsx(H6, {
+			variant: "semiBold",
+			mt: 0,
+			mb: 0,
+			children: /* @__PURE__ */ jsx(Trans, {
+				id: "manageColumn.title",
+				message: "Manage column"
+			})
+		})
+	})] })] });
+};
+//#endregion
+export { ControlButtons as default };

package/ui/Blocks/CommonGrid/components/ControlButtons/index.d.ts

@@ -1,3 +1,2 @@
-import { default as ControlButtons } from './ControlButtons';
-
+import ControlButtons from './ControlButtons';
 export default ControlButtons;

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

@@ -0,0 +1,5 @@
+import ControlButtons from "./ControlButtons.js";
+//#region packages/ui/Blocks/CommonGrid/components/ControlButtons/index.tsx
+var ControlButtons_default = ControlButtons;
+//#endregion
+export { ControlButtons_default as default };

package/ui/Blocks/CommonGrid/components/ControlButtons/styles.d.ts

@@ -1,4 +1,4 @@
-export declare const ControlButtonsContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const Left: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const Right: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const StyledColumnButton: import('styled-components').StyledComponent<import('react').FC<import('../../../../Elements/Button/types').Props>, import('@xstyled/system').Theme, {}, never>;
+export declare const ControlButtonsContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const Left: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const Right: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const StyledColumnButton: import("styled-components").StyledComponent<import("react").FC<import("../../../../Elements/Button/types").Props>, import("@xstyled/system").Theme, {}, never>;

package/ui/Blocks/CommonGrid/components/ControlButtons/styles.js

@@ -0,0 +1,42 @@
+import Button from "../../../../Elements/Button/Button.js";
+import "../../../../Elements/Button/index.js";
+import styled$1 from "@xstyled/styled-components";
+import { th as th$1 } from "/home/linomorfed/Projects/design-system/node_modules/@xstyled/system/dist/index.mjs";
+//#region packages/ui/Blocks/CommonGrid/components/ControlButtons/styles.ts
+const ControlButtonsContainer = styled$1.div`
+  display: flex;
+  position: sticky;
+  justify-content: space-between;
+  flex: 1;
+  left: 20px;
+`;
+const Left = styled$1.div`
+  display: flex;
+  margin-right: 10px;
+`;
+const Right = styled$1.div`
+  display: flex;
+`;
+const StyledColumnButton = styled$1(Button)`
+  position: sticky;
+  right: 20px;
+  z-index: 3;
+  margin-left: 8px;
+
+  > span > svg {
+    stroke: ${th$1("colors.blue2")};
+    width: 18px;
+    height: 18px;
+  }
+  > span > H6 {
+    display: none;
+  }
+  @media (min-width: 1024px) {
+    > span > H6 {
+      display: flex;
+      margin-left: 5px;
+    }
+  }
+`;
+//#endregion
+export { ControlButtonsContainer, Left, Right, StyledColumnButton };

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

@@ -1,6 +1,5 @@
-import { default as React } from 'react';
-import { ColumnDefinition, RowProps, Group } from '../types';
-
+import React from 'react';
+import { type ColumnDefinition, type RowProps, type Group } from '../types';
 type DataCellPros = {
     column: ColumnDefinition;
     rowData: RowProps;

package/ui/Blocks/CommonGrid/components/DataCell.js

@@ -0,0 +1,37 @@
+import { getCellSizeProps, getGroupClassNames, getStickyCollClassNames } from "../utils/index.js";
+import { TextCell } from "./Table.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+import get from "lodash/fp/get.js";
+//#region packages/ui/Blocks/CommonGrid/components/DataCell.tsx
+const DataCell = ({ column, group, rowData, onRowAction, displayColumnWidth, rowIndex }) => {
+	const Wrapper = column.fixedSize ? "div" : TextCell;
+	const wrapperBaseProps = column.fixedSize ? { style: {
+		...getCellSizeProps(column, displayColumnWidth),
+		alignSelf: "center"
+	} } : getCellSizeProps(column, displayColumnWidth);
+	const cellClassName = `cell${getStickyCollClassNames(!!column.sticky, column.stickTo)} ${getGroupClassNames(group)}`;
+	if (column.cellComponent) return /* @__PURE__ */ jsx(Wrapper, {
+		className: cellClassName,
+		...wrapperBaseProps,
+		children: /* @__PURE__ */ jsx(column.cellComponent, {
+			rowData,
+			onRowAction,
+			column,
+			rowIndex
+		})
+	});
+	else return /* @__PURE__ */ jsx(Wrapper, {
+		className: cellClassName,
+		...wrapperBaseProps,
+		children: column.formatRowValue ? column.formatRowValue(rowData) : get(column.name, rowData)
+	});
+};
+const MemoDataCell = React.memo(DataCell, (prevProps, newProps) => {
+	if (prevProps.rowData !== newProps.rowData || prevProps.displayColumnWidth !== newProps.displayColumnWidth || prevProps.column?.fixedSize != newProps.column?.fixedSize || prevProps.column?.flexGrow != newProps.column?.flexGrow || prevProps.column?.flexShrink != newProps.column?.flexShrink || prevProps.group?.start != newProps.group?.start || prevProps.group?.end != newProps.group?.end) return false;
+	if ((prevProps.column?.formatRowValue || newProps.column?.formatRowValue) && prevProps.column?.formatRowValue !== newProps.column?.formatRowValue) return false;
+	if ((prevProps.column?.cellComponent || newProps.column?.cellComponent) && (prevProps.column?.cellComponent !== newProps.column?.cellComponent || prevProps.onRowAction !== newProps.onRowAction)) return false;
+	return true;
+});
+//#endregion
+export { MemoDataCell as default };

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

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { ColumnDefinition, RowProps, UxState, GridSelectorsType, Group } from '../types';
-
+import type { FC } from 'react';
+import type { ColumnDefinition, RowProps, UxState, GridSelectorsType, Group } from '../types';
 type DataRowProps = {
     columns: ColumnDefinition[];
     rowData: RowProps;

package/ui/Blocks/CommonGrid/components/DataRow.js

@@ -0,0 +1,62 @@
+import { rowClassSymbol } from "../types.js";
+import { StyledDataRow } from "./Table.js";
+import MemoDataCell from "./DataCell.js";
+import { useTimeMeasurement } from "./utils.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Blocks/CommonGrid/components/DataRow.tsx
+const DataRow = ({ columns, rowData, rowIndex, uxState, allowRowSelect, allowRowSelectOnAction, onUxChange, onRowClick, onRowAction, displayColumnsWidth, groups, isEven }) => {
+	const isChecked = !!uxState.checkedRows?.[rowData.id];
+	const handleRowAction = React.useCallback((id, field, value, rowData) => {
+		onRowAction?.(id, field, value, rowData);
+		if (allowRowSelectOnAction) onUxChange?.("selectedRow", id);
+	}, [
+		onRowAction,
+		allowRowSelectOnAction,
+		onUxChange
+	]);
+	const { handleMouseDown, handleMouseUp } = useTimeMeasurement({ handleRowClick: React.useCallback((e) => {
+		const classes = Object.values(e.target.classList);
+		const parent = e.target.closest(".cell");
+		let canPropagation = e.target.dataset?.propagation === "true";
+		let child = e.target;
+		while (child && child !== parent && !canPropagation) {
+			child = child.parentElement;
+			canPropagation = child?.dataset?.propagation === "true";
+		}
+		if (!classes.includes("dataRow") && !classes.includes("cell") && !canPropagation) return;
+		if (onUxChange && allowRowSelect) onUxChange("selectedRow", rowData.id);
+		if (onRowClick) onRowClick(rowData.id, rowData);
+	}, [
+		onRowClick,
+		onUxChange,
+		rowData
+	]) });
+	return /* @__PURE__ */ jsx(StyledDataRow, {
+		className: React.useMemo(() => {
+			const classes = ["dataRow"];
+			if (isChecked) classes.push("checked");
+			if (uxState.selectedRow === rowData.id && (allowRowSelect || allowRowSelectOnAction)) classes.push("selected");
+			if (rowData[rowClassSymbol]) classes.push(rowData[rowClassSymbol] || "");
+			return classes.join(" ");
+		}, [
+			isChecked,
+			uxState,
+			rowData
+		]),
+		hasRowClick: !!onRowClick,
+		onMouseDown: handleMouseDown,
+		onMouseUp: handleMouseUp,
+		isEven: !!isEven,
+		children: columns.map((column, key) => /* @__PURE__ */ jsx(MemoDataCell, {
+			column,
+			rowData,
+			rowIndex,
+			onRowAction: handleRowAction,
+			displayColumnWidth: displayColumnsWidth[column.name],
+			group: groups?.[key]
+		}, column.name))
+	});
+};
+//#endregion
+export { DataRow as default };

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

@@ -1,7 +1,6 @@
-import { ReactNode, FC } from 'react';
-import { AppearanceValue } from '../../../../Elements/Button/types';
-import { Item } from '../../types';
-
+import { type ReactNode, type FC } from 'react';
+import { type AppearanceValue } from '../../../../Elements/Button/types';
+import { type Item } from '../../types';
 type Props = {
     label: string | ReactNode;
     items: Item[];

package/ui/Blocks/CommonGrid/components/DropdownButton/DropdownButton.js

@@ -0,0 +1,69 @@
+import { ArrowDown } from "../../../../Elements/Icon/icons/ArrowDown.js";
+import { ArrowUp } from "../../../../Elements/Icon/icons/ArrowUp.js";
+import "../../../../Elements/Icon/index.js";
+import Button from "../../../../Elements/Button/Button.js";
+import { DropdownMenu } from "../../../../Elements/DropdownMenu/DropdownMenu.js";
+import "../../../../Elements/DropdownMenu/index.js";
+import { useClickOutside } from "../../../Modal/hooks/useClickOutside.js";
+import React, { useCallback, useState } from "react";
+import styled$1 from "@xstyled/styled-components";
+import { th as th$1 } from "/home/linomorfed/Projects/design-system/node_modules/@xstyled/system/dist/index.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Blocks/CommonGrid/components/DropdownButton/DropdownButton.tsx
+const ButtonWrapper = styled$1.div`
+  position: relative;
+  width: fit-content;
+`;
+const StyledDropdownMenu = styled$1(DropdownMenu)`
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  width: max-content;
+  z-index: 2;
+`;
+const StyledButton = styled$1(Button)`
+  padding-right: 0;
+`;
+const StyledIcon = styled$1.div`
+  width: 20px;
+  height: 20px;
+  margin: 9px;
+  & > svg {
+    stroke: ${({ appearance }) => appearance === "secondary" ? th$1.color("blue2") : appearance === "tertiary" ? th$1.color("red1") : "white"};
+  }
+`;
+const Separator = styled$1.div`
+  height: 38px;
+  width: 1px;
+  background-color: white;
+  margin-left: 18px;
+`;
+const DropdownButton = ({ label, items, appearance }) => {
+	const [showDropdownMenu, setShowDropdownMenu] = useState(false);
+	const onClose = useCallback(() => {
+		setShowDropdownMenu(false);
+	}, []);
+	const handleClick = React.useCallback(() => {
+		setShowDropdownMenu((prev) => !prev);
+	}, []);
+	return /* @__PURE__ */ jsxs(ButtonWrapper, {
+		ref: useClickOutside({ onClose }),
+		children: [/* @__PURE__ */ jsxs(StyledButton, {
+			onClick: handleClick,
+			appearance,
+			children: [
+				label,
+				/* @__PURE__ */ jsx(Separator, {}),
+				/* @__PURE__ */ jsx(StyledIcon, {
+					appearance,
+					children: showDropdownMenu ? /* @__PURE__ */ jsx(ArrowUp, {}) : /* @__PURE__ */ jsx(ArrowDown, {})
+				})
+			]
+		}), /* @__PURE__ */ jsx(StyledDropdownMenu, {
+			showMenu: showDropdownMenu,
+			items
+		})]
+	});
+};
+//#endregion
+export { DropdownButton as default };

package/ui/Blocks/CommonGrid/components/DropdownButton/index.d.ts

@@ -1,3 +1,2 @@
-import { default as DropdownButton } from './DropdownButton';
-
+import DropdownButton from './DropdownButton';
 export default DropdownButton;

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

@@ -0,0 +1,5 @@
+import DropdownButton from "./DropdownButton.js";
+//#region packages/ui/Blocks/CommonGrid/components/DropdownButton/index.ts
+var DropdownButton_default = DropdownButton;
+//#endregion
+export { DropdownButton_default as default };

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

@@ -1,7 +1,6 @@
-import { FC } from 'react';
-import { CommonGridProps, ExtraControlButton } from '../../types';
-
-export declare const Row: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+import { type FC } from 'react';
+import { type CommonGridProps, type ExtraControlButton } from '../../types';
+export declare const Row: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
 type Props = {
     extraControlButtons: CommonGridProps['extraControlButtons'];
     targetPosition?: ExtraControlButton['position'];