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

package/ui/packages/ui/Blocks/CommonGrid/hooks/usePresetFileHandlers.js

@@ -0,0 +1,47 @@
+import { __toESM as e } from "../../../../../_virtual/_rolldown/runtime.js";
+import { i18n as t } from "../../../../../node_modules/@lingui/core/dist/index.js";
+import { require_omit as n } from "../../../../../node_modules/lodash/omit.js";
+import { useCallback as r, useRef as i } from "react";
+//#region packages/ui/Blocks/CommonGrid/hooks/usePresetFileHandlers.ts
+var a = /* @__PURE__ */ e(n(), 1), o = ({ gridName: e, gridActions: n, gridSelectors: o }) => {
+	let s = i(null), c = r(() => {
+		if (!e) return;
+		let t = { gridName: e }, n = {
+			...o.presets,
+			_: t
+		}, r = new Blob([JSON.stringify(n, null, 2)], { type: "application/json" }), i = document.createElement("a");
+		i.href = URL.createObjectURL(r), i.download = `${e}Presets.json`, document.body.appendChild(i), i.click(), document.body.removeChild(i);
+	}, [e, o.presets]);
+	return {
+		fileInputRef: s,
+		handleImportPresets: r((r) => {
+			if (!e) return;
+			let i = r.target.files?.[0];
+			if (!i) return;
+			let o = new FileReader();
+			o.readAsText(i), o.onload = (r) => {
+				try {
+					let i = JSON.parse(r.target?.result), o = i._;
+					if (o && o.gridName !== e) throw Error(t._({
+						id: "dataGrid.importPresets.gridNameNotSame",
+						message: "Grid name in file is not the same as current grid."
+					}));
+					n.setPresets?.((0, a.default)(i, "_"));
+				} catch (e) {
+					console.warn(e), alert(t._({
+						id: "dataGrid.importPresets.error",
+						message: "Error with importing files."
+					}) + String(e));
+				} finally {
+					s.current && (s.current.value = "");
+				}
+			};
+		}, [e]),
+		handleExportPresets: c,
+		handleImportButtonClick: r(() => {
+			s.current?.click();
+		}, [])
+	};
+};
+//#endregion
+export { o as usePresetFileHandlers };

package/ui/packages/ui/Blocks/CommonGrid/hooks/usePresetsState.js

@@ -0,0 +1,15 @@
+import { useModal as e } from "../../Modal/hooks/useModal.js";
+import { useState as t } from "react";
+//#region packages/ui/Blocks/CommonGrid/hooks/usePresetsState.ts
+var n = () => {
+	let { isOpen: n, onOpen: r, onClose: i } = e(), [a, o] = t("");
+	return {
+		isPresetsModalOpen: n,
+		onOpenPresetsModal: r,
+		onClosePresetsModal: i,
+		selectedPresetName: a,
+		setSelectedPresetName: o
+	};
+};
+//#endregion
+export { n as usePresetState };

package/ui/packages/ui/Blocks/CommonGrid/hooks/useQuickFilter.js

@@ -0,0 +1,56 @@
+import { useCheckDeviceWidth as e } from "../../../utils/CheckDeviceWidth/checkDeviceWidth.js";
+import { getTranslatedValue as t } from "../components/ManageColumnForm/utils.js";
+import { createFilterType as n } from "../utils/index.js";
+import { useAddFilter as r } from "./useAddFilter.js";
+import { useCallback as i, useEffect as a, useState as o } from "react";
+//#region packages/ui/Blocks/CommonGrid/hooks/useQuickFilter.ts
+var s = (...e) => null, c = ({ gridActions: c, gridSelectors: l, quickFilter: u, columns: d, filters: f }) => {
+	let { addFilter: p = s, clearSettings: m = s } = c, { filter: h } = l, { isMobile: g } = e(), [_, v] = o(""), [y, b] = o(!1), x = r(p), S = u ? h?.[u]?.value : void 0, C = d?.find((e) => e.name === u) || null, w = n(C || {}), T = f?.[w].defaultExtraProps?.defaultComparator || "eq", E = S && S.comparator || T, D = g && y;
+	a(() => {
+		v(S ? S.value : "");
+	}, [
+		S,
+		u,
+		v
+	]), a(() => {
+		b(!g);
+	}, [g]);
+	let O = i((e) => {
+		v(e.target.value);
+		let t = {
+			comparator: E,
+			value: e.target.value
+		};
+		C && x(t, C);
+	}, [
+		v,
+		E,
+		x,
+		C
+	]), k = i(() => {
+		v(""), O({ target: { value: "" } }), b(!g);
+	}, [
+		v,
+		g,
+		O,
+		b
+	]), A = i(() => {
+		b(!0);
+	}, []), j = i(() => {
+		m?.(), v?.("");
+	}, [m, v]);
+	return {
+		searchedValue: _,
+		translatedValue: t(C),
+		onChangeInputValue: O,
+		onClearSettings: j,
+		onDisplayInput: A,
+		displayInput: y,
+		onClear: k,
+		isMobileInputView: D,
+		isMobile: g,
+		filter: h
+	};
+};
+//#endregion
+export { c as default };

