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

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

@@ -0,0 +1,70 @@
+import Button_default from "../../../Elements/Button/index.js";
+import { getSortName } from "../utils/index.js";
+import { Modal } from "../../Modal/Modal.js";
+import { SortingDown, SortingUp } from "./icons/Sorting.js";
+import { useCallback } from "react";
+import { x } from "@xstyled/styled-components";
+import { jsx } from "react/jsx-runtime";
+import { Trans } from "@lingui/react";
+//#region packages/ui/Blocks/CommonGrid/components/MobileSortModal.tsx
+const AscIcon = /* @__PURE__ */ jsx(SortingUp, {
+	width: "16",
+	fill: "white"
+});
+const DescIcon = /* @__PURE__ */ jsx(SortingDown, {
+	width: "16",
+	fill: "white"
+});
+const SortRow = ({ column, currentDirection, onCycle }) => {
+	return /* @__PURE__ */ jsx(Button_default, {
+		type: "button",
+		onClick: useCallback(() => {
+			onCycle(column);
+		}, [column, onCycle]),
+		appearance: currentDirection ? "primary" : "secondary",
+		iconRight: currentDirection === "asc" ? AscIcon : currentDirection === "desc" ? DescIcon : null,
+		fullWidth: true,
+		children: column.title
+	});
+};
+const MobileSortModal = ({ isShown, onClose, columns, sortingValues = [], onAddSorting, onResetSorting }) => {
+	const sortableColumns = columns.filter((col) => col.sorting);
+	const getCurrentDirection = useCallback((column) => sortingValues.find((s) => s.column === getSortName(column))?.direction || null, [sortingValues]);
+	const activeSortedColumn = sortableColumns.find((col) => getCurrentDirection(col) !== null);
+	const handleCycle = useCallback((column) => {
+		const current = getCurrentDirection(column);
+		const next = current ? current === "asc" ? "desc" : null : "asc";
+		onAddSorting(getSortName(column), next);
+	}, [getCurrentDirection, onAddSorting]);
+	const handleClearSort = useCallback(() => {
+		onResetSorting?.();
+	}, [onResetSorting]);
+	return /* @__PURE__ */ jsx(Modal, {
+		isShown,
+		onClose,
+		title: /* @__PURE__ */ jsx(Trans, {
+			id: "dataGrid.sort",
+			message: "Sort"
+		}),
+		onConfirm: activeSortedColumn ? handleClearSort : void 0,
+		confirmLabel: /* @__PURE__ */ jsx(Trans, {
+			id: "dataGrid.buttonClearSettings",
+			message: "Reset"
+		}),
+		width: "narrow",
+		ignoreClickOutside: true,
+		children: /* @__PURE__ */ jsx(x.div, {
+			display: "flex",
+			flexDirection: "column",
+			gap: "8px",
+			p: "8px 4px",
+			children: sortableColumns.map((column) => /* @__PURE__ */ jsx(SortRow, {
+				column,
+				currentDirection: getCurrentDirection(column),
+				onCycle: handleCycle
+			}, column.name))
+		})
+	});
+};
+//#endregion
+export { MobileSortModal as default };

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

