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

package/ui/Blocks/CommonGrid/storybook/utils/utils.js

@@ -0,0 +1,114 @@
+import { rowClassSymbol } from "../../types.js";
+import CommonGridContainer from "../../CommonGridContainer.js";
+import withReduxActions from "../../HoC/withReduxActions.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+import faker from "/home/linomorfed/Projects/design-system/node_modules/faker/index.js";
+//#region packages/ui/Blocks/CommonGrid/storybook/utils/utils.tsx
+const enumValues = [
+	"option A",
+	"option B",
+	"option C"
+];
+const oversizedArrayColumns = 25;
+const gridSelectors = {};
+/**
+* randomly returns given data or undefined. used to simulate optional pros on object data types
+*/
+function makeOptional(fakerData, chance) {
+	chance = chance || .5;
+	return Math.random() < chance ? fakerData : void 0;
+}
+const createRandomData = (count) => new Array(count).fill(null).map(() => ({
+	id: faker.random.uuid(),
+	stickyColumn: faker.random.word(),
+	textColumn: faker.random.word(),
+	enumColumn: enumValues[faker.random.number({
+		min: 0,
+		max: 2
+	})],
+	numberColumn: faker.random.number(),
+	dateColumn: faker.date.recent().toISOString(),
+	boolColumn: faker.random.boolean(),
+	[rowClassSymbol]: makeOptional("foo")
+}));
+const gridDummyActions = {
+	setPage: (number) => {
+		console.log("setPage", number);
+	},
+	setRowsPerPage: (number) => {
+		console.log("setRowsPerPage", number);
+	},
+	addFilter: (column, value, filterProps, others) => {
+		console.log("addFilter", column, value, filterProps, others);
+	}
+};
+const createOversizedRandomData = (count) => new Array(count).fill(null).map(() => {
+	const newData = { id: `${faker.random.uuid()}` };
+	for (let index = 0; index < 25; index++) newData[`column_${index}`] = faker.name.lastName();
+	return newData;
+});
+const ReduxGrid = (props) => {
+	return /* @__PURE__ */ jsx(React.useMemo(() => withReduxActions("storybookGrid")(CommonGridContainer), []), { ...props });
+};
+const extraControlButtons = [{
+	label: "Reload",
+	position: "top-left"
+}, {
+	label: "Export all",
+	position: "top-right"
+}];
+const onAsyncLoadFilterOptions = (key, value) => {
+	return new Promise((resolve) => {
+		setTimeout(() => {
+			resolve([
+				{
+					label: "Apple",
+					value: "apple"
+				},
+				{
+					label: "Banana",
+					value: "banana"
+				},
+				{
+					label: "Cherry",
+					value: "cherry"
+				},
+				{
+					label: "Date",
+					value: "date"
+				},
+				{
+					label: "Elderberry",
+					value: "elderberry"
+				},
+				{
+					label: "Fig",
+					value: "fig"
+				},
+				{
+					label: "Grape",
+					value: "grape"
+				},
+				{
+					label: "Honeydew",
+					value: "honeydew"
+				},
+				{
+					label: "Kiwi",
+					value: "kiwi"
+				},
+				{
+					label: "Lemon",
+					value: "lemon"
+				},
+				{
+					label: "Lime",
+					value: "lime"
+				}
+			]);
+		}, 1e3);
+	});
+};
+//#endregion
+export { ReduxGrid, createOversizedRandomData, createRandomData, enumValues, extraControlButtons, gridDummyActions, gridSelectors, onAsyncLoadFilterOptions, oversizedArrayColumns };

package/ui/Blocks/CommonGrid/storybook/utils/withRedux.js

@@ -0,0 +1,14 @@
+import store_default from "../../store/index.js";
+import { jsx } from "react/jsx-runtime";
+import { Provider } from "react-redux";
+import { combineReducers, compose, createStore } from "redux";
+//#region packages/ui/Blocks/CommonGrid/storybook/utils/withRedux.tsx
+const reduxComposeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+const withProvider = (story) => {
+	return /* @__PURE__ */ jsx(Provider, {
+		store: createStore(combineReducers({ commonGrid: store_default }), {}, reduxComposeEnhancer()),
+		children: story()
+	});
+};
+//#endregion
+export { withProvider as default, withProvider, reduxComposeEnhancer };

