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

package/ui/Blocks/CommonGrid/CommonGridContainer.js

@@ -0,0 +1,189 @@
+import Pagination from "../../Elements/Pagination/Pagination.js";
+import "../../Elements/Pagination/index.js";
+import { useCheckDeviceWidth } from "../../utils/CheckDeviceWidth/checkDeviceWidth.js";
+import HidePrint from "../HidePrint/HidePrint.js";
+import { useModal } from "../Modal/hooks/useModal.js";
+import ActionHead_default from "./components/ActionHead/index.js";
+import { getFilters } from "./utils/index.js";
+import ControlButtons_default from "./components/ControlButtons/index.js";
+import { GridInfo } from "./components/GridInfo/index.js";
+import { GridModals } from "./components/GridModals/index.js";
+import MobileFilterModal from "./components/MobileFilterModal.js";
+import MobileSortModal from "./components/MobileSortModal.js";
+import TablePagination_default from "./components/TablePagination/index.js";
+import useEditReadAsColumn from "./hooks/useEditReadAsColumn.js";
+import { useGridAutoRowsPerPage } from "./hooks/useGridAutoRowsPerPage.js";
+import useManageColumn from "./hooks/useManageColumn.js";
+import { usePresetState } from "./hooks/usePresetsState.js";
+import { getExtendedExtraControlButtons } from "./utils/getExtendedExtraControlButtons.js";
+import { getRowsPerPage } from "./utils/getRowsPerPage.js";
+import { hasSortTerminated } from "./utils/hasSortTerminated.js";
+import { BottomWrapper, CommonGridWithStyles, CommonGridWrap, ContentContainer, StyledButtonStrip } from "./styles.js";
+import { useMemo, useRef, useState } from "react";
+import { x } from "@xstyled/styled-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Blocks/CommonGrid/CommonGridContainer.tsx
+const CommonGridContainer = (props) => {
+	const { optimizeFilters = false, extraControlButtons, onBatchAction, processCheckedValues, processCheckedValuesTitle, hideControlButtons, quickFilter, floatingButtonProps, queryRowsParam, customPaginationHandler, autoHeight = true, gridName, withPresets = true, withManageColumnButton = true, withPagination = true, allowSortingOnlyUnderTotalRows, onReload, ...passDownProps } = props;
+	const { gridActions, gridSelectors, rowsData, actionColumnDefinition } = passDownProps;
+	const extendedExtraControlButtons = useMemo(() => getExtendedExtraControlButtons(extraControlButtons, onReload), [extraControlButtons, onReload]);
+	const [displayManageColumnButton, setDisplayManageColumnButton] = useState(false);
+	const gridRef = useRef(null);
+	const withButtonStrip = !!extendedExtraControlButtons?.length || !hideControlButtons || !!withPresets || !!withManageColumnButton;
+	const hasGroups = !!props.columnsDefinitions.find((col) => col.group);
+	const hasFilters = !!props.columnsDefinitions.find((col) => col.filtering);
+	const hasGroupsOrFilters = hasGroups || hasFilters;
+	const autoRowsPerPage = getRowsPerPage(gridRef, withPagination, withButtonStrip, hasGroupsOrFilters);
+	const { isMobile } = useCheckDeviceWidth();
+	useGridAutoRowsPerPage({
+		autoHeight,
+		gridActions,
+		queryRowsParam,
+		selectedRowsPerPage: gridSelectors.rowsPerPage,
+		autoRowsPerPage
+	});
+	const modifiedPassDownProps = useEditReadAsColumn(passDownProps);
+	const filters = useMemo(() => getFilters(optimizeFilters), [optimizeFilters]);
+	const columns = modifiedPassDownProps.columnsDefinitions;
+	const { onOpen: openManageColumnForm, isOpen: manageColumnFormVisible, onClose } = useModal();
+	const { columnsConfigValues, setColumnsConfigOptions, onConfirmForm, resetColumnConfig, handleDragEnd, onCloseForm, displayColumnsDefinitions, manageColumnsFormDefinitions } = useManageColumn({
+		columns,
+		gridActions,
+		gridSelectors,
+		onClose
+	});
+	const { isPresetsModalOpen, onClosePresetsModal, onOpenPresetsModal, setSelectedPresetName, selectedPresetName } = usePresetState();
+	const { isOpen: isMobileFilterOpen, onOpen: onOpenMobileFilter, onClose: closeMobileFilter } = useModal();
+	const { isOpen: isMobileSortOpen, onOpen: onOpenMobileSort, onClose: closeMobileSort } = useModal();
+	const { isSortTerminatedAppeal, isSortTerminated } = hasSortTerminated({
+		allowSortingOnlyUnderTotalRows,
+		totalRowsCount: passDownProps?.totalRowsCount
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsxs(ContentContainer, {
+			ref: gridRef,
+			children: [/* @__PURE__ */ jsxs(CommonGridWrap, {
+				withPagination,
+				children: [withButtonStrip && /* @__PURE__ */ jsx(HidePrint, { children: /* @__PURE__ */ jsx(StyledButtonStrip, {
+					className: "buttonsStrip",
+					children: /* @__PURE__ */ jsx(ControlButtons_default, {
+						hideControlButtons,
+						extraControlButtons: extendedExtraControlButtons,
+						gridActions,
+						gridSelectors,
+						quickFilter,
+						columns,
+						filters,
+						setDisplayManageColumnButton,
+						displayManageColumnButton,
+						openManageColumnForm,
+						onOpenPresetsModal,
+						selectedPresetName,
+						withPresets,
+						gridName,
+						withManageColumnButton,
+						onOpenMobileFilters: onOpenMobileFilter,
+						onOpenMobileSorting: onOpenMobileSort,
+						isSortTerminated
+					})
+				}) }), /* @__PURE__ */ jsx(CommonGridWithStyles, {
+					...passDownProps,
+					...modifiedPassDownProps,
+					withButtonStrip,
+					hasGroupsOrFilters,
+					filters,
+					floatingButtonProps,
+					handleDragEnd: handleDragEnd(false),
+					displayColumnsDefinitions,
+					hasFilters,
+					hasGroups,
+					isSortTerminated,
+					hasColouredRows: true
+				})]
+			}), /* @__PURE__ */ jsxs(BottomWrapper, {
+				withPagination,
+				children: [(processCheckedValues || !!actionColumnDefinition?.actionOptions?.length) && /* @__PURE__ */ jsx(ActionHead_default, {
+					rowsData,
+					onBatchAction,
+					gridActions,
+					gridSelectors,
+					actionOptions: actionColumnDefinition?.actionOptions,
+					processCheckedValues,
+					processCheckedValuesTitle
+				}), /* @__PURE__ */ jsxs(x.div, {
+					display: "flex",
+					justifyContent: "space-between",
+					alignItems: "center",
+					w: "100%",
+					children: [!isMobile && /* @__PURE__ */ jsx(GridInfo, {
+						isSortTerminatedAppeal,
+						isSortTerminated
+					}), withPagination && /* @__PURE__ */ jsxs(x.div, {
+						display: "flex",
+						alignItems: "center",
+						className: "paginatorWrapper",
+						w: "100%",
+						justifyContent: "flex-end",
+						gap: "16px",
+						children: [/* @__PURE__ */ jsx(Pagination, {
+							page: gridSelectors?.page,
+							itemCount: passDownProps?.totalRowsCount,
+							itemPerPage: gridSelectors?.rowsPerPage || 10,
+							onPageChange: gridActions?.setPage,
+							customPaginationHandler,
+							radius: isMobile ? 3 : 5,
+							rate: isMobile ? 1 : 4
+						}), /* @__PURE__ */ jsx(TablePagination_default, {
+							gridActions,
+							gridSelectors,
+							customPaginationHandler,
+							autoRowsPerPage
+						})]
+					})]
+				})]
+			})]
+		}),
+		/* @__PURE__ */ jsx(GridModals, {
+			manageColumnFormVisible,
+			onCloseForm,
+			resetColumnConfig,
+			onConfirmForm,
+			manageColumnsFormDefinitions,
+			columnsConfigValues,
+			setColumnsConfigOptions,
+			handleDragEnd: handleDragEnd(true),
+			gridName,
+			gridActions,
+			gridSelectors,
+			onClosePresetsModal,
+			isPresetsModalOpen,
+			selectedPresetName,
+			setSelectedPresetName
+		}),
+		isMobileFilterOpen && gridActions.setFilters && /* @__PURE__ */ jsx(MobileFilterModal, {
+			isShown: isMobileFilterOpen,
+			onClose: closeMobileFilter,
+			columns: displayColumnsDefinitions,
+			filters,
+			comparators: passDownProps.comparators,
+			filterValues: gridSelectors.filter,
+			setFilters: gridActions.setFilters,
+			rowsData,
+			uxState: gridSelectors.uxState || {},
+			handleUxChange: gridActions.handleUxChange,
+			onAsyncLoadFilterOptions: passDownProps.onAsyncLoadFilterOptions,
+			actionColumn: actionColumnDefinition,
+			onClearSettings: gridActions.clearSettings
+		}),
+		isMobileSortOpen && gridActions.addSorting && /* @__PURE__ */ jsx(MobileSortModal, {
+			isShown: isMobileSortOpen,
+			onClose: closeMobileSort,
+			columns: displayColumnsDefinitions,
+			sortingValues: gridSelectors.sorting,
+			onAddSorting: gridActions.addSorting,
+			onResetSorting: gridActions.resetSorting
+		})
+	] });
+};
+//#endregion
+export { CommonGridContainer as default };