@@ -1,6 +1,5 @@
-import { default as React, FC } from 'react';
-import { CommonGridProps } from '../types';
-
+import React, { type FC } from 'react';
+import type { CommonGridProps } from '../types';
 type OversizedScrollProps = {
     columnLayout: Required<CommonGridProps>['columnLayout'];
     children: React.ReactNode;

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

@@ -0,0 +1,36 @@
+import "react";
+import styled$1, { css } from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Blocks/CommonGrid/components/OversizedScroll.tsx
+const ScrollWrapper = styled$1.div`
+  ${(props) => props.columnLayout !== "no-scroll" && css`
+      overflow-x: ${props.columnLayout === "sticky" ? "inherit" : "auto"};
+      position: relative;
+      @media (min-width: 1024px) {
+        overflow-x: auto;
+      }
+    `};
+`;
+const ScrollSizer = styled$1.div`
+  ${(props) => props.columnLayout !== "no-scroll" && css`
+      width: ${props.totalColumnsWidth}px;
+    `};
+`;
+const FloatPosition = styled$1.div`
+  position: sticky;
+  left: 0;
+`;
+const OversizedScroll = ({ columnLayout, children, floatingChildren, totalColumnsWidth, ref }) => {
+	return /* @__PURE__ */ jsxs(ScrollWrapper, {
+		columnLayout,
+		className: "gridWrapper",
+		ref,
+		children: [/* @__PURE__ */ jsx(ScrollSizer, {
+			columnLayout,
+			totalColumnsWidth,
+			children
+		}), floatingChildren && /* @__PURE__ */ jsx(FloatPosition, { children: floatingChildren })]
+	});
+};
+//#endregion
+export { OversizedScroll as default };

package/ui/Blocks/CommonGrid/components/PresetsModalBody/components/TagRemove.d.ts

@@ -1 +1 @@
-export declare const TagRemove: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const TagRemove: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;

package/ui/Blocks/CommonGrid/components/PresetsModalBody/components/TagRemove.js

@@ -0,0 +1,19 @@
+import { styled } from "@xstyled/styled-components";
+//#region packages/ui/Blocks/CommonGrid/components/PresetsModalBody/components/TagRemove.tsx
+const TagRemove = styled.div`
+  cursor: pointer;
+  margin-left: 6px;
+  height: fit-content;
+  width: 17px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+
+  &:hover {
+    svg {
+      fill: black;
+    }
+  }
+`;
+//#endregion
+export { TagRemove };

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

@@ -1,6 +1,5 @@
-import { ChangeEvent, FC, MouseEvent, RefObject } from 'react';
-import { Filtering, GridPresets } from '../../types';
-
+import { type ChangeEvent, type FC, type MouseEvent, type RefObject } from 'react';
+import { type Filtering, type GridPresets } from '../../types';
 type PresetsModalBodyProps = {
     onOpenCreatePresetModal: () => void;
     gridPresets?: GridPresets;

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

@@ -0,0 +1,92 @@
+import { Cancel } from "../../../../Elements/Icon/icons/Cancel.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 { TagRemove } from "./components/TagRemove.js";
+import { useMemo } from "react";
+import { x } from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Trans } from "@lingui/react";
+import isEmpty from "lodash/isEmpty.js";
+//#region packages/ui/Blocks/CommonGrid/components/PresetsModalBody/index.tsx
+const PresetsModalBody = ({ onOpenCreatePresetModal, gridPresets, handleSelectPreset, handleOpenDeletePresetModal, selectedPresetName, handleExportPresets, handleImportButtonClick, handleImportPresets, fileInputRef, filters }) => {
+	const presets = useMemo(() => Object.entries(gridPresets || {}), [gridPresets]);
+	const hasPresets = !!presets?.length;
+	return /* @__PURE__ */ jsxs(x.div, { children: [
+		/* @__PURE__ */ jsx(x.div, {
+			display: "flex",
+			rowGap: "12px",
+			flexWrap: "wrap",
+			children: hasPresets ? presets?.map(([presetName, filters], index) => {
+				const isSelected = presetName === selectedPresetName;
+				return /* @__PURE__ */ jsxs(Tag, {
+					size: "big",
+					onClick: handleSelectPreset(presetName, filters),
+					...isSelected ? palettes.redWhite : palettes.redRed,
+					pointer: true,
+					children: [/* @__PURE__ */ jsx(H6, {
+						mt: 0,
+						mb: 0,
+						variant: "semiBold",
+						children: presetName
+					}), /* @__PURE__ */ jsx(TagRemove, {
+						onClick: handleOpenDeletePresetModal(presetName),
+						children: /* @__PURE__ */ jsx(Cancel, {
+							fill: isSelected ? "white" : "#DB2B19",
+							width: "11px",
+							height: "11px"
+						})
+					})]
+				}, `${presetName}_${index}`);
+			}) : /* @__PURE__ */ jsx(Trans, {
+				id: "dataGrid.noPresets.title",
+				message: "No presets available"
+			})
+		}),
+		/* @__PURE__ */ jsx(x.input, {
+			type: "file",
+			accept: ".json",
+			onChange: handleImportPresets,
+			ref: fileInputRef,
+			display: "none"
+		}),
+		/* @__PURE__ */ jsxs(x.div, {
+			display: "flex",
+			mt: "34px",
+			gap: "12px",
+			justifyContent: "space-between",
+			children: [/* @__PURE__ */ jsxs(x.div, {
+				display: "flex",
+				gap: "12px",
+				children: [hasPresets && /* @__PURE__ */ jsx(Button, {
+					onClick: handleExportPresets,
+					type: "button",
+					appearance: "secondary",
+					children: /* @__PURE__ */ jsx(Trans, {
+						id: "dataGrid.exportPreset.title",
+						message: "Export presets"
+					})
+				}), /* @__PURE__ */ jsx(Button, {
+					onClick: handleImportButtonClick,
+					type: "button",
+					appearance: "secondary",
+					children: /* @__PURE__ */ jsx(Trans, {
+						id: "dataGrid.importPreset.title",
+						message: "Import presets"
+					})
+				})]
+			}), /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				onClick: onOpenCreatePresetModal,
+				disabled: isEmpty(filters),
+				children: /* @__PURE__ */ jsx(Trans, {
+					id: "dataGrid.createNewPreset.title",
+					message: "Create new preset"
+				})
+			})]
+		})
+	] });
+};
+//#endregion
+export { PresetsModalBody };

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