package/ui/packages/ui/Blocks/CommonGrid/hooks/useSelectPreset.js

@@ -0,0 +1,16 @@
+import { __toESM as e } from "../../../../../_virtual/_rolldown/runtime.js";
+import { require_isEqual as t } from "../../../../../node_modules/lodash/isEqual.js";
+import { useCallback as n, useEffect as r } from "react";
+//#region packages/ui/Blocks/CommonGrid/hooks/useSelectPreset.ts
+var i = /* @__PURE__ */ e(t(), 1), a = ({ gridName: e, gridActions: t, gridSelectors: a, setSelectedPresetName: o, onClosePresetsModal: s }) => {
+	let c = a?.presets, l = a?.filter, u = n((e, n) => () => {
+		o(e), t.setFilters?.(n), s();
+	}, [t]);
+	return r(() => {
+		if (!e || !c) return;
+		let t = Object.entries(c)?.find(([e, t]) => (0, i.default)(t, l));
+		o(t ? t[0] : "");
+	}, [l, c]), { handleSelectPreset: u };
+};
+//#endregion
+export { a as useSelectPreset };

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

@@ -0,0 +1,26 @@
+import "./hooks/useEvent.js";
+import "./hooks/useAddFilter.js";
+import "./types.js";
+import "./components/gridCells/Date.js";
+import "./components/gridCells/DateTime.js";
+import "./components/gridCells/StringJoin.js";
+import "./components/gridCells/BoolIcon.js";
+import "./components/gridCells/RemoveItem.js";
+import "./components/gridCells/LinkInCell.js";
+import "./components/gridCells/ButtonInCell.js";
+import "./components/gridCells/IconButtonInCell.js";
+import "./components/gridCells/SwitchInCell.js";
+import "./components/gridCells/ImageCell.js";
+import "./components/gridCells/EnumInCell.js";
+import "./components/gridCells/HoverBubble.js";
+import "./components/gridCells/RowActionsCell.js";
+import "./components/gridCells/ToggleCell.js";
+import "./components/gridCells/index.js";
+import "./store/index.js";
+import e from "./CommonGridContainer.js";
+import "./HoC/withReduxActions.js";
+import "./hooks/useFloatingButton.js";
+//#region packages/ui/Blocks/CommonGrid/index.ts
+var t = e;
+//#endregion
+export { t as default };

package/ui/packages/ui/Blocks/CommonGrid/store/index.js

