@mailstep/design-system 0.8.26 → 0.8.27

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

@@ -0,0 +1,195 @@
+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 _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 _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 _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;
+}
+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 _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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState } from "react";
+import { getCellSizeProps, getStickyCollClassNames } from "../utils";
+import { closestCenter, useSensor, useSensors, DndContext, PointerSensor } from "@dnd-kit/core";
+import { SortableContext, horizontalListSortingStrategy } from "@dnd-kit/sortable";
+import ColumnTitle from "./ColumnTitle";
+import { HeadCell } from "./HeadCell";
+import { Row, Cell } from "./Table";
+var getStickyComponent = function getStickyComponent(columns, stickyTo, displayColumnsWidth) {
+    var _columns_filter;
+    return columns === null || columns === void 0 ? void 0 : (_columns_filter = columns.filter(function(item) {
+        return item.sticky && item.stickTo === stickyTo;
+    })) === null || _columns_filter === void 0 ? void 0 : _columns_filter.map(function(column) {
+        var cellClassName = "cell".concat(getStickyCollClassNames(!!column.sticky, column.stickTo));
+        return /* @__PURE__ */ jsx(Cell, _object_spread_props(_object_spread({}, getCellSizeProps(column, displayColumnsWidth[column.name])), {
+            className: cellClassName,
+            children: /* @__PURE__ */ jsx(ColumnTitle, {
+                title: column === null || column === void 0 ? void 0 : column.title,
+                isSortable: false,
+                sortValue: null
+            })
+        }), column.name);
+    });
+};
+var HeadRow = function HeadRow(param) {
+    var columns = param.columns, onAddSort = param.onAddSort, handleDragEnd = param.handleDragEnd, _param_sortingValues = param.sortingValues, sortingValues = _param_sortingValues === void 0 ? [] : _param_sortingValues, displayColumnsWidth = param.displayColumnsWidth, columnLayout = param.columnLayout, handleResizeDrag = param.handleResizeDrag, groups = param.groups, isSortTerminated = param.isSortTerminated;
+    var _useState = _sliced_to_array(useState(false), 2), showUIElements = _useState[0], setShowUIElements = _useState[1];
+    useEffect(function() {
+        setShowUIElements(true);
+    }, []);
+    var _useState1 = _sliced_to_array(useState(false), 2), isDragDisabled = _useState1[0], setIsDragDisabled = _useState1[1];
+    var onResizeOver = React.useCallback(function() {
+        setIsDragDisabled(true);
+    }, [
+        setIsDragDisabled
+    ]);
+    var onResizeOut = React.useCallback(function() {
+        setIsDragDisabled(false);
+    }, [
+        setIsDragDisabled
+    ]);
+    var onResize = React.useCallback(function(name) {
+        return function(width) {
+            handleResizeDrag === null || handleResizeDrag === void 0 ? void 0 : handleResizeDrag(name, width);
+        };
+    }, [
+        handleResizeDrag
+    ]);
+    var onSetSort = React.useCallback(function(name, systemName) {
+        return function(value) {
+            onAddSort === null || onAddSort === void 0 ? void 0 : onAddSort(systemName || name, value);
+        };
+    }, [
+        onAddSort
+    ]);
+    var sensors = useSensors(useSensor(PointerSensor));
+    return /* @__PURE__ */ jsx(Fragment, {
+        children: showUIElements && /* @__PURE__ */ jsx(DndContext, {
+            sensors: sensors,
+            collisionDetection: closestCenter,
+            onDragEnd: handleDragEnd,
+            children: /* @__PURE__ */ jsx(SortableContext, {
+                items: columns.map(function(param) {
+                    var name = param.name;
+                    return name;
+                }),
+                strategy: horizontalListSortingStrategy,
+                children: /* @__PURE__ */ jsxs(Row, {
+                    className: "headRow",
+                    children: [
+                        getStickyComponent(columns, "left", displayColumnsWidth),
+                        columns.filter(function(item) {
+                            return !item.sticky;
+                        }).map(function(column, index) {
+                            return /* @__PURE__ */ jsx(HeadCell, {
+                                column: column,
+                                isDragDisabled: isDragDisabled,
+                                displayColumnsWidth: displayColumnsWidth,
+                                onResizeOut: onResizeOut,
+                                onResizeOver: onResizeOver,
+                                onResize: onResize,
+                                sortingValues: sortingValues,
+                                onSetSort: onSetSort,
+                                group: groups[index],
+                                hasResize: columnLayout === "normal" || !!columns[index + 1],
+                                isSortTerminated: isSortTerminated
+                            }, column.name);
+                        }),
+                        getStickyComponent(columns, "right", displayColumnsWidth)
+                    ]
+                })
+            })
+        })
+    });
+};
+var HeadRow_default = HeadRow;
+export { HeadRow_default as default };