@@ -1,5 +1,4 @@
-import { ChangeEvent } from 'react';
-
+import { type ChangeEvent } from 'react';
 type QuickFilterProps = {
     searchedValue: string;
     placeholderText?: string;

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

@@ -0,0 +1,31 @@
+import Button_default from "../../../../Elements/Button/index.js";
+import Input_default from "../../../../Forms/Input/index.js";
+import styled$1, { x } from "@xstyled/styled-components";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Blocks/CommonGrid/components/QuickFilter/QuickFilter.tsx
+const StyledInput = styled$1(Input_default)`
+  position: ${({ isMobileInputView }) => isMobileInputView ? "absolute" : "relative"};
+  z-index: ${({ isMobileInputView }) => isMobileInputView ? "3" : "1"};
+  width: auto;
+`;
+const QuickFilter = ({ searchedValue, placeholderText, onChange, onClick, displayInput, onClear, isMobileInputView, alwaysShowClear }) => /* @__PURE__ */ jsx(x.div, {
+	mr: "12px",
+	children: displayInput ? /* @__PURE__ */ jsx(StyledInput, {
+		icon: "search",
+		type: "text",
+		value: searchedValue,
+		placeholder: placeholderText,
+		onChange,
+		variant: "gray",
+		onClear,
+		alwaysShowClear,
+		isMobileInputView
+	}) : /* @__PURE__ */ jsx(Button_default, {
+		variant: "icon",
+		appearance: "secondary",
+		icon: "search",
+		onClick
+	})
+});
+//#endregion
+export { QuickFilter as default };

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

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

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

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

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

@@ -1,5 +1,4 @@
-import { FC } from 'react';
-
+import { type FC } from 'react';
 interface Resize {
     onResize: (width: number) => void;
     onResizeOver: () => void;

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

@@ -0,0 +1,48 @@
+import { useCallback } from "react";
+import styled$1 from "@xstyled/styled-components";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Blocks/CommonGrid/components/Resize.tsx
+const Resizer = styled$1.div`
+  height: 100%;
+  width: 7px;
+  cursor: col-resize;
+  position: absolute;
+  z-index: 2;
+  right: 0px;
+  top: 0px;
+  border-left: 1px dotted;
+  border-right: 1px dotted;
+  border-left-color: primary;
+  border-right-color: primary;
+  opacity: 0;
+  transition: opacity 0.6s;
+  &:hover {
+    opacity: 1;
+  }
+`;
+const Resize = ({ onResize, onResizeOver, onResizeOut }) => {
+	return /* @__PURE__ */ jsx(Resizer, {
+		className: "resizer",
+		onMouseDown: useCallback((downEvent) => {
+			if (downEvent?.button !== 0) return;
+			const initialPosX = downEvent?.pageX;
+			const handleMouseMove = (moveEvent) => {
+				onResize(moveEvent.pageX - initialPosX);
+			};
+			const handleMouseUp = (upEvent) => {
+				document.removeEventListener("mousemove", handleMouseMove);
+				document.removeEventListener("mouseup", handleMouseUp);
+				upEvent.stopPropagation();
+				upEvent.preventDefault();
+			};
+			document.addEventListener("mousemove", handleMouseMove);
+			document.addEventListener("mouseup", handleMouseUp);
+			downEvent.stopPropagation();
+			downEvent.preventDefault();
+		}, [onResize]),
+		onMouseOver: onResizeOver,
+		onMouseOut: onResizeOut
+	});
+};
+//#endregion
+export { Resize as default };

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

@@ -1,8 +1,8 @@
-export declare const Row: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const Row: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     hasRowClick?: boolean;
     align?: string;
 }, never>;
-export declare const Cell: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const Cell: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     align?: string;
     flexBasis?: number;
     flexGrow?: number;
@@ -10,13 +10,13 @@ export declare const Cell: import('styled-components').StyledComponent<"div", im
     transition?: string;
     transform?: string;
 }, never>;