@@ -0,0 +1,267 @@
+import { __toESM as e } from "../../../../../_virtual/_rolldown/runtime.js";
+import { require_getOr as t } from "../../../../../node_modules/lodash/fp/getOr.js";
+import { require_omit as n } from "../../../../../node_modules/lodash/omit.js";
+import r from "../../../../../node_modules/immer/dist/immer.esm.js";
+import { createSelector as i } from "../../../../../node_modules/reselect/dist/reselect.js";
+import a from "./migrateState.js";
+//#region packages/ui/Blocks/CommonGrid/store/index.ts
+var o = /* @__PURE__ */ e(t(), 1), s = /* @__PURE__ */ e(n(), 1), c = {
+	page: 1,
+	presets: {},
+	sorting: [],
+	isConfigFormOpen: !1,
+	uxState: {
+		selectedRow: null,
+		checkedRows: {}
+	},
+	columnConfig: {},
+	filter: {},
+	columnsWidth: {},
+	columnsOrder: [],
+	defaultSorting: []
+}, l = "@store/CommonGrid", u = {
+	init: `${l}/init`,
+	clearUxState: `${l}/clearUxState`,
+	handleUxChange: `${l}/handleUxChange`,
+	openConfigForm: `${l}/openConfigForm`,
+	closeConfigForm: `${l}/closeConfigForm`,
+	setColumnConfig: `${l}/setColumnConfig`,
+	setPage: `${l}/setPage`,
+	setPresets: `${l}/setPresets`,
+	createPreset: `${l}/createPreset`,
+	deletePreset: `${l}/deletePreset`,
+	setRowsPerPage: `${l}/setRowsPerPage`,
+	resetFilters: `${l}/resetFilters`,
+	addFilter: `${l}/addFilter`,
+	setFilters: `${l}/setFilters`,
+	addSorting: `${l}/addSorting`,
+	resetSorting: `${l}/resetSorting`,
+	clearSettings: `${l}/clearSettings`,
+	resetGrid: `${l}/resetGrid`,
+	setColumnWidth: `${l}/setColumnWidth`,
+	setColumnsOrder: `${l}/setColumnsOrder`
+}, d = !1, f = (e = {}, t) => r(e, (n) => {
+	!d && e && Object.keys(e).length > 0 && (n = a(n), d = !0);
+	let r = t.gridName;
+	if (!r) return n;
+	switch (n[r] || (n[r] = { ...c }), t.type) {
+		case u.init:
+			let { defaultSorting: e } = t.initProps;
+			n[r].page = 1, e && (n[r].defaultSorting = e, n[r].sorting = n[r].sorting?.length ? n[r].sorting : e);
+			break;
+		case u.clearUxState:
+			n[r].uxState = c.uxState;
+			break;
+		case u.handleUxChange:
+			n[r].uxState = {
+				...n[r].uxState,
+				[t.uxKey]: t.uxValue
+			};
+			break;
+		case u.openConfigForm:
+			n[r].isConfigFormOpen = !0;
+			break;
+		case u.closeConfigForm:
+			n[r].isConfigFormOpen = !1;
+			break;
+		case u.setColumnConfig:
+			n[r].columnConfig = t.columnConfig, n[r].isConfigFormOpen = !1;
+			break;
+		case u.resetFilters:
+			n[r].filter = t.filters;
+			break;
+		case u.addFilter:
+			let { column: i, value: a, filterProps: o, others: l } = t, d = { [i]: {
+				value: a,
+				filterProps: o,
+				others: l
+			} };
+			n[r].filter = {
+				...n[r].filter,
+				...d
+			}, n[r].page = 1;
+			break;
+		case u.setFilters:
+			n[r].filter = t.filters;
+			break;
+		case u.addSorting:
+			let { direction: f } = t, { column: p } = t;
+			n[r]?.defaultSorting?.[0]?.column === p && f === null && (f = "asc");
+			let m = [{
+				column: p,
+				direction: f
+			}];
+			f === null && (m = n[r]?.defaultSorting || []), n[r].sorting = m;
+			break;
+		case u.resetSorting:
+			n[r].sorting = n[r].defaultSorting?.length ? n[r].defaultSorting : c.sorting;
+			break;
+		case u.clearSettings:
+			n[r].page = c.page, n[r].filter = c.filter, n[r].uxState = c.uxState, n[r].sorting = [];
+			break;
+		case u.setPage:
+			n[r].page = t.page;
+			break;
+		case u.setPresets:
+			n[r].presets = t.presets;
+			break;
+		case u.createPreset:
+			n[r].presets = {
+				...n[r].presets || {},
+				[t.presetName]: t.filters
+			};
+			break;
+		case u.deletePreset:
+			n[r].presets = (0, s.default)(n[r].presets, t.presetName);
+			break;
+		case u.setRowsPerPage:
+			n[r].rowsPerPage = t.rowsPerPage;
+			break;
+		case u.resetGrid:
+			n[r] = {
+				...c,
+				rowsPerPage: n[r].rowsPerPage
+			};
+			break;
+		case u.setColumnWidth:
+			t.columnsWidth === null ? n[r].columnsWidth = c.columnsWidth : n[r].columnsWidth = {
+				...n[r].columnsWidth,
+				...t.columnsWidth
+			}, n[r].columnsWidthVariant = t.columnLayout;
+			break;
+		case u.setColumnsOrder:
+			n[r].columnsOrder = t.columnsOrder;
+			break;
+	}
+	return n;
+}), p = (e) => ({
+	init: (t = {}) => ({
+		gridName: e,
+		type: u.init,
+		initProps: t
+	}),
+	clearUxState: () => ({
+		gridName: e,
+		type: u.clearUxState
+	}),
+	handleUxChange: (t, n) => ({
+		gridName: e,
+		type: u.handleUxChange,
+		uxKey: t,
+		uxValue: n
+	}),
+	openConfigForm: () => ({
+		gridName: e,
+		type: u.openConfigForm
+	}),
+	closeConfigForm: () => ({
+		gridName: e,
+		type: u.closeConfigForm
+	}),
+	setColumnConfig: (t) => ({
+		gridName: e,
+		type: u.setColumnConfig,
+		columnConfig: t
+	}),
+	setPage: (t) => ({
+		gridName: e,
+		type: u.setPage,
+		page: t
+	}),
+	setPresets: (t) => ({
+		gridName: e,
+		type: u.setPresets,
+		presets: t
+	}),
+	createPreset: (t, n) => ({
+		gridName: e,
+		type: u.createPreset,
+		presetName: t,
+		filters: n
+	}),
+	deletePreset: (t) => ({
+		gridName: e,
+		type: u.deletePreset,
+		presetName: t
+	}),
+	setColumnWidth: (t, n) => ({
+		gridName: e,
+		type: u.setColumnWidth,
+		columnsWidth: t,
+		columnLayout: n
+	}),
+	resetGrid: () => ({
+		gridName: e,
+		type: u.resetGrid
+	}),
+	setColumnsOrder: (t) => ({
+		gridName: e,
+		type: u.setColumnsOrder,
+		columnsOrder: t
+	}),
+	setRowsPerPage: (t) => ({
+		gridName: e,
+		type: u.setRowsPerPage,
+		rowsPerPage: t
+	}),
+	resetFilters: () => ({
+		gridName: e,
+		type: u.resetFilters
+	}),
+	addFilter: (t, n, r, i) => ({
+		gridName: e,
+		type: u.addFilter,
+		column: t,
+		value: n,
+		filterProps: r,
+		others: i
+	}),
+	setFilters: (t) => ({
+		gridName: e,
+		type: u.setFilters,
+		filters: t
+	}),
+	addSorting: (t, n) => ({
+		gridName: e,
+		type: u.addSorting,
+		column: t,
+		direction: n
+	}),
+	resetSorting: () => ({
+		gridName: e,
+		type: u.resetSorting
+	}),
+	clearSettings: () => ({
+		gridName: e,
+		type: u.clearSettings
+	})
+}), m = (e) => ({
+	getUxState: (t) => (0, o.default)(c.uxState, `commonGrid.${e}.uxState`, t),
+	isConfigFormOpen: (t) => (0, o.default)(c.isConfigFormOpen, `commonGrid.${e}.isConfigFormOpen`, t),
+	getColumnConfig: (t) => (0, o.default)(c.columnConfig, `commonGrid.${e}.columnConfig`, t),
+	getPage: (t) => (0, o.default)(c.page, `commonGrid.${e}.page`, t),
+	getPresets: (t) => (0, o.default)(c.presets, `commonGrid.${e}.presets`, t),
+	getRowsPerPage: (t) => (0, o.default)(c.rowsPerPage, `commonGrid.${e}.rowsPerPage`, t),
+	getFilter: (t) => (0, o.default)(c.filter, `commonGrid.${e}.filter`, t),
+	getSorting: (t) => (0, o.default)(c.sorting, `commonGrid.${e}.sorting`, t),
+	getColumnsWidth: (t) => (0, o.default)(null, `commonGrid.${e}.columnsWidth`, t),
+	getColumnsWidthVariant: (t) => (0, o.default)(void 0, `commonGrid.${e}.columnsWidthVariant`, t),
+	getColumnsOrder: (t) => (0, o.default)([], `commonGrid.${e}.columnsOrder`, t)
+}), h = (e) => {
+	let t = m(e);
+	return i((e) => t.getUxState(e), (e) => t.isConfigFormOpen(e), (e) => t.getColumnConfig(e), (e) => t.getPage(e), (e) => t.getPresets(e), (e) => t.getRowsPerPage(e), (e) => t.getFilter(e), (e) => t.getSorting(e), (e) => t.getColumnsWidth(e), (e) => t.getColumnsWidthVariant(e), (e) => t.getColumnsOrder(e), (e, t, n, r, i, a, o, s, c, l, u) => ({
+		uxState: e,
+		isConfigFormOpen: t,
+		columnConfig: n,
+		page: r,
+		presets: i,
+		rowsPerPage: a,
+		filter: o,
+		sorting: s,
+		columnsWidth: c,
+		columnsWidthVariant: l,
+		columnsOrder: u
+	}));
+};
+//#endregion
+export { l as actionPrefix, u as actionTypes, p as createActions, h as createFullSelector, m as createSelectors, f as default, c as initialState };