package/ui/Blocks/CommonGrid/HoC/withProps.d.ts

@@ -1,4 +1,3 @@
-import { FC } from 'react';
-
+import type { FC } from 'react';
 declare const withProps: (input: any) => <P>(Component: FC<P>) => FC<P>;
 export default withProps;

package/ui/Blocks/CommonGrid/HoC/withProps.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Blocks/CommonGrid/HoC/withProps.tsx
+const withProps = (input) => (Component) => function ComponentWithProps(props) {
+	const additinalProps = typeof input === "function" ? input(props) : input;
+	return /* @__PURE__ */ jsx(Component, {
+		...props,
+		...additinalProps
+	});
+};
+//#endregion
+export { withProps as default };

package/ui/Blocks/CommonGrid/HoC/withReduxActions.d.ts

@@ -1,2 +1,2 @@
-declare const withReduxActions: (gridName: string, prefix?: string) => import('react-redux').InferableComponentEnhancerWithProps<{}, {}>;
+declare const withReduxActions: (gridName: string, prefix?: string) => import("react-redux").InferableComponentEnhancerWithProps<{}, {}>;
 export default withReduxActions;

package/ui/Blocks/CommonGrid/HoC/withReduxActions.js

@@ -0,0 +1,32 @@
+import { createActions, createFullSelector } from "../store/index.js";
+import { connect } from "react-redux";
+import { bindActionCreators } from "redux";
+//#region packages/ui/Blocks/CommonGrid/HoC/withReduxActions.ts
+const withReduxActions = (gridName, prefix = "grid") => {
+	const actions = createActions(gridName);
+	const selectors = createFullSelector(gridName);
+	return connect((state) => ({ [`${prefix}Selectors`]: selectors(state) }), (dispatch) => ({ [`${prefix}Actions`]: bindActionCreators({
+		init: actions.init,
+		clearUxState: actions.clearUxState,
+		handleUxChange: actions.handleUxChange,
+		openConfigForm: actions.openConfigForm,
+		closeConfigForm: actions.closeConfigForm,
+		setColumnConfig: actions.setColumnConfig,
+		setPage: actions.setPage,
+		setPresets: actions.setPresets,
+		createPreset: actions.createPreset,
+		deletePreset: actions.deletePreset,
+		setRowsPerPage: actions.setRowsPerPage,
+		addFilter: actions.addFilter,
+		setFilters: actions.setFilters,
+		resetFilters: actions.resetFilters,
+		addSorting: actions.addSorting,
+		resetSorting: actions.resetSorting,
+		clearSettings: actions.clearSettings,
+		setColumnWidth: actions.setColumnWidth,
+		resetGrid: actions.resetGrid,
+		setColumnsOrder: actions.setColumnsOrder
+	}, dispatch) }));
+};
+//#endregion
+export { withReduxActions as default };

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

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { GridActionsType, GridSelectorsType, OnBatchActionFn, RowProps, ActionColumn } from '../../types';
-
+import { type FC } from 'react';
+import { type GridActionsType, type GridSelectorsType, type OnBatchActionFn, type RowProps, type ActionColumn } from '../../types';
 type Props = {
     gridActions: GridActionsType;
     gridSelectors: GridSelectorsType;

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

@@ -0,0 +1,109 @@
+import Button from "../../../../Elements/Button/Button.js";
+import "../../../../Elements/Button/index.js";
+import { useGridActionTrigger } from "../../hooks/useGridActionTrigger.js";
+import { useToggleAllCheckbox } from "../../hooks/useToggleAllCheckbox.js";
+import ButtonMore from "../ButtonMore/ButtonMore.js";
+import { useCallback, useMemo } from "react";
+import styled$1 from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { i18n } from "@lingui/core";
+import { Trans } from "@lingui/react";
+//#region packages/ui/Blocks/CommonGrid/components/ActionHead/ActionHead.tsx
+const Wrap = styled$1.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin-right: 2;
+  gap: 24px;
+  background-color: red;
+  position: relative;
+`;
+const ActionsWrap = styled$1.div`
+  position: absolute;
+  bottom: 32px;
+  left: 50%;
+  transform: translate(-50%);
+  width: 596px;
+  padding: 12px 24px;
+  border-radius: 10px;
+  background-color: #fff;
+  box-shadow: dropShadow;
+  z-index: 2;
+`;
+const StyledText = styled$1.span`
+  font-size: 14px;
+  line-height: 18px;
+  color: blue2;
+  font-weight: 600;
+`;
+const ContentWrap = styled$1.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+const ButtonsWrap = styled$1.div`
+  display: flex;
+  align-items: center;
+  margin-left: 10px;
+
+  & > * {
+    margin-left: 10px;
+  }
+`;
+const ActionHead = ({ gridActions, gridSelectors, actionOptions, onBatchAction, rowsData, processCheckedValues, processCheckedValuesTitle }) => {
+	const { handleUxChange } = gridActions || {};
+	const { uxState = {} } = gridSelectors || {};
+	const [checked, toggleCheckbox] = useToggleAllCheckbox(rowsData, uxState, handleUxChange);
+	const [enabledActions, onSubmit] = useGridActionTrigger(rowsData, uxState, actionOptions, onBatchAction);
+	const checkedRowsCount = Object.keys(uxState?.checkedRows || []).length;
+	const checkAll = useCallback(() => {
+		if (!checked) toggleCheckbox();
+	}, [checked, toggleCheckbox]);
+	const actionsOptions = useMemo(() => {
+		if (actionOptions?.length) return actionOptions.map((option) => ({
+			title: option.label,
+			onClick: () => {
+				onSubmit(option.value);
+			},
+			link: "#"
+		}));
+		return [];
+	}, [actionOptions, onSubmit]);
+	return /* @__PURE__ */ jsx(Wrap, { children: checkedRowsCount > 0 && /* @__PURE__ */ jsx(ActionsWrap, { children: /* @__PURE__ */ jsxs(ContentWrap, { children: [/* @__PURE__ */ jsx(StyledText, { children: i18n._({
+		id: "dataGrid.checkedRowsCount",
+		message: `Selected {checkedRowsCount} items`,
+		values: { checkedRowsCount }
+	}) }), /* @__PURE__ */ jsxs(ButtonsWrap, { children: [
+		/* @__PURE__ */ jsx(Button, {
+			type: "button",
+			onClick: checkAll,
+			appearance: "secondary",
+			variant: "default",
+			"data-cy": "checkAllBtn",
+			disabled: checked,
+			children: /* @__PURE__ */ jsx(Trans, {
+				id: "dataGrid.checkAll",
+				message: "Check all"
+			})
+		}),
+		processCheckedValues && /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			onClick: processCheckedValues,
+			appearance: "primary",
+			variant: "default",
+			"data-cy": "exportBtn",
+			disabled: !rowsData.length,
+			children: processCheckedValuesTitle || /* @__PURE__ */ jsx(Trans, {
+				id: "dataGrid.actionOptions.export",
+				message: "Export"
+			})
+		}),
+		actionOptions?.length && /* @__PURE__ */ jsx(ButtonMore, {
+			items: actionsOptions,
+			disabled: !enabledActions.length || !rowsData.length,
+			dropdownPosition: "top"
+		})
+	] })] }) }) });
+};
+//#endregion
+export { ActionHead as default };

package/ui/Blocks/CommonGrid/components/ActionHead/components/ActionDropdownMenu.d.ts

@@ -1,5 +1,4 @@
-import { FC, ReactNode } from 'react';
-
+import { type FC, type ReactNode } from 'react';
 type ItemType = {
     title: string | ReactNode;
     onClick: () => void;

package/ui/Blocks/CommonGrid/components/ActionHead/components/ActionDropdownMenu.js

@@ -0,0 +1,39 @@
+import "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 } from "react/jsx-runtime";
+//#region packages/ui/Blocks/CommonGrid/components/ActionHead/components/ActionDropdownMenu.tsx
+const StyledDropdownWrap = styled$1.div`
+  position: relative;
+  left: 0;
+  top: 3px;
+  display: flex;
+  flex-direction: column;
+  padding: 2;
+  width: 100%;
+  background-color: ${th$1.color("white")};
+  box-shadow: ${th$1.shadow("dropShadow")};
+  min-width: 8.9rem;
+  font-size: 12px;
+  font-weight: normal;
+  border-radius: 10px;
+  z-index: 1;
+`;
+const StyledDropdownItem = styled$1.li`
+  padding: 2 2;
+  border-radius: 6px;
+  cursor: pointer;
+  &:hover {
+    background-color: ${th$1.color("bgLightGray1")};
+    color: ${th$1.color("typoPrimary")};
+    font-weight: bold;
+  }
+`;
+const ActionDropdownMenu = ({ items }) => {
+	return /* @__PURE__ */ jsx(StyledDropdownWrap, { children: items.map((item, index) => /* @__PURE__ */ jsx(StyledDropdownItem, {
+		onClick: item.onClick ?? void 0,
+		children: item.title
+	}, index)) });
+};
+//#endregion
+export { ActionDropdownMenu as default };

package/ui/Blocks/CommonGrid/components/ActionHead/components/ActionDropdownSelect.d.ts

@@ -1,5 +1,4 @@
-import { default as React, ReactNode } from 'react';
-
+import React, { type ReactNode } from 'react';
 type Item = {
     label: string | ReactNode;
     value: string;

package/ui/Blocks/CommonGrid/components/ActionHead/components/ActionDropdownSelect.js

@@ -0,0 +1,81 @@
+import Icon from "../../../../../Elements/Icon/Icon.js";
+import Popover from "../../../../Popover/index.js";
+import ActionDropdownMenu from "./ActionDropdownMenu.js";
+import React, { memo, useRef } 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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Trans } from "@lingui/react";
+//#region packages/ui/Blocks/CommonGrid/components/ActionHead/components/ActionDropdownSelect.tsx
+const Content = styled$1.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 1 2;
+  min-width: 9rem;
+  height: 28px;
+  background-color: ${th$1.color("white")};
+  color: ${({ $isDisabled }) => $isDisabled ? th$1.color("lightGray7") : th$1.color("lightGray5")};
+  border: slim;
+  border-color: ${({ $isDisabled, $isOpened }) => $isDisabled ? th$1.color("lightGray7") : $isOpened ? th$1.color("blue2") : th$1.color("lightGray5")};
+  font-size: 12px;
+  font-weight: 600;
+  border-radius: 6px;
+  cursor: ${({ $isDisabled }) => $isDisabled ? "not-allowed" : "pointer"};
+  transition: 0.2s;
+  &:not(:disabled):hover {
+    color: ${th$1.color("gray1")};
+    border-color: ${th$1.color("gray1")};
+  }
+  p {
+    margin: 0;
+    margin-right: auto;
+    padding-right: 36px;
+  }
+`;
+const IconWrap = styled$1.div`
+  color: ${({ $isDisabled, $isOpened }) => $isDisabled ? th$1.color("lightGray6") : $isOpened ? th$1.color("blue2") : th$1.color("gray1")};
+  font-size: 0.8rem;
+  font-weight: 1000;
+  transform: rotate(${({ $isOpened }) => $isOpened ? "180deg" : 0});
+`;
+const ActionDropdownSelect = ({ options, onSelect, disabled = false }) => {
+	const [showDropdownMenu, setShowDropdownMenu] = React.useState(false);
+	const toggleDropdownMenu = React.useCallback(() => {
+		setShowDropdownMenu((prev) => !prev);
+	}, []);
+	const handleSelectItem = React.useCallback((item) => {
+		setShowDropdownMenu(false);
+		onSelect(item.value);
+	}, [onSelect]);
+	const items = options.map((item) => ({
+		title: item.label,
+		onClick: () => {
+			handleSelectItem(item);
+		},
+		link: "#"
+	}));
+	const ref = useRef(null);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Content, {
+		$isDisabled: disabled,
+		$isOpened: showDropdownMenu,
+		onClick: toggleDropdownMenu,
+		ref,
+		children: [/* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(Trans, {
+			id: "dataGrid.buttonActions",
+			message: "Actions"
+		}) }), /* @__PURE__ */ jsx(IconWrap, {
+			$isDisabled: disabled,
+			$isOpened: showDropdownMenu,
+			children: /* @__PURE__ */ jsx(Icon, { icon: "goDown" })
+		})]
+	}), showDropdownMenu && !disabled && items?.length > 0 && /* @__PURE__ */ jsx(Popover, {
+		parentRef: ref,
+		onClose: toggleDropdownMenu,
+		placement: "bottom-start",
+		children: /* @__PURE__ */ jsx(ActionDropdownMenu, { items })
+	})] });
+};
+var ActionDropdownSelect_default = memo(ActionDropdownSelect);
+//#endregion
+export { ActionDropdownSelect_default as default };

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

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

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

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

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