-export declare const StyledDataRow: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const StyledDataRow: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     hasRowClick?: boolean;
     align?: string;
 } & {
     isEven: boolean;
 }, never>;
-export declare const TextCell: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const TextCell: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     align?: string;
     flexBasis?: number;
     flexGrow?: number;
@@ -24,7 +24,7 @@ export declare const TextCell: import('styled-components').StyledComponent<"div"
     transition?: string;
     transform?: string;
 }, never>;
-export declare const MessageCell: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const MessageCell: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     align?: string;
     flexBasis?: number;
     flexGrow?: number;
@@ -33,10 +33,10 @@ export declare const MessageCell: import('styled-components').StyledComponent<"d
     transform?: string;
 }, never>;
 declare const variantColors: {
-    error: (props: import('@xstyled/util').Props<import('@xstyled/system').Theme>) => import('@xstyled/system').CSSScalar;
-    info: (props: import('@xstyled/util').Props<import('@xstyled/system').Theme>) => import('@xstyled/system').CSSScalar;
+    error: (props: import("@xstyled/util").Props<import("@xstyled/system").Theme>) => import("@xstyled/system").CSSScalar;
+    info: (props: import("@xstyled/util").Props<import("@xstyled/system").Theme>) => import("@xstyled/system").CSSScalar;
 };
-export declare const MessageCellBody: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const MessageCellBody: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     align?: string;
     flexBasis?: number;
     flexGrow?: number;

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

