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

package/ui/index814.es.js

@@ -0,0 +1,267 @@
+import { __toESM as e } from "./index2.es.js";
+import { require_getOr as t } from "./index486.es.js";
+import { require_omit as n } from "./index597.es.js";
+import r from "./index811.es.js";
+import { createSelector as i } from "./index812.es.js";
+import a from "./index813.es.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/index815.es.js

@@ -0,0 +1,93 @@
+import { x as e } from "./index6.es.js";
+import { require_jsx_runtime as t } from "./index143.es.js";
+import { getGroups as n } from "./index647.es.js";
+import r from "./index791.es.js";
+import ee from "./index797.es.js";
+import i from "./index798.es.js";
+import { GridStatus as a } from "./index799.es.js";
+import o from "./index800.es.js";
+import s from "./index804.es.js";
+import c from "./index805.es.js";
+import l from "./index808.es.js";
+import u from "./index809.es.js";
+import d from "./index810.es.js";
+import { initialState as f } from "./index814.es.js";
+import { useCallback as p, useMemo as m } from "react";
+//#region packages/ui/Blocks/CommonGrid/CommonGrid.tsx
+var h = t(), te = { outline: "none" }, g = (...e) => null, ne = f.uxState, _ = {}, v = ({ filters: t, comparators: f, handleDragEnd: v, gridSelectors: y, gridActions: b, isLoading: x, rowsData: S, hasColouredRows: C, actionColumnDefinition: w, allowRowSelect: T, allowRowSelectOnAction: E, onRowAction: D, onRowClick: O, onAsyncLoadFilterOptions: k, columnLayout: A = "normal", displayColumnsDefinitions: j, className: M, minColumnWidth: N, errorMessage: P, floatingButtonProps: F, hasGroups: I, hasFilters: re, isSortTerminated: L }) => {
+	let { uxState: R = ne, columnsWidth: z = _, columnsWidthVariant: B, page: V = 1, filter: H, sorting: U, rowsPerPage: W = 10 } = y, { clearUxState: G, handleUxChange: K, addFilter: q = g, addSorting: J = g, setColumnWidth: Y = g } = b, X = u(S, R, K);
+	d(S, R, G);
+	let { displayColumnsWidth: Z, totalColumnsWidth: ie, gridBoxRef: ae, handleResizeDrag: oe } = l(j, z, B, Y, A, N), Q = m(() => n(j), [j]), se = p((e) => {
+		ae.current = e;
+	}, []), $ = !x && !P && (!S || S.length < 1), ce = x || P || $;
+	return /* @__PURE__ */ (0, h.jsxs)(h.Fragment, { children: [/* @__PURE__ */ (0, h.jsx)(e.div, {
+		className: M || "",
+		children: /* @__PURE__ */ (0, h.jsxs)(c, {
+			columnLayout: A,
+			totalColumnsWidth: ie,
+			floatingChildren: ce && /* @__PURE__ */ (0, h.jsx)(a, {
+				isLoading: x,
+				isEmpty: $,
+				errorMessage: P
+			}),
+			ref: se,
+			children: [/* @__PURE__ */ (0, h.jsxs)("div", {
+				className: "gridHead",
+				children: [
+					I && /* @__PURE__ */ (0, h.jsx)(o, {
+						actionColumn: w,
+						columns: j,
+						displayColumnsWidth: Z,
+						groups: Q
+					}),
+					/* @__PURE__ */ (0, h.jsx)(s, {
+						columns: j,
+						onAddSort: J,
+						columnLayout: A,
+						sortingValues: U,
+						displayColumnsWidth: Z,
+						handleResizeDrag: oe,
+						groups: Q,
+						handleDragEnd: v,
+						isSortTerminated: L
+					}),
+					re && /* @__PURE__ */ (0, h.jsx)(ee, {
+						filters: t,
+						comparators: f,
+						columns: j,
+						actionColumn: w,
+						onChange: q,
+						filterValues: H,
+						displayColumnsWidth: Z,
+						groups: Q,
+						rowsData: S,
+						uxState: R,
+						handleUxChange: K,
+						onAsyncLoadFilterOptions: k
+					})
+				]
+			}), /* @__PURE__ */ (0, h.jsx)("div", {
+				className: "body flx_1",
+				style: te,
+				tabIndex: -1,
+				onKeyDown: X,
+				children: !x && S && j && S.map((e, t) => /* @__PURE__ */ (0, h.jsx)(r, {
+					rowData: e,
+					rowIndex: W * V + (t + 1) - W,
+					uxState: R,
+					isEven: C && (t + 1) % 2 == 0,
+					allowRowSelect: T,
+					allowRowSelectOnAction: E,
+					onRowAction: D,
+					onUxChange: K,
+					onRowClick: O,
+					columns: j,
+					displayColumnsWidth: Z,
+					groups: Q
+				}, e.id))
+			})]
+		})
+	}), F && /* @__PURE__ */ (0, h.jsx)(i, { ...F })] });
+};
+//#endregion
+export { v as default };

package/ui/index816.es.js

@@ -0,0 +1,248 @@
+import { th as e } from "./index4.es.js";
+import { styled as t, x as n } from "./index6.es.js";
+import r from "./index815.es.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 };