@mailstep/design-system 0.8.26-beta.2 → 0.8.26-beta.4

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

@@ -0,0 +1,253 @@
+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_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+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);
+}
+function _templateObject() {
+    var data = _tagged_template_literal([
+        "\n  width: 100%;\n  font-size: 0.8rem;\n"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    var data = _tagged_template_literal([
+        "\n  margin: unset;\n  align-self: center;\n  flex-shrink: 1;\n"
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    var data = _tagged_template_literal([
+        "\n  flex-direction: row;\n  & > * {\n    cursor: pointer;\n  }\n"
+    ]);
+    _templateObject2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject3() {
+    var data = _tagged_template_literal([
+        "\n  display: ",
+        ";\n  position: static;\n  font-size: 1rem;\n  ",
+        "\n  margin-left: 6px;\n"
+    ]);
+    _templateObject3 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject4() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  position: absolute;\n  top: 0;\n  left: -24px;\n  background-color: lightGray2;\n  font-size: 0.8rem;\n  border-radius: 0.4rem;\n  padding: 0 4px;\n  ",
+        "\n  width: ",
+        "px;\n  box-shadow: tooltipShadow;\n  z-index: 1;\n"
+    ]);
+    _templateObject4 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject5() {
+    var data = _tagged_template_literal([
+        "\n  display: none;\n  position: relative;\n  overflow: visible;\n  &:hover {\n    display: block;\n  }\n"
+    ]);
+    _templateObject5 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject6() {
+    var data = _tagged_template_literal([
+        "\n  position: relative;\n  display: ",
+        ";\n  font-size: 0.7rem;\n  margin-right: 6px;\n  align-self: center;\n  &:hover + ",
+        " {\n    display: flex;\n  }\n"
+    ]);
+    _templateObject6 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject7() {
+    var data = _tagged_template_literal([
+        "\n  justify-content: ",
+        ";\n  display: flex;\n"
+    ]);
+    _templateObject7 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useRef, useEffect } from "react";
+import Icon from "../../../../Elements/Icon/Icon";
+import styled, { x, css } from "@xstyled/styled-components";
+var WRAPPER_WIDTH = 35;
+var Wrap = styled.div(_templateObject());
+var Title = styled.h4(_templateObject1());
+var arrowStyles = css(_templateObject2());
+var InlineArrowWrap = styled.div(_templateObject3(), function(param) {
+    var $isPopup = param.$isPopup;
+    return $isPopup ? "none" : "flex";
+}, arrowStyles);
+var PopupArrowWrap = styled.div(_templateObject4(), arrowStyles, WRAPPER_WIDTH);
+var OverflowWrap = styled.div(_templateObject5());
+var WarningWrap = styled.div(_templateObject6(), function(param) {
+    var $isPopup = param.$isPopup;
+    return $isPopup ? "block" : "none";
+}, OverflowWrap);
+var Content = styled.div(_templateObject7(), function(param) {
+    var $isPopup = param.$isPopup;
+    return $isPopup ? "space-between" : "unset";
+});
+var ColumnTitle = function ColumnTitle(param) {
+    var title = param.title, isSortable = param.isSortable, onSetSort = param.onSetSort, sortValue = param.sortValue;
+    var _useState = _sliced_to_array(useState(false), 2), isOverflowing = _useState[0], setIsOverflowing = _useState[1];
+    var onSetAsc = useCallback(function() {
+        return onSetSort === null || onSetSort === void 0 ? void 0 : onSetSort("asc");
+    }, [
+        onSetSort
+    ]);
+    var onSetDesc = useCallback(function() {
+        return onSetSort === null || onSetSort === void 0 ? void 0 : onSetSort("desc");
+    }, [
+        onSetSort
+    ]);
+    var onSetNull = useCallback(function() {
+        return onSetSort === null || onSetSort === void 0 ? void 0 : onSetSort(null);
+    }, [
+        onSetSort
+    ]);
+    var isAsc = sortValue === "asc";
+    var isDesc = sortValue === "desc";
+    var wrapRef = useRef(null);
+    var contentRef = useRef(null);
+    useEffect(function() {
+        var wrapRefCopy = wrapRef.current;
+        var contentRefCopy = contentRef.current;
+        if (!wrapRefCopy || !contentRefCopy) return;
+        var resizeObserver = new ResizeObserver(function() {
+            var wrapWidth = wrapRefCopy.offsetWidth;
+            var contentWidth = contentRefCopy.offsetWidth + 42;
+            setIsOverflowing(wrapWidth <= contentWidth);
+        });
+        resizeObserver.observe(wrapRefCopy === null || wrapRefCopy === void 0 ? void 0 : wrapRefCopy.parentNode);
+        return function() {
+            resizeObserver.unobserve(wrapRefCopy === null || wrapRefCopy === void 0 ? void 0 : wrapRefCopy.parentNode);
+        };
+    }, [
+        wrapRef === null || wrapRef === void 0 ? void 0 : wrapRef.current
+    ]);
+    var Arrows = /* @__PURE__ */ jsxs(Fragment, {
+        children: [
+            /* @__PURE__ */ jsx(x.div, {
+                onClick: isAsc ? onSetNull : onSetAsc,
+                children: /* @__PURE__ */ jsx(Icon, {
+                    icon: "chevronUp",
+                    fill: isAsc ? "blue2" : "lightGray3"
+                })
+            }),
+            /* @__PURE__ */ jsx(x.div, {
+                onClick: isDesc ? onSetNull : onSetDesc,
+                children: /* @__PURE__ */ jsx(Icon, {
+                    icon: "chevronDown",
+                    fill: isDesc ? "blue2" : "lightGray3"
+                })
+            })
+        ]
+    });
+    return /* @__PURE__ */ jsx(Wrap, {
+        ref: wrapRef,
+        children: /* @__PURE__ */ jsxs(Content, {
+            $isPopup: isOverflowing,
+            children: [
+                /* @__PURE__ */ jsx("div", {
+                    children: /* @__PURE__ */ jsx(Title, {
+                        ref: contentRef,
+                        children: title
+                    })
+                }),
+                isSortable && /* @__PURE__ */ jsxs(Fragment, {
+                    children: [
+                        /* @__PURE__ */ jsx(WarningWrap, {
+                            $isPopup: isOverflowing,
+                            children: /* @__PURE__ */ jsx(Icon, {
+                                icon: "warningDual",
+                                fill: "black",
+                                secondaryColor: "yellow2"
+                            })
+                        }),
+                        /* @__PURE__ */ jsx(OverflowWrap, {
+                            $isPopup: isOverflowing,
+                            children: /* @__PURE__ */ jsx(PopupArrowWrap, {
+                                $isPopup: isOverflowing,
+                                children: Arrows
+                            })
+                        }),
+                        /* @__PURE__ */ jsx(InlineArrowWrap, {
+                            $isPopup: isOverflowing,
+                            children: Arrows
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+var ColumnTitle_default = ColumnTitle;
+export { ColumnTitle_default as default };

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

@@ -0,0 +1,3 @@
+import ColumnTitle from "./ColumnTitle";
+var ColumnTitle_default = ColumnTitle;
+export { ColumnTitle_default as default };

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

@@ -0,0 +1,108 @@
+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_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+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);
+}
+function _templateObject() {
+    var data = _tagged_template_literal([
+        "\n  & + * {\n    margin-left: 1em;\n  }\n"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { SortingUp, SortingDown } from "./icons/Sorting";
+import styled from "@xstyled/styled-components";
+var Title = styled.span(_templateObject());
+var ColumnTitle = function ColumnTitle(param) {
+    var title = param.title, isSortable = param.isSortable, onSetSort = param.onSetSort, sortValue = param.sortValue;
+    var _React_useState = _sliced_to_array(React.useState(0), 2), mouseDownTimestamp = _React_useState[0], setMouseDownTimestamp = _React_useState[1];
+    var handleMouseDown = React.useCallback(function() {
+        setMouseDownTimestamp(Date.now());
+    }, []);
+    var handleMouseUp = React.useCallback(function() {
+        var now = Date.now();
+        var duration = now - mouseDownTimestamp;
+        if (duration < 200) {
+            var newValue = sortValue ? sortValue === "asc" ? "desc" : null : "asc";
+            if (onSetSort) onSetSort(newValue);
+        }
+        setMouseDownTimestamp(0);
+    }, [
+        mouseDownTimestamp,
+        onSetSort,
+        sortValue
+    ]);
+    return /* @__PURE__ */ jsxs("div", {
+        onMouseDown: isSortable ? handleMouseDown : void 0,
+        onMouseUp: isSortable ? handleMouseUp : void 0,
+        className: isSortable ? "sortable" : "",
+        children: [
+            /* @__PURE__ */ jsx(Title, {
+                children: title
+            }),
+            isSortable && sortValue === "asc" && /* @__PURE__ */ jsx(SortingUp, {
+                width: "16"
+            }),
+            isSortable && sortValue === "desc" && /* @__PURE__ */ jsx(SortingDown, {
+                width: "16"
+            })
+        ]
+    });
+};
+var ColumnTitle_default = React.memo(ColumnTitle);
+export { ColumnTitle_default as default };

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

@@ -0,0 +1,256 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo } from "react";
+import Button from "../../../../Elements/Button/Button";
+import { Filter } from "../../../../Elements/Icon/icons/Filter";
+import { Settings2 } from "../../../../Elements/Icon/icons/Settings2";
+import { Sort } from "../../../../Elements/Icon/icons/Sort";
+import Tag from "../../../../Elements/Tag/Tag";
+import { palettes } from "../../../../Elements/Tag/palettes";
+import { H6 } from "../../../../Elements/Typography";
+import useQuickFilter from "../../hooks/useQuickFilter";
+import { ExtraControlButtonPosition } from "../../types";
+import { isFilterActive } from "../../utils";
+import ExtraControlButtons from "../ExtraControlButtons";
+import QuickFilter from "../QuickFilter";
+import { i18n } from "@lingui/core";
+import { Trans } from "@lingui/react";
+import { useColor, x } from "@xstyled/styled-components";
+import { ControlButtonsContainer, Left, Right, StyledColumnButton } from "./styles";
+var ControlButtons = function ControlButtons(param) {
+    var extraControlButtons = param.extraControlButtons, gridActions = param.gridActions, gridSelectors = param.gridSelectors, _param_quickFilter = param.quickFilter, quickFilter = _param_quickFilter === void 0 ? "" : _param_quickFilter, columns = param.columns, filters = param.filters, hideControlButtons = param.hideControlButtons, displayManageColumnButton = param.displayManageColumnButton, openManageColumnForm = param.openManageColumnForm, setDisplayManageColumnButton = param.setDisplayManageColumnButton, onOpenPresetsModal = param.onOpenPresetsModal, gridName = param.gridName, selectedPresetName = param.selectedPresetName, withPresets = param.withPresets, withManageColumnButton = param.withManageColumnButton, onOpenMobileFilters = param.onOpenMobileFilters, onOpenMobileSorting = param.onOpenMobileSorting, isSortTerminated = param.isSortTerminated;
+    var _ref;
+    var _gridSelectors_sorting;
+    var _useQuickFilter = useQuickFilter({
+        gridActions: gridActions,
+        gridSelectors: gridSelectors,
+        quickFilter: quickFilter,
+        columns: columns,
+        filters: filters
+    }), searchedValue = _useQuickFilter.searchedValue, translatedValue = _useQuickFilter.translatedValue, onChangeInputValue = _useQuickFilter.onChangeInputValue, onClear = _useQuickFilter.onClear, onClearSettings = _useQuickFilter.onClearSettings, onDisplayInput = _useQuickFilter.onDisplayInput, displayInput = _useQuickFilter.displayInput, isMobileInputView = _useQuickFilter.isMobileInputView, isMobile = _useQuickFilter.isMobile, filter = _useQuickFilter.filter;
+    useEffect(function() {
+        setDisplayManageColumnButton(!isMobileInputView && !!withManageColumnButton);
+    }, [
+        isMobileInputView,
+        withManageColumnButton,
+        setDisplayManageColumnButton
+    ]);
+    var red = useColor("red1");
+    var filtersCount = useMemo(function() {
+        return filter ? Object.values(filter).filter(function(item) {
+            return isFilterActive(item.value);
+        }).length : 0;
+    }, [
+        filter
+    ]);
+    var hasFilterableColumns = !!(columns === null || columns === void 0 ? void 0 : columns.some(function(col) {
+        return col.filtering;
+    }));
+    var hasSortableColumns = !!(columns === null || columns === void 0 ? void 0 : columns.some(function(col) {
+        return col.sorting;
+    }));
+    var sortCount = (_ref = (_gridSelectors_sorting = gridSelectors.sorting) === null || _gridSelectors_sorting === void 0 ? void 0 : _gridSelectors_sorting.length) !== null && _ref !== void 0 ? _ref : 0;
+    return /* @__PURE__ */ jsxs(ControlButtonsContainer, {
+        children: [
+            /* @__PURE__ */ jsxs(Left, {
+                children: [
+                    !hideControlButtons && /* @__PURE__ */ jsxs(Fragment, {
+                        children: [
+                            quickFilter && !isMobile && /* @__PURE__ */ jsx(QuickFilter, {
+                                searchedValue: searchedValue,
+                                placeholderText: i18n._({
+                                    id: "controlButtons.searchPlaceholder",
+                                    message: "Search ".concat(translatedValue, " ..."),
+                                    values: {
+                                        translatedValue: translatedValue
+                                    }
+                                }),
+                                onChange: onChangeInputValue,
+                                onClear: onClear,
+                                onClick: onDisplayInput,
+                                displayInput: displayInput,
+                                isMobileInputView: isMobileInputView
+                            }),
+                            /* @__PURE__ */ jsx(ExtraControlButtons, {
+                                extraControlButtons: extraControlButtons,
+                                targetPosition: ExtraControlButtonPosition.TopLeft
+                            }),
+                            /* @__PURE__ */ jsx(x.div, {
+                                children: !!filtersCount && !isMobile && /* @__PURE__ */ jsx(Button, {
+                                    type: "button",
+                                    onClick: onClearSettings,
+                                    variant: "default",
+                                    appearance: "secondary",
+                                    "data-cy": "resetFiltersBtn",
+                                    children: /* @__PURE__ */ jsx(Trans, {
+                                        id: "dataGrid.buttonClearSettings",
+                                        message: "Reset"
+                                    })
+                                })
+                            })
+                        ]
+                    }),
+                    isMobile && hasFilterableColumns && /* @__PURE__ */ jsxs(Button, {
+                        type: "button",
+                        appearance: filtersCount ? "primary" : "tertiary",
+                        onClick: onOpenMobileFilters,
+                        "data-cy": "mobileFilterBtn",
+                        children: [
+                            /* @__PURE__ */ jsx(Filter, {
+                                fill: filtersCount ? "white" : red
+                            }),
+                            /* @__PURE__ */ jsxs(H6, {
+                                variant: "semiBold",
+                                mt: 0,
+                                mb: 0,
+                                ml: "6px",
+                                children: [
+                                    /* @__PURE__ */ jsx(Trans, {
+                                        id: "dataGrid.filter",
+                                        message: "Filter"
+                                    }),
+                                    " ",
+                                    filtersCount > 0 && "(".concat(filtersCount, ")")
+                                ]
+                            })
+                        ]
+                    }),
+                    isMobile && hasSortableColumns && /* @__PURE__ */ jsx(x.div, {
+                        ml: "10px",
+                        children: /* @__PURE__ */ jsxs(Button, {
+                            type: "button",
+                            appearance: sortCount ? "primary" : "tertiary",
+                            onClick: onOpenMobileSorting,
+                            disabled: isSortTerminated,
+                            "data-cy": "mobileSortBtn",
+                            children: [
+                                /* @__PURE__ */ jsx(Sort, {
+                                    stroke: sortCount ? "white" : red
+                                }),
+                                /* @__PURE__ */ jsxs(H6, {
+                                    variant: "semiBold",
+                                    mt: 0,
+                                    mb: 0,
+                                    ml: "6px",
+                                    children: [
+                                        /* @__PURE__ */ jsx(Trans, {
+                                            id: "dataGrid.sort",
+                                            message: "Sort"
+                                        }),
+                                        " ",
+                                        sortCount > 0 && "(".concat(sortCount, ")")
+                                    ]
+                                })
+                            ]
+                        })
+                    }),
+                    withPresets && gridName && !isMobile && /* @__PURE__ */ jsxs(Fragment, {
+                        children: [
+                            /* @__PURE__ */ jsx(x.div, {
+                                mx: "12px",
+                                children: /* @__PURE__ */ jsx(Button, {
+                                    onClick: onOpenPresetsModal,
+                                    type: "button",
+                                    variant: "default",
+                                    appearance: "tertiary",
+                                    children: /* @__PURE__ */ jsx(Trans, {
+                                        id: "dataGrid.presets.title",
+                                        message: "Presets"
+                                    })
+                                })
+                            }),
+                            selectedPresetName && /* @__PURE__ */ jsx(Tag, _object_spread_props(_object_spread({
+                                size: "medium"
+                            }, palettes.redWhite), {
+                                children: /* @__PURE__ */ jsx(H6, {
+                                    mt: 0,
+                                    mb: 0,
+                                    variant: "semiBold",
+                                    children: selectedPresetName
+                                })
+                            }))
+                        ]
+                    })
+                ]
+            }),
+            /* @__PURE__ */ jsxs(Right, {
+                children: [
+                    /* @__PURE__ */ jsx(ExtraControlButtons, {
+                        extraControlButtons: extraControlButtons,
+                        targetPosition: ExtraControlButtonPosition.TopRight,
+                        isMobile: isMobile
+                    }),
+                    displayManageColumnButton && !isMobile && /* @__PURE__ */ jsx(StyledColumnButton, {
+                        type: "button",
+                        variant: "ghost",
+                        appearance: "primary",
+                        iconLeft: /* @__PURE__ */ jsx(Settings2, {}),
+                        onClick: openManageColumnForm,
+                        children: /* @__PURE__ */ jsx(H6, {
+                            variant: "semiBold",
+                            mt: 0,
+                            mb: 0,
+                            children: /* @__PURE__ */ jsx(Trans, {
+                                id: "manageColumn.title",
+                                message: "Manage column"
+                            })
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+var ControlButtons_default = ControlButtons;
+export { ControlButtons_default as default };

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

@@ -0,0 +1,3 @@
+import ControlButtons from "./ControlButtons";
+var ControlButtons_default = ControlButtons;
+export { ControlButtons_default as default };

package/ui/Blocks/CommonGrid/components/ControlButtons/styles.js

@@ -0,0 +1,55 @@
+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  display: flex;\n  position: sticky;\n  justify-content: space-between;\n  flex: 1;\n  left: 20px;\n"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  margin-right: 10px;\n"
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n"
+    ]);
+    _templateObject2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject3() {
+    var data = _tagged_template_literal([
+        "\n  position: sticky;\n  right: 20px;\n  z-index: 3;\n  margin-left: 8px;\n\n  > span > svg {\n    stroke: ",
+        ";\n    width: 18px;\n    height: 18px;\n  }\n  > span > H6 {\n    display: none;\n  }\n  @media (min-width: 1024px) {\n    > span > H6 {\n      display: flex;\n      margin-left: 5px;\n    }\n  }\n"
+    ]);
+    _templateObject3 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import { Button } from "../../../../Elements/Button";
+import styled from "@xstyled/styled-components";
+import { th } from "@xstyled/system";
+var ControlButtonsContainer = styled.div(_templateObject());
+var Left = styled.div(_templateObject1());
+var Right = styled.div(_templateObject2());
+var StyledColumnButton = styled(Button)(_templateObject3(), th("colors.blue2"));
+export { ControlButtonsContainer, Left, Right, StyledColumnButton };