@@ -0,0 +1,42 @@
+import styled$1, { system, th } from "@xstyled/styled-components";
+//#region packages/ui/Blocks/CommonGrid/components/Table.tsx
+const Row = styled$1.div`
+  ${system};
+  display: flex;
+  min-height: 32px;
+  border-bottom: 1px solid rgb(228, 231, 235);
+  cursor: ${(props) => props.hasRowClick ? "pointer" : "auto"};
+`;
+const Cell = styled$1.div`
+  ${system};
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  justify-content: ${(props) => props.align};
+  transition: ${(props) => props.transition};
+  transform: ${(props) => props.transform};
+`;
+const StyledDataRow = styled$1(Row)`
+  background-color: ${(props) => props.isEven ? th("colors.bgLightGray") : "white"};
+`;
+const TextCell = styled$1(Cell)`
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+const MessageCell = styled$1(Cell)`
+  width: 100vw;
+  position: sticky;
+  left: 0;
+  justify-content: center;
+`;
+const variantColors = {
+	error: th("colors.red1"),
+	info: th("colors.gray1")
+};
+const MessageCellBody = styled$1(Cell)`
+  padding: 2px 10px;
+  border-radius: 4px;
+  color: ${(props) => variantColors[props.variant]};
+`;
+//#endregion
+export { Cell, MessageCell, MessageCellBody, Row, StyledDataRow, TextCell };

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

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

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

@@ -0,0 +1,66 @@
+import { Paragraph4 } from "../../../../Elements/Typography/Typography.js";
+import Select from "../../../../Elements/Select/Select.js";
+import { rowsPerPageOptions } from "../../utils/constants.js";
+import { useCallback, useMemo } from "react";
+import styled$1, { x } from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Trans } from "@lingui/react";
+//#region packages/ui/Blocks/CommonGrid/components/TablePagination/TablePagination.tsx
+const Wrapper = styled$1.span`
+  display: flex;
+  align-items: center;
+  & > :nth-child(2) {
+    display: none;
+    @media (min-width: 1024px) {
+      display: block;
+    }
+  }
+`;
+const StyledSelect = styled$1(x.div)`
+  margin-right: 15px;
+  @media (min-width: 1024px) {
+    margin-right: 8px;
+  }
+`;
+const TablePagination = ({ gridActions, gridSelectors, autoRowsPerPage, customPaginationHandler }) => {
+	const { setRowsPerPage } = gridActions;
+	const { page } = gridSelectors;
+	const rowsPerPage = gridSelectors.rowsPerPage || 10;
+	const options = useMemo(() => autoRowsPerPage ? [...rowsPerPageOptions, {
+		value: autoRowsPerPage,
+		label: `auto (${autoRowsPerPage})`
+	}] : rowsPerPageOptions, [autoRowsPerPage]);
+	const onSetRowsPerPage = useCallback((option) => {
+		if (option && "value" in option) {
+			const value = Number(option.value);
+			setRowsPerPage?.(value);
+			customPaginationHandler?.(page ?? 1, value);
+		}
+	}, [
+		setRowsPerPage,
+		page,
+		customPaginationHandler
+	]);
+	return /* @__PURE__ */ jsxs(Wrapper, { children: [/* @__PURE__ */ jsx(StyledSelect, {
+		minWidth: "110px",
+		children: /* @__PURE__ */ jsx(Select, {
+			name: "rowsPerPage",
+			menuPlacement: "top",
+			style: "gridFilter",
+			placeholder: `${rowsPerPage}`,
+			options,
+			value: rowsPerPage,
+			isDarkPlaceholderText: true,
+			onChange: onSetRowsPerPage
+		})
+	}), /* @__PURE__ */ jsx(Paragraph4, {
+		variant: "normal",
+		mr: "20px",
+		children: /* @__PURE__ */ jsx(Trans, {
+			id: "dataGrid.resultsPerPage",
+			message: "Results per page"
+		})
+	})] });
+};
+//#endregion
+export { TablePagination as default };

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

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

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

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

package/ui/Blocks/CommonGrid/components/gridCells/BoolIcon.d.ts

@@ -1,6 +1,5 @@
-import { default as React } from 'react';
-import { DataCellProps } from '../../types';
-
+import React from 'react';
+import { type DataCellProps } from '../../types';
 type Props = DataCellProps<{}>;
 export declare const BoolIconCell: React.NamedExoticComponent<Props>;
 export {};

package/ui/Blocks/CommonGrid/components/gridCells/BoolIcon.js

@@ -0,0 +1,19 @@
+import { ToastSuccess } from "../../../../Elements/Icon/icons/ToastSuccess.js";
+import { ToastError } from "../../../../Elements/Icon/icons/ToastError.js";
+import "../../../../Elements/Icon/index.js";
+import React from "react";
+import styled$1 from "@xstyled/styled-components";
+import { jsx } from "react/jsx-runtime";
+import get from "lodash/fp/get.js";
+//#region packages/ui/Blocks/CommonGrid/components/gridCells/BoolIcon.tsx
+const Center = styled$1.div`
+  display: flex;
+  justify-content: center;
+  width: 100%;
+`;
+const BoolIcon = ({ rowData, column }) => {
+	return /* @__PURE__ */ jsx(Center, { children: get(column.name, rowData) ? /* @__PURE__ */ jsx(ToastSuccess, {}) : /* @__PURE__ */ jsx(ToastError, {}) });
+};
+const BoolIconCell = React.memo(BoolIcon);
+//#endregion
+export { BoolIconCell };

package/ui/Blocks/CommonGrid/components/gridCells/ButtonInCell.d.ts

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { DataCellProps } from '../../types';
-
+import { type FC } from 'react';
+import { type DataCellProps } from '../../types';
 type Props = DataCellProps<{}>;
 export declare const ButtonInCell: FC<Props>;
 export {};

package/ui/Blocks/CommonGrid/components/gridCells/ButtonInCell.js

@@ -0,0 +1,13 @@
+import Button from "../../../../Elements/Button/Button.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Blocks/CommonGrid/components/gridCells/ButtonInCell.tsx
+const ButtonInCell = (props) => {
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		appearance: "primary",
+		variant: "link"
+	});
+};
+//#endregion
+export { ButtonInCell };

package/ui/Blocks/CommonGrid/components/gridCells/Date.d.ts

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { DataCellProps } from '../../types';
-
+import { type FC } from 'react';
+import { type DataCellProps } from '../../types';
 type Props = DataCellProps<{}>;
 export declare const DateCell: FC<Props>;
 export {};

package/ui/Blocks/CommonGrid/components/gridCells/Date.js

@@ -0,0 +1,11 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { DateTime } from "luxon";
+import get from "lodash/fp/get.js";
+//#region packages/ui/Blocks/CommonGrid/components/gridCells/Date.tsx
+const DateCell = ({ rowData, column }) => {
+	const value = get(column.name, rowData);
+	return value ? /* @__PURE__ */ jsx("span", { children: DateTime.fromISO(value).toFormat("dd. MM. yyyy") }) : null;
+};
+//#endregion
+export { DateCell };

package/ui/Blocks/CommonGrid/components/gridCells/DateTime.d.ts

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { DataCellProps } from '../../types';
-
+import { type FC } from 'react';
+import { type DataCellProps } from '../../types';
 type Props = DataCellProps<{}>;
 export declare const DateTimeCell: FC<Props>;
 export {};

package/ui/Blocks/CommonGrid/components/gridCells/DateTime.js

@@ -0,0 +1,13 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { DateTime } from "luxon";
+import get from "lodash/fp/get.js";
+//#region packages/ui/Blocks/CommonGrid/components/gridCells/DateTime.tsx
+const defaultProps = { dateTimeFormat: "dd. MM. yyyy HH:mm" };
+const DateTimeCell = ({ rowData, column }) => {
+	const value = get(column.name, rowData);
+	const { dateTimeFormat } = column?.passProps ?? defaultProps;
+	return value ? /* @__PURE__ */ jsx("span", { children: DateTime.fromISO(value).toFormat(dateTimeFormat) }) : null;
+};
+//#endregion
+export { DateTimeCell };

package/ui/Blocks/CommonGrid/components/gridCells/EnumInCell.d.ts

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { FlagAppearanceType } from '../../../../Elements/HighlightBox/HighlightBox';
-
+import type { FC } from 'react';
+import type { FlagAppearanceType } from '../../../../Elements/HighlightBox/HighlightBox';
 type Props = {
     value: string;
     appearanceMap: Record<string, FlagAppearanceType>;