package/ui/Blocks/CommonGrid/components/IconList/IconList.d.ts

@@ -1,11 +1,10 @@
-import { FC } from 'react';
-
-export declare const List: import('styled-components').StyledComponent<"ul", import('@xstyled/system').Theme, {}, never>;
-export declare const ListItem: import('styled-components').StyledComponent<"li", import('@xstyled/system').Theme, {}, never>;
-export declare const ListItemContent: import('styled-components').StyledComponent<"span", import('@xstyled/system').Theme, {
+import type { FC } from 'react';
+export declare const List: import("styled-components").StyledComponent<"ul", import("@xstyled/system").Theme, {}, never>;
+export declare const ListItem: import("styled-components").StyledComponent<"li", import("@xstyled/system").Theme, {}, never>;
+export declare const ListItemContent: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {
     selected?: boolean;
 }, never>;
-export declare const ListItemIcon: import('styled-components').StyledComponent<"span", import('@xstyled/system').Theme, {}, never>;
+export declare const ListItemIcon: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {}, never>;
 type Item = {
     value: string;
     icon?: string;

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

@@ -0,0 +1,101 @@
+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  background-color: white;\n  box-shadow: dropShadow;\n  border-radius: 10px;\n  padding: 2;\n  min-width: 130px;\n"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    var data = _tagged_template_literal([
+        "\n  border-bottom: 1px solid ",
+        ";\n  padding: 1 0;\n  cursor: pointer;\n"
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  align-items: center;\n  padding: 8px 10px;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 400;\n  color: ",
+        ";\n  background-color: ",
+        ";\n  :hover {\n    background-color: ",
+        ";\n  }\n"
+    ]);
+    _templateObject2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject3() {
+    var data = _tagged_template_literal([
+        "\n  display: inline-block;\n  border: 1px solid;\n  border-color: blue2;\n  border-radius: 2px;\n  margin-right: 2;\n  width: 12px;\n  height: 12px;\n  line-height: 6px;\n  padding-top: 1px;\n"
+    ]);
+    _templateObject3 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import Icon from "../../../../Elements/Icon/Icon";
+import styled from "@xstyled/styled-components";
+import { th } from "@xstyled/system";
+var List = styled.ul(_templateObject());
+var ListItem = styled.li(_templateObject1(), th("colors.bgLightGray1"));
+var ListItemContent = styled.span(_templateObject2(), function(param) {
+    var selected = param.selected;
+    return selected ? th("colors.red1") : "auto";
+}, function(param) {
+    var selected = param.selected;
+    return selected ? th("colors.red20") : "transparent";
+}, function(param) {
+    var selected = param.selected;
+    return selected ? th("colors.red30") : th("colors.bgLightGray1");
+});
+var ListItemIcon = styled.span(_templateObject3());
+var IconList = function IconList(param) {
+    var list = param.list, selected = param.selected, onClick = param.onClick;
+    var handleClick = React.useCallback(function(item) {
+        return function() {
+            onClick(item);
+        };
+    }, [
+        onClick
+    ]);
+    return /* @__PURE__ */ jsx(List, {
+        className: "ignore-element-for-closing-hook",
+        children: list.map(function(item) {
+            return /* @__PURE__ */ jsx(ListItem, {
+                onClick: handleClick(item),
+                children: /* @__PURE__ */ jsxs(ListItemContent, {
+                    selected: selected === item.value,
+                    children: [
+                        item.icon && /* @__PURE__ */ jsx(ListItemIcon, {
+                            children: /* @__PURE__ */ jsx(Icon, {
+                                icon: item.icon,
+                                fill: "red1",
+                                size: "8px"
+                            })
+                        }),
+                        item.label
+                    ]
+                })
+            }, item.value);
+        })
+    });
+};
+var IconList_default = IconList;
+export { List, ListItem, ListItemContent, ListItemIcon, IconList_default as default };

package/ui/Blocks/CommonGrid/components/IconList/index.d.ts

@@ -1,3 +1,2 @@
-import { default as IconList } from './IconList';
-
+import IconList from './IconList';
 export default IconList;

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

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

package/ui/Blocks/CommonGrid/components/ManageColumnForm/ManageColumnForm.d.ts

@@ -1,7 +1,7 @@
-import { default as React, FC } from 'react';
-import { ColumnConfig, CommonGridProps } from '../../types';
-import { DragEndEvent } from '@dnd-kit/core';
-
+import React from 'react';
+import type { FC } from 'react';
+import type { ColumnConfig, CommonGridProps } from '../../types';
+import type { DragEndEvent } from '@dnd-kit/core';
 type ManageColumnProps = {
     columns: CommonGridProps['columnsDefinitions'];
     columnsConfigValues?: string[];

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

@@ -0,0 +1,117 @@
+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 _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 { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { Input } from "../../../../Forms/Input/Input";
+import { ManageColumnRow } from "./components/ManageColumnRow";
+import { closestCenter, useSensor, useSensors, DndContext, PointerSensor } from "@dnd-kit/core";
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { i18n } from "@lingui/core";
+import { x } from "@xstyled/styled-components";
+var modifiers = [
+    restrictToVerticalAxis
+];
+var ManageColumnForm = function ManageColumnForm(param) {
+    var columns = param.columns, columnsConfigValues = param.columnsConfigValues, setColumnsConfigOptions = param.setColumnsConfigOptions, handleDragEnd = param.handleDragEnd;
+    var _useState = _sliced_to_array(useState(""), 2), searchedValue = _useState[0], setSearchedValue = _useState[1];
+    var onChangeInputValue = useCallback(function(e) {
+        setSearchedValue(e.target.value);
+    }, [
+        setSearchedValue
+    ]);
+    var clear = useCallback(function() {
+        setSearchedValue("");
+    }, [
+        setSearchedValue
+    ]);
+    var sensors = useSensors(useSensor(PointerSensor));
+    return /* @__PURE__ */ jsxs(x.div, {
+        children: [
+            /* @__PURE__ */ jsx(Input, {
+                icon: "search",
+                type: "text",
+                value: searchedValue,
+                placeholder: i18n._({
+                    id: "manageColumn.searchPlaceholder",
+                    message: "Find column..."
+                }),
+                onChange: onChangeInputValue,
+                onClear: clear,
+                variant: "gray"
+            }),
+            /* @__PURE__ */ jsx(DndContext, {
+                sensors: sensors,
+                collisionDetection: closestCenter,
+                onDragEnd: handleDragEnd,
+                modifiers: modifiers,
+                children: /* @__PURE__ */ jsx(SortableContext, {
+                    items: columns.map(function(param) {
+                        var name = param.name;
+                        return name;
+                    }),
+                    strategy: verticalListSortingStrategy,
+                    children: /* @__PURE__ */ jsx(x.div, {
+                        h: "400px",
+                        overflowY: "scroll",
+                        mt: "20px",
+                        children: columns.map(function(column) {
+                            return /* @__PURE__ */ jsx(ManageColumnRow, {
+                                column: column,
+                                columnsConfigValues: columnsConfigValues,
+                                setColumnsConfigOptions: setColumnsConfigOptions,
+                                searchedValue: searchedValue
+                            }, column.name);
+                        })
+                    })
+                })
+            })
+        ]
+    });
+};
+var ManageColumnForm_default = ManageColumnForm;
+export { ManageColumnForm_default as default };

package/ui/Blocks/CommonGrid/components/ManageColumnForm/components/ManageColumnRow.d.ts

@@ -1,6 +1,6 @@
-import { default as React, FC } from 'react';
-import { ColumnConfig, ColumnDefinition } from '../../../types';
-
+import React from 'react';
+import type { FC } from 'react';
+import type { ColumnConfig, ColumnDefinition } from '../../../types';
 type ActionRowProps = {
     column: ColumnDefinition;
     columnsConfigValues: string[] | undefined;

package/ui/Blocks/CommonGrid/components/ManageColumnForm/components/ManageColumnRow.js

@@ -0,0 +1,175 @@
+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 _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 _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 _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;
+}
+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 _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 { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { Group } from "../../../../../Elements/Icon/icons/Group";
+import Toggle from "../../../../../Elements/Toggle/Toggle";
+import { H6 } from "../../../../../Elements/Typography/Typography";
+import { RowLayout } from "../styles";
+import { getTranslatedValue } from "../utils";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { x } from "@xstyled/styled-components";
+var ManageColumnRow = function ManageColumnRow(param) {
+    var column = param.column, columnsConfigValues = param.columnsConfigValues, setColumnsConfigOptions = param.setColumnsConfigOptions, searchedValue = param.searchedValue;
+    var _ref;
+    var _translatedValue_toLocaleLowerCase;
+    var _useState = _sliced_to_array(useState((_ref = columnsConfigValues === null || columnsConfigValues === void 0 ? void 0 : columnsConfigValues.includes(column.name)) !== null && _ref !== void 0 ? _ref : false), 2), isSelected = _useState[0], setIsSelected = _useState[1];
+    var handleToggleChange = useCallback(function() {
+        setColumnsConfigOptions(function(prevOptions) {
+            return _object_spread_props(_object_spread({}, prevOptions), _define_property({}, column.name, !isSelected ? {} : {
+                isHidden: true
+            }));
+        });
+        setIsSelected(!isSelected);
+    }, [
+        setColumnsConfigOptions,
+        isSelected,
+        column.name
+    ]);
+    var translatedValue = getTranslatedValue(column);
+    var isVisible = (translatedValue === null || translatedValue === void 0 ? void 0 : (_translatedValue_toLocaleLowerCase = translatedValue.toLocaleLowerCase()) === null || _translatedValue_toLocaleLowerCase === void 0 ? void 0 : _translatedValue_toLocaleLowerCase.includes(searchedValue.toLocaleLowerCase())) && !column.alwaysOn;
+    var _useSortable = useSortable({
+        id: column.name,
+        disabled: !!searchedValue || !!column.sticky,
+        animateLayoutChanges: function animateLayoutChanges() {
+            return false;
+        }
+    }), attributes = _useSortable.attributes, listeners = _useSortable.listeners, setNodeRef = _useSortable.setNodeRef, transform = _useSortable.transform, transition = _useSortable.transition;
+    return /* @__PURE__ */ jsx(RowLayout, {
+        $isVisible: isVisible,
+        transition: transition,
+        transform: CSS.Transform.toString(transform),
+        ref: setNodeRef,
+        children: /* @__PURE__ */ jsxs(x.div, {
+            display: "flex",
+            alignItems: "center",
+            w: "100%",
+            children: [
+                /* @__PURE__ */ jsx(x.div, {
+                    w: "28px",
+                    children: /* @__PURE__ */ jsx(Toggle, {
+                        name: "",
+                        variant: "grid",
+                        onChange: handleToggleChange,
+                        spaceAround: false,
+                        checked: isSelected
+                    })
+                }),
+                /* @__PURE__ */ jsxs(H6, _object_spread_props(_object_spread({
+                    variant: "medium",
+                    ml: "8px",
+                    m: "0",
+                    w: "100%",
+                    p: "8px",
+                    cursor: "grab"
+                }, attributes, listeners), {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    children: [
+                        translatedValue,
+                        /* @__PURE__ */ jsx(Group, {})
+                    ]
+                }))
+            ]
+        })
+    });
+};
+export { ManageColumnRow };

package/ui/Blocks/CommonGrid/components/ManageColumnForm/index.d.ts

@@ -1,3 +1,2 @@
-import { default as ManageColumnForm } from './ManageColumnForm';
-
+import ManageColumnForm from './ManageColumnForm';
 export default ManageColumnForm;

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

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

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

@@ -1,4 +1,4 @@
-export declare const RowLayout: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const RowLayout: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     $isVisible: boolean;
     transition?: string;
     transform?: string;