@mailstep/design-system 0.8.27 → 0.8.28

package/ui/Blocks/CommonGrid/styles.js

@@ -1,98 +1,253 @@
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n  position: relative;\n  z-index: 2;\n  flex-shrink: 0;\n  padding: ",
-        ";\n  width: 100%;\n  height: ",
-        "px;\n  background-color: bgLightGray;\n\n  @media print {\n    display: none;\n  }\n\n  @media (min-width: 1024px) {\n    position: relative;\n    bottom: 0;\n    margin-bottom: 0;\n  }\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  background-color: white;\n  box-shadow: gridShadow;\n  border-radius: 8px;\n  flex-grow: 1;\n  height: 100%;\n"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n\n  @media (min-width: 1024px) {\n    display: block;\n    height: calc(100% - ",
-        "px);\n    flex: unset;\n    min-height: unset;\n    overflow: visible;\n  }\n"
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        "\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  min-height: auto;\n  padding: 10px;\n  flex-wrap: wrap;\n  z-index: 3;\n\n  @media (min-width: 768px) {\n    min-height: ",
-        "px;\n    padding: 18px 20px;\n  }\n"
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject4() {
-    var data = _tagged_template_literal([
-        "\n  & .cell {\n    padding: 0 4px;\n  }\n  & .dataRow {\n    font-size: 12px;\n    font-family: ",
-        ";\n    color: typoPrimary;\n    font-weight: normal;\n    border-bottom: 1px solid;\n    border-color: lightGray3;\n    height: ",
-        "px;\n  }\n  & .gridHead {\n    height: ",
-        "px;\n    background-color: neutral20;\n    padding-bottom: 8px;\n    position: sticky;\n    top: -1px;\n    z-index: 2;\n    border-top: 1px solid ",
-        ";\n  }\n\n  & .filterRow {\n    display: none;\n  }\n\n  @media (min-width: 1023px) {\n    & .gridHead {\n      height: ",
-        "px;\n    }\n    & .filterRow {\n      display: flex;\n    }\n  }\n  & .headRow {\n    font-size: 12px;\n    font-family: ",
-        ";\n    color: typoPrimary;\n    font-weight: bold;\n    border-bottom: none; // TODO fix in common-grid\n\n    & .cell {\n      overflow: hidden;\n      max-height: 32px;\n      position: relative;\n    }\n\n    & .sticky {\n      background-color: bgLightGray1;\n    }\n  }\n\n  & .filterRow {\n    & .cell {\n      overflow: visible;\n    }\n\n    & .cell > div {\n      width: 100%; // TODO fix in common-grid\n    }\n\n    & .sticky {\n      background-color: bgLightGray1;\n    }\n    border-bottom: none; // TODO fix in common-grid\n  }\n\n  & .body {\n    flex-grow: 1;\n  }\n\n  flex: 1;\n  min-height: 0;\n\n  @media (min-width: 1024px) {\n    flex: unset;\n    min-height: unset;\n    height: calc(100% - ",
-        "px);\n  }\n\n  & .gridWrapper {\n    background-color: ",
-        ";\n    width: auto;\n    height: 100%;\n    overflow-y: auto;\n\n    @media (min-width: 1024px) {\n      height: 100%;\n      overflow-y: auto;\n    }\n    @media print {\n      margin: 0;\n      width: 100%;\n      height: auto;\n      overflow-x: hidden;\n    }\n  }\n\n  & .fullWidthGrid > .gridWrapper > div {\n    width: 100% !important;\n  }\n\n  & .paginatorWrapper,\n  & .buttonsStrip {\n    @media print {\n      display: none;\n    }\n  }\n  & .cell {\n    padding-left: 4px;\n    padding-right: 4px;\n    @media print {\n      white-space: unset;\n    }\n  }\n\n  .dataRow {\n    &.grayedOut {\n      background: lightGray1;\n    }\n\n    .sticky-right,\n    .sticky-left {\n      background: white;\n    }\n\n    .sticky-right {\n      border-left: 1px solid #dfe1e6;\n    }\n\n    .sticky-left {\n      border-right: 1px solid #dfe1e6;\n    }\n\n    &:hover,\n    &.checked,\n    &.selected {\n      background-color: red30;\n    }\n  }\n\n  .dataRow:nth-child(even) {\n    .sticky-left,\n    .sticky-right {\n      background-color: bgLightGray;\n    }\n  }\n\n  @media print {\n    .filterRow .sticky {\n      display: none;\n    }\n\n    .headRow .sticky {\n      display: none;\n    }\n\n    .dataRow .sticky {\n      display: none;\n    }\n  }\n\n  .resizer {\n    z-index: unset;\n  }\n\n  // hotfix table head\n  .cell .sortable {\n    display: flex;\n    align-items: center;\n    padding-right: 2px;\n  }\n\n  .sticky {\n    position: sticky !important;\n    z-index: 1;\n  }\n\n  .sticky-left {\n    left: 0;\n  }\n\n  .sticky-right {\n    right: 0;\n  }\n"
-    ]);
-    _templateObject4 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import { gridRowHeight, gridFooterHeight, gridButtonStripHeight, gridHeadHeight, gridFilterHeight } from "./utils/constants";
-import styled, { x } from "@xstyled/styled-components";
-import { th } from "@xstyled/system";
-import CommonGrid from "./CommonGrid";
-var BottomWrapper = styled(x.div)(_templateObject(), function(param) {
-    var withPagination = param.withPagination;
-    return withPagination ? "10px 0" : "0px";
-}, function(param) {
-    var withPagination = param.withPagination;
-    return withPagination ? gridFooterHeight : 0;
-});
-var ContentContainer = styled(x.div)(_templateObject1());
-var CommonGridWrap = styled(x.div)(_templateObject2(), function(param) {
-    var withPagination = param.withPagination;
-    return withPagination ? gridFooterHeight : 0;
-});
-var StyledButtonStrip = styled(x.div)(_templateObject3(), gridButtonStripHeight);
-var CommonGridWithStyles = styled(CommonGrid)(_templateObject4(), th("fonts.primary"), gridRowHeight, function(param) {
-    var hasGroups = param.hasGroups;
-    return gridHeadHeight + (hasGroups ? gridFilterHeight : 0);
-}, th("colors.lightGray6"), function(param) {
-    var hasGroupsOrFilters = param.hasGroupsOrFilters;
-    return gridHeadHeight + (hasGroupsOrFilters ? gridFilterHeight : 0);
-}, th("fonts.primary"), function(param) {
-    var withButtonStrip = param.withButtonStrip;
-    return withButtonStrip ? gridButtonStripHeight : 0;
-}, function(param) {
-    var theme = param.theme;
-    return theme.colors.white;
-});
+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.js

@@ -1,14 +1,22 @@
-var rowClassSymbol = /* @__PURE__ */ Symbol();
-var EditReadPosition = /* @__PURE__ */ function(EditReadPosition2) {
-    EditReadPosition2["Left"] = "left";
-    EditReadPosition2["Right"] = "right";
-    return EditReadPosition2;
-}(EditReadPosition || {});
-var ExtraControlButtonPosition = /* @__PURE__ */ function(ExtraControlButtonPosition2) {
-    ExtraControlButtonPosition2["TopLeft"] = "top-left";
-    ExtraControlButtonPosition2["TopRight"] = "top-right";
-    ExtraControlButtonPosition2["BottomLeft"] = "bottom-left";
-    ExtraControlButtonPosition2["BottomRight"] = "bottom-right";
-    return ExtraControlButtonPosition2;
-}(ExtraControlButtonPosition || {});
-export { EditReadPosition, ExtraControlButtonPosition, rowClassSymbol };
+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

@@ -1,24 +1,26 @@
-var rowsPerPageOptions = [
-    {
-        value: 10,
-        label: 10
-    },
-    {
-        value: 20,
-        label: 20
-    },
-    {
-        value: 50,
-        label: 50
-    },
-    {
-        value: 100,
-        label: 100
-    }
+//#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
+	}
 ];
-var gridButtonStripHeight = 75;
-var gridHeadHeight = 40;
-var gridFilterHeight = 39;
-var gridFooterHeight = 60;
-var gridRowHeight = 40;
+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.js

@@ -1,46 +1,17 @@
-function _array_like_to_array(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
-    return arr2;
-}
-function _array_without_holes(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array(arr);
-}
-function _iterable_to_array(iter) {
-    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
-function _non_iterable_spread() {
-    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _to_consumable_array(arr) {
-    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
-}
-function _unsupported_iterable_to_array(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _array_like_to_array(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
-}
+import { Reload } from "../../../Elements/Icon/icons/Reload.js";
+import "../types.js";
 import { jsx } from "react/jsx-runtime";
-import { Reload } from "../../../Elements/Icon/icons/Reload";
-import { ExtraControlButtonPosition } from "../types";
-import compact from "lodash/compact";
-var getExtendedExtraControlButtons = function getExtendedExtraControlButtons(extraControlButtons, onReload) {
-    return compact([
-        onReload && {
-            onClick: onReload,
-            label: /* @__PURE__ */ jsx(Reload, {
-                width: "16px",
-                height: "16px",
-                fill: "white"
-            }),
-            position: ExtraControlButtonPosition.TopLeft,
-            buttonProps: {
-                "data-testid": "reload-button"
-            }
-        }
-    ].concat(_to_consumable_array(extraControlButtons || [])));
-};
+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

@@ -1,11 +1,10 @@
-import { gridHeadHeight, gridFilterHeight, gridButtonStripHeight, gridFooterHeight, gridRowHeight } from "./constants";
-var getRowsPerPage = function getRowsPerPage(ref, withPagination, withButtonStrip, hasGroupsOrFilters) {
-    var _ref_current;
-    var containerHeight = ref === null || ref === void 0 ? void 0 : (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.clientHeight;
-    var gridHeaderHeight = gridHeadHeight + (hasGroupsOrFilters ? gridFilterHeight : 0) + (withButtonStrip ? gridButtonStripHeight : 0);
-    if (containerHeight) {
-        return Math.floor((containerHeight - gridHeaderHeight - (withPagination ? gridFooterHeight : 0)) / gridRowHeight);
-    }
-    return 0;
+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

@@ -1,11 +1,10 @@
-var hasSortTerminated = function hasSortTerminated(param) {
-    var allowSortingOnlyUnderTotalRows = param.allowSortingOnlyUnderTotalRows, totalRowsCount = param.totalRowsCount;
-    var allowSorting = allowSortingOnlyUnderTotalRows && totalRowsCount;
-    var isSortTerminatedAppeal = !!(allowSorting && totalRowsCount > allowSortingOnlyUnderTotalRows[0]);
-    var isSortTerminated = !!(allowSorting && totalRowsCount > allowSortingOnlyUnderTotalRows[1]);
-    return {
-        isSortTerminatedAppeal: isSortTerminatedAppeal,
-        isSortTerminated: isSortTerminated
-    };
+//#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 };