package/ui/Blocks/CommonGrid/storybook/utils/withRouter.js

@@ -0,0 +1,7 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { MemoryRouter } from "react-router";
+//#region packages/ui/Blocks/CommonGrid/storybook/utils/withRouter.tsx
+const withProvider = (story) => /* @__PURE__ */ jsx(MemoryRouter, { children: story() });
+//#endregion
+export { withProvider as default };

package/ui/Blocks/CommonGrid/storybook/utils/withTheme.js

@@ -0,0 +1,4 @@
+//#region packages/ui/Blocks/CommonGrid/storybook/utils/withTheme.tsx
+const withProvider = (story) => story();
+//#endregion
+export { withProvider as default };

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

@@ -1,18 +1,18 @@
-export declare const BottomWrapper: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import('react').ReactElement<any, string>, import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme> & {
+export declare const BottomWrapper: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme> & {
     withPagination: boolean;
 }, "color">;
-export declare const ContentContainer: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import('react').ReactElement<any, string>, import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, "color">;
-export declare const CommonGridWrap: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import('react').ReactElement<any, string>, import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme> & {
+export declare const ContentContainer: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
+export declare const CommonGridWrap: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme> & {
     withPagination: boolean;
 }, "color">;
-export declare const StyledButtonStrip: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import('react').ReactElement<any, string>, import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, "color">;
-export declare const CommonGridWithStyles: import('styled-components').StyledComponent<import('react').FC<import('./types').CommonGridProps & {
-    filters?: import('./types').FiltersConfig;
-    handleDragEnd: (item: import('@dnd-kit/core').DragEndEvent) => void;
-    displayColumnsDefinitions: import('./types').ColumnDefinition[];
+export declare const StyledButtonStrip: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
+export declare const CommonGridWithStyles: import("styled-components").StyledComponent<import("react").FC<import("./types").CommonGridProps & {
+    filters?: import("./types").FiltersConfig;
+    handleDragEnd: (item: import("@dnd-kit/core").DragEndEvent) => void;
+    displayColumnsDefinitions: import("./types").ColumnDefinition[];
     hasGroups: boolean;
     hasFilters: boolean;
-}>, import('@xstyled/system').Theme, {
+}>, import("@xstyled/system").Theme, {
     withButtonStrip: boolean;
     hasGroupsOrFilters: boolean;
     hasGroups: boolean;

package/ui/Blocks/CommonGrid/styles.js

@@ -0,0 +1,253 @@
+import "./utils/constants.js";
+import CommonGrid from "./CommonGrid.js";
+import styled$1, { x } 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/styles.tsx
+const BottomWrapper = styled$1(x.div)`
+  position: relative;
+  z-index: 2;
+  flex-shrink: 0;
+  padding: ${({ withPagination }) => withPagination ? "10px 0" : "0px"};
+  width: 100%;
+  height: ${({ withPagination }) => withPagination ? 60 : 0}px;
+  background-color: bgLightGray;
+
+  @media print {
+    display: none;
+  }
+
+  @media (min-width: 1024px) {
+    position: relative;
+    bottom: 0;
+    margin-bottom: 0;
+  }
+`;
+const ContentContainer = styled$1(x.div)`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background-color: white;
+  box-shadow: gridShadow;
+  border-radius: 8px;
+  flex-grow: 1;
+  height: 100%;
+`;
+const CommonGridWrap = styled$1(x.div)`
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  @media (min-width: 1024px) {
+    display: block;
+    height: calc(100% - ${({ withPagination }) => withPagination ? 60 : 0}px);
+    flex: unset;
+    min-height: unset;
+    overflow: visible;
+  }
+`;
+const StyledButtonStrip = styled$1(x.div)`
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  min-height: auto;
+  padding: 10px;
+  flex-wrap: wrap;
+  z-index: 3;
+
+  @media (min-width: 768px) {
+    min-height: ${75}px;
+    padding: 18px 20px;
+  }
+`;
+const CommonGridWithStyles = styled$1(CommonGrid)`
+  & .cell {
+    padding: 0 4px;
+  }
+  & .dataRow {
+    font-size: 12px;
+    font-family: ${th$1("fonts.primary")};
+    color: typoPrimary;
+    font-weight: normal;
+    border-bottom: 1px solid;
+    border-color: lightGray3;
+    height: ${40}px;
+  }
+  & .gridHead {
+    height: ${({ hasGroups }) => 40 + (hasGroups ? 39 : 0)}px;
+    background-color: neutral20;
+    padding-bottom: 8px;
+    position: sticky;
+    top: -1px;
+    z-index: 2;
+    border-top: 1px solid ${th$1("colors.lightGray6")};
+  }
+
+  & .filterRow {
+    display: none;
+  }
+
+  @media (min-width: 1023px) {
+    & .gridHead {
+      height: ${({ hasGroupsOrFilters }) => 40 + (hasGroupsOrFilters ? 39 : 0)}px;
+    }
+    & .filterRow {
+      display: flex;
+    }
+  }
+  & .headRow {
+    font-size: 12px;
+    font-family: ${th$1("fonts.primary")};
+    color: typoPrimary;
+    font-weight: bold;
+    border-bottom: none; // TODO fix in common-grid
+
+    & .cell {
+      overflow: hidden;
+      max-height: 32px;
+      position: relative;
+    }
+
+    & .sticky {
+      background-color: bgLightGray1;
+    }
+  }
+
+  & .filterRow {
+    & .cell {
+      overflow: visible;
+    }
+
+    & .cell > div {
+      width: 100%; // TODO fix in common-grid
+    }
+
+    & .sticky {
+      background-color: bgLightGray1;
+    }
+    border-bottom: none; // TODO fix in common-grid
+  }
+
+  & .body {
+    flex-grow: 1;
+  }
+
+  flex: 1;
+  min-height: 0;
+
+  @media (min-width: 1024px) {
+    flex: unset;
+    min-height: unset;
+    height: calc(100% - ${({ withButtonStrip }) => withButtonStrip ? 75 : 0}px);
+  }
+
+  & .gridWrapper {
+    background-color: ${({ theme }) => theme.colors.white};
+    width: auto;
+    height: 100%;
+    overflow-y: auto;
+
+    @media (min-width: 1024px) {
+      height: 100%;
+      overflow-y: auto;
+    }
+    @media print {
+      margin: 0;
+      width: 100%;
+      height: auto;
+      overflow-x: hidden;
+    }
+  }
+
+  & .fullWidthGrid > .gridWrapper > div {
+    width: 100% !important;
+  }
+
+  & .paginatorWrapper,
+  & .buttonsStrip {
+    @media print {
+      display: none;
+    }
+  }
+  & .cell {
+    padding-left: 4px;
+    padding-right: 4px;
+    @media print {
+      white-space: unset;
+    }
+  }
+
+  .dataRow {
+    &.grayedOut {
+      background: lightGray1;
+    }
+
+    .sticky-right,
+    .sticky-left {
+      background: white;
+    }
+
+    .sticky-right {
+      border-left: 1px solid #dfe1e6;
+    }
+
+    .sticky-left {
+      border-right: 1px solid #dfe1e6;
+    }
+
+    &:hover,
+    &.checked,
+    &.selected {
+      background-color: red30;
+    }
+  }
+
+  .dataRow:nth-child(even) {
+    .sticky-left,
+    .sticky-right {
+      background-color: bgLightGray;
+    }
+  }
+
+  @media print {
+    .filterRow .sticky {
+      display: none;
+    }
+
+    .headRow .sticky {
+      display: none;
+    }
+
+    .dataRow .sticky {
+      display: none;
+    }
+  }
+
+  .resizer {
+    z-index: unset;
+  }
+
+  // hotfix table head
+  .cell .sortable {
+    display: flex;
+    align-items: center;
+    padding-right: 2px;
+  }
+
+  .sticky {
+    position: sticky !important;
+    z-index: 1;
+  }
+
+  .sticky-left {
+    left: 0;
+  }
+
+  .sticky-right {
+    right: 0;
+  }
+`;
+//#endregion
+export { BottomWrapper, CommonGridWithStyles, CommonGridWrap, ContentContainer, StyledButtonStrip };

package/ui/Blocks/CommonGrid/types.d.ts

@@ -1,5 +1,4 @@
-import { Props as ButtonProps, AppearanceValue, VariantValue } from '../../Elements/Button/types';
-
+import { type Props as ButtonProps, type AppearanceValue, type VariantValue } from '../../Elements/Button/types';
 export declare const rowClassSymbol: unique symbol;
 type Option = {
     value: string | number;

package/ui/Blocks/CommonGrid/types.js

@@ -0,0 +1,22 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+//#region packages/ui/Blocks/CommonGrid/types.ts
+var types_exports = /* @__PURE__ */ __exportAll({
+	EditReadPosition: () => EditReadPosition,
+	ExtraControlButtonPosition: () => ExtraControlButtonPosition,
+	rowClassSymbol: () => rowClassSymbol
+});
+const rowClassSymbol = Symbol();
+let EditReadPosition = /* @__PURE__ */ function(EditReadPosition) {
+	EditReadPosition["Left"] = "left";
+	EditReadPosition["Right"] = "right";
+	return EditReadPosition;
+}({});
+let ExtraControlButtonPosition = /* @__PURE__ */ function(ExtraControlButtonPosition) {
+	ExtraControlButtonPosition["TopLeft"] = "top-left";
+	ExtraControlButtonPosition["TopRight"] = "top-right";
+	ExtraControlButtonPosition["BottomLeft"] = "bottom-left";
+	ExtraControlButtonPosition["BottomRight"] = "bottom-right";
+	return ExtraControlButtonPosition;
+}({});
+//#endregion
+export { EditReadPosition, ExtraControlButtonPosition, rowClassSymbol, types_exports };

package/ui/Blocks/CommonGrid/utils/constants.js

@@ -0,0 +1,26 @@
+//#region packages/ui/Blocks/CommonGrid/utils/constants.ts
+const rowsPerPageOptions = [
+	{
+		value: 10,
+		label: 10
+	},
+	{
+		value: 20,
+		label: 20
+	},
+	{
+		value: 50,
+		label: 50
+	},
+	{
+		value: 100,
+		label: 100
+	}
+];
+const gridButtonStripHeight = 75;
+const gridHeadHeight = 40;
+const gridFilterHeight = 39;
+const gridFooterHeight = 60;
+const gridRowHeight = 40;
+//#endregion
+export { gridButtonStripHeight, gridFilterHeight, gridFooterHeight, gridHeadHeight, gridRowHeight, rowsPerPageOptions };

package/ui/Blocks/CommonGrid/utils/getExtendedExtraControlButtons.d.ts

@@ -1,3 +1,2 @@
-import { ExtraControlButton } from '../types';
-
+import { type ExtraControlButton } from '../types';
 export declare const getExtendedExtraControlButtons: (extraControlButtons?: ExtraControlButton[], onReload?: () => void) => ExtraControlButton[] | undefined;

package/ui/Blocks/CommonGrid/utils/getExtendedExtraControlButtons.js

@@ -0,0 +1,17 @@
+import { Reload } from "../../../Elements/Icon/icons/Reload.js";
+import "../types.js";
+import { jsx } from "react/jsx-runtime";
+import compact from "lodash/compact.js";
+//#region packages/ui/Blocks/CommonGrid/utils/getExtendedExtraControlButtons.tsx
+const getExtendedExtraControlButtons = (extraControlButtons, onReload) => compact([onReload && {
+	onClick: onReload,
+	label: /* @__PURE__ */ jsx(Reload, {
+		width: "16px",
+		height: "16px",
+		fill: "white"
+	}),
+	position: "top-left",
+	buttonProps: { "data-testid": "reload-button" }
+}, ...extraControlButtons || []]);
+//#endregion
+export { getExtendedExtraControlButtons };

package/ui/Blocks/CommonGrid/utils/getRowsPerPage.js

@@ -0,0 +1,10 @@
+import "./constants.js";
+//#region packages/ui/Blocks/CommonGrid/utils/getRowsPerPage.ts
+const getRowsPerPage = (ref, withPagination, withButtonStrip, hasGroupsOrFilters) => {
+	const containerHeight = ref?.current?.clientHeight;
+	const gridHeaderHeight = 40 + (hasGroupsOrFilters ? 39 : 0) + (withButtonStrip ? 75 : 0);
+	if (containerHeight) return Math.floor((containerHeight - gridHeaderHeight - (withPagination ? 60 : 0)) / 40);
+	return 0;
+};
+//#endregion
+export { getRowsPerPage };

package/ui/Blocks/CommonGrid/utils/hasSortTerminated.js

@@ -0,0 +1,10 @@
+//#region packages/ui/Blocks/CommonGrid/utils/hasSortTerminated.ts
+const hasSortTerminated = ({ allowSortingOnlyUnderTotalRows, totalRowsCount }) => {
+	const allowSorting = allowSortingOnlyUnderTotalRows && totalRowsCount;
+	return {
+		isSortTerminatedAppeal: !!(allowSorting && totalRowsCount > allowSortingOnlyUnderTotalRows[0]),
+		isSortTerminated: !!(allowSorting && totalRowsCount > allowSortingOnlyUnderTotalRows[1])
+	};
+};
+//#endregion
+export { hasSortTerminated };

package/ui/Blocks/CommonGrid/utils/index.d.ts

@@ -1,5 +1,4 @@
-import { ColumnDefinition, ColumnConfig, FilterProps, Group, StickTo, FiltersConfig } from '../types';
-
+import type { ColumnDefinition, ColumnConfig, FilterProps, Group, StickTo, FiltersConfig } from '../types';
 type CellSizePropsResult = {
     flexBasis?: number;
     flexGrow?: number;

package/ui/Blocks/CommonGrid/utils/index.js

@@ -0,0 +1,78 @@
+import ActionsFilter_default from "../components/Filters/ActionsFilter/index.js";
+import GridSelect_default from "../components/Filters/GridSelect/index.js";
+import BooleanSelect_default from "../components/Filters/BooleanSelect/index.js";
+import DatePickerRange_default from "../components/Filters/DatePickerRange/index.js";
+import NumberRange_default from "../components/Filters/NumberRange/index.js";
+import TextRange_default from "../components/Filters/TextRange/index.js";
+//#region packages/ui/Blocks/CommonGrid/utils/index.ts
+const isDefined = (val) => typeof val !== "undefined";
+const getCellSizeProps = (column, columnWidth) => {
+	if (!column) return {};
+	const { fixedSize, flexGrow, flexShrink, sticky } = column;
+	return {
+		flexBasis: columnWidth,
+		flexGrow: fixedSize ? 0 : isDefined(flexGrow) ? flexGrow : 1,
+		flexShrink: isDefined(flexShrink) ? flexShrink : 1,
+		maxWidth: sticky ? columnWidth : "auto"
+	};
+};
+const getSortName = (column) => {
+	return column.systemName || column.name;
+};
+const getFilterName = (column) => {
+	return column.systemFilter || column.systemName || column.name;
+};
+const isColumnOn = (column, columnConfig) => {
+	if (column.alwaysOn) return true;
+	if (column.alwaysOff) return false;
+	const isHidden = columnConfig?.[column.name]?.isHidden;
+	if (typeof isHidden === "boolean") return !isHidden;
+	if (!!column.defaultHidden && !!columnConfig?.[column.name]) return true;
+	else return !column.defaultHidden;
+};
+const calculatePaginator = (page, rowsPerPage) => ({
+	offset: rowsPerPage ? rowsPerPage * (page - 1) : rowsPerPage,
+	limit: rowsPerPage
+});
+const createFilterType = (columnDefinition) => {
+	if (columnDefinition.filterOptions || columnDefinition.asyncLoadKey) return "options";
+	else return columnDefinition.filteringType || "text";
+};
+const getGroups = (columns) => columns.map((column, key) => {
+	const previousGroup = key > 0 && columns[key - 1].group;
+	return {
+		name: column.group,
+		start: !!(column.group && (!previousGroup || previousGroup && previousGroup !== column.group)),
+		end: !!(column.group && (!columns[key + 1] || columns[key + 1].group !== column.group))
+	};
+});
+const getGroupClassNames = (group) => `${group?.start ? "group-start" : ""} ${group?.end ? "group-end" : ""}`;
+const getStickyCollClassNames = (sticky, stickTo) => !sticky ? "" : `${stickTo ? ` sticky sticky-${stickTo}` : " sticky sticky-left"}`;
+const getFilters = (optimizeFilters) => {
+	const filters = {
+		number: { CellComponent: NumberRange_default },
+		text: { CellComponent: TextRange_default },
+		date: { CellComponent: DatePickerRange_default },
+		flag: { CellComponent: BooleanSelect_default },
+		options: { CellComponent: GridSelect_default },
+		actions: { CellComponent: ActionsFilter_default }
+	};
+	if (optimizeFilters) filters.text.defaultExtraProps = { defaultComparator: "eq" };
+	return filters;
+};
+/** Returns true when a filter value should be counted / applied */
+const isFilterActive = (value) => {
+	if (value == null) return false;
+	if (Array.isArray(value)) return !!value.length;
+	if (typeof value === "object") return value.value != null && value.value !== "";
+	return value !== "";
+};
+const checksColumnsOrder = (colsOrder, columnsDefinitions) => {
+	const stickyRightColls = columnsDefinitions.filter((col) => col.sticky === true && col.stickTo === "right");
+	const stickyLeftColls = columnsDefinitions.filter((col) => col.sticky === true && col.stickTo !== "right");
+	if (stickyLeftColls.length > 1 || stickyRightColls.length > 1) console.error("Grid can have only sticky column on each side.");
+	if (stickyLeftColls.length && colsOrder.indexOf(stickyLeftColls[0].name) !== 0 && stickyLeftColls[0].name !== "actions-cell-cg") console.error("The left sticky column should be the first one in a row");
+	if (stickyRightColls.length && colsOrder.indexOf(stickyRightColls[0].name) !== colsOrder.length - 1 && stickyRightColls[0].name !== "actions-cell-cg") console.error("The Right sticky column should be the last one in a row");
+};
+//#endregion
+export { calculatePaginator, checksColumnsOrder, createFilterType, getCellSizeProps, getFilterName, getFilters, getGroupClassNames, getGroups, getSortName, getStickyCollClassNames, isColumnOn, isFilterActive };

package/ui/Blocks/CornerDialog/CornerDialog.d.ts

@@ -1,4 +1,3 @@
-import { default as React } from 'react';
-import { CornerDialogProps } from './types';
-
+import React from 'react';
+import { type CornerDialogProps } from './types';
 export declare const CornerDialog: React.FC<CornerDialogProps>;

package/ui/Blocks/CornerDialog/CornerDialog.js

@@ -0,0 +1,43 @@
+import Icon from "../../Elements/Icon/Icon.js";
+import { Portal } from "../../Elements/Portal/index.js";
+import { CloseBtn, Container, Header, Status, StatusText, Wrapper } from "./styles.js";
+import { statusToColors, statusToIcon } from "./utils.js";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Blocks/CornerDialog/CornerDialog.tsx
+const CornerDialog = ({ title, children, onClose, statusToTitle, isOpen = true, intent: _intent }) => {
+	const [isMounted, setIsMounted] = useState(false);
+	useEffect(() => {
+		setIsMounted(true);
+	}, []);
+	const intent = _intent ?? "info";
+	const { fontColor, backgroundColor, fill } = statusToColors[intent];
+	if (!isOpen) return null;
+	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(Container, {
+		$mounted: isMounted,
+		children: [
+			/* @__PURE__ */ jsxs(Status, {
+				background: backgroundColor,
+				children: [/* @__PURE__ */ jsx(Icon, {
+					icon: statusToIcon[intent],
+					fill
+				}), /* @__PURE__ */ jsx(StatusText, {
+					fontColor,
+					children: statusToTitle[intent]()
+				})]
+			}),
+			/* @__PURE__ */ jsx(Header, { children: title }),
+			/* @__PURE__ */ jsx(CloseBtn, {
+				onClick: onClose,
+				"data-testid": "corner-dialog-close-btn",
+				children: /* @__PURE__ */ jsx(Icon, {
+					icon: "close",
+					size: "25px"
+				})
+			}),
+			/* @__PURE__ */ jsx(Wrapper, { children })
+		]
+	}) });
+};
+//#endregion
+export { CornerDialog };

package/ui/Blocks/CornerDialog/index.d.ts

@@ -1,4 +1,3 @@
 import { CornerDialog } from './CornerDialog';
-
 export type { Intent, CornerDialogProps } from './types';
 export default CornerDialog;