@@ -1,5 +1,5 @@
-import { default as React, FC } from 'react';
-
+import React from 'react';
+import type { FC } from 'react';
 type ItemType = {
     title: string | React.ReactElement;
     onClick: () => void;

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

@@ -0,0 +1,45 @@
+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 { useCallback, useState } from "react";
+import styled$1 from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Blocks/CommonGrid/components/ButtonMore/ButtonMore.tsx
+const ButtonWrapper = styled$1.div`
+  position: relative;
+  width: fit-content;
+`;
+const StyledDropdownMenu = styled$1(DropdownMenu)`
+  position: absolute;
+  top: ${({ dropdownPosition }) => !dropdownPosition || dropdownPosition === "bottom" ? "calc(100% + 8px)" : "auto"};
+  bottom: ${({ dropdownPosition }) => dropdownPosition === "top" ? "calc(100% + 13px)" : "auto"};
+  right: 0;
+  width: max-content;
+  z-index: 2;
+`;
+const ButtonMore = ({ items, disabled, dropdownPosition }) => {
+	const [actionsVisible, setActionsVisible] = useState(false);
+	return /* @__PURE__ */ jsxs(ButtonWrapper, {
+		ref: useClickOutside({ onClose: useCallback(() => {
+			setActionsVisible(false);
+		}, []) }),
+		children: [/* @__PURE__ */ jsx(Button, {
+			onClick: useCallback(() => {
+				setActionsVisible(!actionsVisible);
+			}, [actionsVisible]),
+			icon: "ellipsisVertical",
+			appearance: "secondary",
+			variant: "icon",
+			type: "button",
+			"data-cy": "gridActionBtn",
+			disabled
+		}), /* @__PURE__ */ jsx(StyledDropdownMenu, {
+			showMenu: actionsVisible,
+			items,
+			dropdownPosition
+		})]
+	});
+};
+//#endregion
+export { ButtonMore as default };

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

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

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

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

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

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { ColumnDefinition, GridActionsType, FiltersConfig, CustomComparators, Group, ActionColumn, UxState, RowProps } from '../types';
-
+import type { FC } from 'react';
+import type { ColumnDefinition, GridActionsType, FiltersConfig, CustomComparators, Group, ActionColumn, UxState, RowProps } from '../types';
 type Props = {
     onChange: Required<GridActionsType>['addFilter'];
     value?: any;

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

@@ -0,0 +1,53 @@
+import { createFilterType, getCellSizeProps, getGroupClassNames, getStickyCollClassNames } from "../utils/index.js";
+import { useAddFilter } from "../hooks/useAddFilter.js";
+import { Cell } from "./Table.js";
+import OverlayComponent from "./FilterDropdown.js";
+import React from "react";
+import { x } from "@xstyled/styled-components";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Blocks/CommonGrid/components/ColumnFilterCell.tsx
+const ColumnFilterCell = ({ onChange, value, others, displayColumnWidth, filters, column: columnDefinition, group, comparators, actionColumn, rowsData, uxState, handleUxChange, onAsyncLoadFilterOptions }) => {
+	const cellSizeProps = getCellSizeProps(columnDefinition, displayColumnWidth);
+	const handleAddFilter = useAddFilter(onChange);
+	const handleChange = React.useCallback((event, others) => {
+		handleAddFilter(event?.target ? event.target.value : event, columnDefinition, others);
+	}, [handleAddFilter, columnDefinition]);
+	const cellClassName = `cell${getStickyCollClassNames(!!columnDefinition.sticky, columnDefinition.stickTo)} ${getGroupClassNames(group)}`;
+	if (!columnDefinition.filtering) return /* @__PURE__ */ jsx(Cell, {
+		className: cellClassName,
+		...cellSizeProps
+	});
+	const filterType = createFilterType(columnDefinition);
+	const filterConfig = filters?.[filterType];
+	const defaultComparators = comparators?.[filterType];
+	const RenderComponent = filterConfig?.CellComponent;
+	if (!RenderComponent) {
+		console.error(`ERROR, using unknown filter type ${filterType}`);
+		return /* @__PURE__ */ jsx(x.div, { children: /* @__PURE__ */ jsx("span", { children: `${filterType} filter` }) });
+	}
+	return /* @__PURE__ */ jsx(Cell, {
+		className: cellClassName,
+		...cellSizeProps,
+		children: /* @__PURE__ */ jsx(x.div, { children: /* @__PURE__ */ jsx(RenderComponent, {
+			asyncLoadKey: columnDefinition.asyncLoadKey,
+			"data-test": columnDefinition.name,
+			name: columnDefinition.name,
+			onChange: handleChange,
+			value,
+			others,
+			OverlayComponent,
+			comparators: defaultComparators,
+			actionColumn,
+			rowsData,
+			uxState,
+			handleUxChange,
+			onAsyncLoadFilterOptions,
+			...filterConfig?.defaultExtraProps,
+			...columnDefinition.filterExtraProps,
+			...filterType == "options" && { options: columnDefinition.filterOptions },
+			columnWidth: cellSizeProps?.flexBasis
+		}) })
+	});
+};
+//#endregion
+export { ColumnFilterCell as default };

package/ui/Blocks/CommonGrid/components/ColumnTitle/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 ColumnTitle: React.FC<ColumnTitleComponentType>;
 export default ColumnTitle;