package/ui/packages/ui/Blocks/CommonGrid/styles.js

@@ -0,0 +1,248 @@
+import { th as e } from "../../../../node_modules/@xstyled/system/dist/index.js";
+import { styled as t, x as n } from "../../../../node_modules/@xstyled/styled-components/dist/index.js";
+import r from "./CommonGrid.js";
+//#region packages/ui/Blocks/CommonGrid/styles.tsx
+var i = t(n.div)`
+  position: relative;
+  z-index: 2;
+  flex-shrink: 0;
+  padding: ${({ withPagination: e }) => e ? "10px 0" : "0px"};
+  width: 100%;
+  height: ${({ withPagination: e }) => e ? 60 : 0}px;
+  background-color: bgLightGray;
+
+  @media print {
+    display: none;
+  }
+
+  @media (min-width: 1024px) {
+    position: relative;
+    bottom: 0;
+    margin-bottom: 0;
+  }
+`, a = t(n.div)`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background-color: white;
+  box-shadow: gridShadow;
+  border-radius: 8px;
+  flex-grow: 1;
+  height: 100%;
+`, o = t(n.div)`
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  @media (min-width: 1024px) {
+    display: block;
+    height: calc(100% - ${({ withPagination: e }) => e ? 60 : 0}px);
+    flex: unset;
+    min-height: unset;
+    overflow: visible;
+  }
+`, s = t(n.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;
+  }
+`, c = t(r)`
+  & .cell {
+    padding: 0 4px;
+  }
+  & .dataRow {
+    font-size: 12px;
+    font-family: ${e("fonts.primary")};
+    color: typoPrimary;
+    font-weight: normal;
+    border-bottom: 1px solid;
+    border-color: lightGray3;
+    height: ${40}px;
+  }
+  & .gridHead {
+    height: ${({ hasGroups: e }) => 40 + (e ? 39 : 0)}px;
+    background-color: neutral20;
+    padding-bottom: 8px;
+    position: sticky;
+    top: -1px;
+    z-index: 2;
+    border-top: 1px solid ${e("colors.lightGray6")};
+  }
+
+  & .filterRow {
+    display: none;
+  }
+
+  @media (min-width: 1023px) {
+    & .gridHead {
+      height: ${({ hasGroupsOrFilters: e }) => 40 + (e ? 39 : 0)}px;
+    }
+    & .filterRow {
+      display: flex;
+    }
+  }
+  & .headRow {
+    font-size: 12px;
+    font-family: ${e("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: e }) => e ? 75 : 0}px);
+  }
+
+  & .gridWrapper {
+    background-color: ${({ theme: e }) => e.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 { i as BottomWrapper, c as CommonGridWithStyles, o as CommonGridWrap, a as ContentContainer, s as StyledButtonStrip };

package/ui/packages/ui/Blocks/CommonGrid/types.js

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