@mailstep/design-system 0.4.21 → 0.5.0-beta.10

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

@@ -0,0 +1,113 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState, useCallback, useMemo } from 'react';
+import { DateTime } from 'luxon';
+import styled from '@xstyled/styled-components';
+import { sameDate } from './utils/sameDate';
+import { t } from '@lingui/macro';
+import { useClickOutside } from '../../../Modal/hooks/useClickOutside';
+import DatePicker from '../../../../Elements/DatePicker';
+import Input from '../../../../Forms/Input';
+var RangeWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  margin-right: 20px;\n"], ["\n  display: inline-flex;\n  margin-right: 20px;\n"
+    // User readable date range.
+])));
+// User readable date range.
+var pickerRangeToString = function (values) {
+    if (values === void 0) { values = []; }
+    // If no date is specified
+    if (!values[0] && !values[1]) {
+        return '';
+    }
+    // If only From date is specified
+    if (values[0] && !values[1]) {
+        return DateTime.fromJSDate(values[0]).toFormat('dd.LL.yyyy');
+    }
+    // If both of date are same, show only one date
+    if (sameDate(values[0], values[1])) {
+        return DateTime.fromJSDate(values[0]).toFormat('dd.LL.yyyy');
+    }
+    // Format each date separately and join together
+    return values.map(function (v) { return v && DateTime.fromJSDate(v).toFormat('dd.LL.yyyy'); }).join(' - ');
+};
+var OverlayComponentDefault = function (_a) {
+    var children = _a.children;
+    return _jsx("div", { children: children });
+};
+var DatePickerRange = function (props) {
+    var _a, _b, _c;
+    var onChange = props.onChange, error = props.error, label = props.label, value = props.value, filterTime = props.filterTime, initialView = props.initialView, _d = props.OverlayComponent, OverlayComponent = _d === void 0 ? OverlayComponentDefault : _d, rest = __rest(props, ["onChange", "error", "label", "value", "filterTime", "initialView", "OverlayComponent"]);
+    var _e = useState((_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : undefined), startRangeValue = _e[0], setStartRangeValue = _e[1];
+    var _f = useState((_b = value === null || value === void 0 ? void 0 : value[1]) !== null && _b !== void 0 ? _b : undefined), endRangeValue = _f[0], setEndRangeValue = _f[1];
+    var timeFormat = filterTime ? 'HH:mm' : false;
+    var placeholder = t({ id: 'dataGrid.filterCell', message: 'Type to filter' });
+    var cleanValue = React.useMemo(function () { return [
+        typeof (value === null || value === void 0 ? void 0 : value[0]) === 'string' ? new Date(value[0]) : (value === null || value === void 0 ? void 0 : value[0]) || undefined,
+        typeof (value === null || value === void 0 ? void 0 : value[1]) === 'string' ? new Date(value[1]) : (value === null || value === void 0 ? void 0 : value[1]) || undefined,
+    ]; }, [value]);
+    var initialViewDate = useMemo(function () {
+        if (cleanValue[0] && cleanValue[1]) {
+            return cleanValue;
+        }
+        var firstDate = new Date();
+        firstDate.setHours(0, 0, 0, 0);
+        var secondDate = new Date();
+        if (initialView === 'future') {
+            secondDate.setMonth(secondDate.getMonth() + 1);
+        }
+        else {
+            firstDate.setMonth(firstDate.getMonth() - 1);
+        }
+        return [firstDate, secondDate];
+    }, [cleanValue, initialView]);
+    var _g = useState(false), isOpen = _g[0], setOpen = _g[1];
+    var setDateFrom = useCallback(function (v) {
+        setStartRangeValue(v);
+        onChange([v, cleanValue[1]]);
+    }, [onChange, cleanValue]);
+    var setDateTo = useCallback(function (v) {
+        setEndRangeValue(v);
+        onChange([cleanValue[0], v]);
+    }, [onChange, cleanValue]);
+    var openPicker = useCallback(function () { return setOpen(true); }, [setOpen]);
+    var clear = useCallback(function () {
+        onChange([]);
+        setStartRangeValue(undefined);
+        setEndRangeValue(undefined);
+    }, [onChange]);
+    var isValidDateFrom = useCallback(function (current) { return !cleanValue[1] || DateTime.fromJSDate(cleanValue[1]) >= DateTime.fromJSDate(current); }, [cleanValue]);
+    var isValidDateTo = useCallback(function (current) { return !cleanValue[0] || DateTime.fromJSDate(current) >= DateTime.fromJSDate(cleanValue[0]); }, [cleanValue]);
+    var onClose = useCallback(function () {
+        setOpen(false);
+    }, []);
+    // Check if the second value is not selected and the first value is the same as the initial value
+    var secondDatePickerValue = cleanValue[1] === null ? cleanValue[0] : cleanValue[1];
+    var ref = useClickOutside({ onClose: onClose });
+    return (_jsxs("div", { ref: ref, children: [_jsx(Input, { name: props.name, placeholder: placeholder, type: "text", icon: "calendar", value: pickerRangeToString(cleanValue), label: props.label, onFocus: openPicker, iconOnClick: openPicker, appearance: "grid", onClear: clear, error: error, readOnly: true }), _jsx(OverlayComponent, { children: _jsx(_Fragment, { children: isOpen && (_jsxs(RangeWrapper, { className: "ignore-element-for-closing-hook", children: [_jsx(DatePicker, __assign({}, rest, { timeFormat: timeFormat, value: (_c = cleanValue[0]) !== null && _c !== void 0 ? _c : '', initialViewDate: initialViewDate[0], secondValue: endRangeValue, onChange: setDateFrom, icon: false, label: isOpen && t({ id: 'dataGrid.filterCell.from', message: 'From' }), isValidDate: isValidDateFrom, input: false, spaceAround: true, open: true, disabled: cleanValue[0] === null })), _jsx(DatePicker, __assign({}, rest, { timeFormat: timeFormat, value: secondDatePickerValue, initialViewDate: initialViewDate[1], secondValue: startRangeValue, onChange: setDateTo, icon: false, label: isOpen && t({ id: 'dataGrid.filterCell.to', message: 'To' }), isValidDate: isValidDateTo, input: false, spaceAround: true, open: true, disabled: secondDatePickerValue === null }))] })) }) })] }));
+};
+export default DatePickerRange;
+var templateObject_1;

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

@@ -0,0 +1,2 @@
+import DatePickerRange from './DatePickerRange';
+export default DatePickerRange;

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

@@ -0,0 +1,2 @@
+import DatePickerRange from './DatePickerRange';
+export default DatePickerRange;

package/ui/Blocks/CommonGrid/components/DatePickerRange/utils/sameDate.d.ts

@@ -0,0 +1 @@
+export declare const sameDate: (date1: Date, date2: Date) => boolean;

package/ui/Blocks/CommonGrid/components/DatePickerRange/utils/sameDate.js

@@ -0,0 +1,3 @@
+export var sameDate = function (date1, date2) {
+    return date1 && date1.getTime && date2 && date2.getTime && date1.getTime() === date2.getTime();
+};

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { AppearanceValue } from '../../../../Elements/Button';
+type Item = {
+    label: string | JSX.Element;
+    value: string;
+    name?: string;
+};
+type DropdownSelectProps = {
+    label: string | JSX.Element;
+    appearance?: AppearanceValue;
+    options: Item[];
+    showChevron?: boolean;
+    onSelect?: (value: Item['value']) => void;
+    icon?: JSX.Element;
+    disabled?: boolean;
+    ButtonComponent?: React.FC;
+};
+export declare const CustomSelectButton: import("styled-components").StyledComponent<"button", import("@xstyled/system").Theme, {}, never>;
+declare const DropdownSelect: ({ label, appearance, options, showChevron, onSelect, disabled, icon, ButtonComponent, }: DropdownSelectProps) => JSX.Element;
+export default DropdownSelect;
+export type { Item as DropdownSelectItem };

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

@@ -0,0 +1,47 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useRef } from 'react';
+import styled from '@xstyled/styled-components';
+import Icon from '../../../../Elements/Icon/Icon';
+import DropdownMenu from '../../../../Elements/DropdownMenu';
+import Button from '../../../../Elements/Button';
+import { Popover } from '../../../Popover';
+var ArrowIcon = styled(Icon)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex-shrink: 0;\n  margin-left: 2;\n"], ["\n  flex-shrink: 0;\n  margin-left: 2;\n"])));
+var CustomIconWrap = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-right: 1;\n"], ["\n  margin-right: 1;\n"])));
+var StyledDropdownMenu = styled(DropdownMenu)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  top: 8px;\n  min-width: ", ";\n  width: max-content;\n"], ["\n  position: absolute;\n  top: 8px;\n  min-width: ", ";\n  width: max-content;\n"])), function (_a) {
+    var $fixedWidth = _a.$fixedWidth;
+    return ($fixedWidth ? '160px' : 'max-content');
+});
+var ContentWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
+var ChevronWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border-left: ", ";\n"], ["\n  border-left: ", ";\n"])), function (_a) {
+    var $hasBorder = _a.$hasBorder;
+    return ($hasBorder ? '1px solid white' : 'none');
+});
+export var CustomSelectButton = styled.button(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: none;\n  min-width: 160px;\n  height: 38px;\n  padding: 0;\n  background-color: red1;\n  color: white;\n  font-size: 14px;\n  line-height: 14px;\n  font-weight: 600;\n  border: none;\n  border-radius: lg;\n  outline: none;\n  cursor: pointer;\n  :disabled {\n    border: slim;\n    background-color: bgLightGray;\n    border-color: lightGray5;\n    color: gray3;\n    opacity: 0.6;\n    cursor: auto;\n  }\n\n  @media (min-width: 1024px) {\n    display: block;\n\n    :focus {\n      outline: none;\n    }\n  }\n\n  ", " {\n    justify-content: space-between;\n    padding-left: 14px;\n  }\n\n  ", " {\n    margin-left: 20px;\n    padding: 12px 14px;\n  }\n"], ["\n  display: none;\n  min-width: 160px;\n  height: 38px;\n  padding: 0;\n  background-color: red1;\n  color: white;\n  font-size: 14px;\n  line-height: 14px;\n  font-weight: 600;\n  border: none;\n  border-radius: lg;\n  outline: none;\n  cursor: pointer;\n  :disabled {\n    border: slim;\n    background-color: bgLightGray;\n    border-color: lightGray5;\n    color: gray3;\n    opacity: 0.6;\n    cursor: auto;\n  }\n\n  @media (min-width: 1024px) {\n    display: block;\n\n    :focus {\n      outline: none;\n    }\n  }\n\n  ", " {\n    justify-content: space-between;\n    padding-left: 14px;\n  }\n\n  ", " {\n    margin-left: 20px;\n    padding: 12px 14px;\n  }\n"])), ContentWrapper, ChevronWrapper);
+var DropdownSelect = function (_a) {
+    var label = _a.label, appearance = _a.appearance, options = _a.options, showChevron = _a.showChevron, onSelect = _a.onSelect, disabled = _a.disabled, icon = _a.icon, ButtonComponent = _a.ButtonComponent;
+    var _b = React.useState(false), showDropdownMenu = _b[0], setShowDropdownMenu = _b[1];
+    var onClose = useCallback(function () { return setShowDropdownMenu(false); }, []);
+    var toggleDropdownMenu = React.useCallback(function () {
+        setShowDropdownMenu(function (prev) { return !prev; });
+    }, []);
+    var handleSelectItem = React.useCallback(function (item) {
+        setShowDropdownMenu(false);
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(item.value);
+    }, [onSelect]);
+    var ref = useRef(null);
+    var items = options.map(function (item) { return ({
+        title: item.label,
+        onClick: function () { return handleSelectItem(item); },
+        link: '#',
+        name: item.name,
+    }); });
+    var ComponentOfButton = ButtonComponent || Button;
+    var isCustomBtn = !!ButtonComponent;
+    return (_jsxs("div", { ref: ref, children: [_jsx(ComponentOfButton, { type: "button", appearance: appearance, onClick: toggleDropdownMenu, disabled: disabled, "data-cy": "createProductDropdownMenuBtn", children: _jsxs(ContentWrapper, { children: [icon && _jsx(CustomIconWrap, { children: icon }), _jsx("span", { children: label }), showChevron && (_jsx(ChevronWrapper, { "$hasBorder": isCustomBtn, children: _jsx(ArrowIcon, { icon: "chevronDown", size: isCustomBtn ? '100%' : '80%', fixedWidth: isCustomBtn }) }))] }) }), showDropdownMenu && (_jsx(Popover, { parentRef: ref, onClose: onClose, placement: "bottom-start", children: _jsx(StyledDropdownMenu, { showMenu: true, items: items, "$fixedWidth": isCustomBtn }) }))] }));
+};
+export default DropdownSelect;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -0,0 +1,4 @@
+import DropdownSelect from './DropdownSelect';
+export { CustomSelectButton } from './DropdownSelect';
+export type { DropdownSelectItem } from './DropdownSelect';
+export default DropdownSelect;

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

@@ -0,0 +1,3 @@
+import DropdownSelect from './DropdownSelect';
+export { CustomSelectButton } from './DropdownSelect';
+export default DropdownSelect;

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

@@ -0,0 +1,8 @@
+import { CommonGridProps, ExtraControlButton } from '../../types';
+export declare const Row: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+type Props = {
+    extraControlButtons: CommonGridProps['extraControlButtons'];
+    targetPosition: ExtraControlButton['position'];
+};
+declare const ExtraControlButtons: ({ extraControlButtons, targetPosition }: Props) => JSX.Element;
+export default ExtraControlButtons;

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

@@ -0,0 +1,43 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import styled, { x } from '@xstyled/styled-components';
+import Button from '../../../../Elements/Button/Button';
+import DropdownSelect from '../DropdownSelect';
+export var Row = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  & > * {\n    margin-right: 12px;\n  }\n  z-index: 2;\n"], ["\n  display: flex;\n  & > * {\n    margin-right: 12px;\n  }\n  z-index: 2;\n"])));
+var StyledButton = styled(Button)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: none;\n\n  @media (min-width: 1024px) {\n    display: block;\n  }\n"], ["\n  display: none;\n\n  @media (min-width: 1024px) {\n    display: block;\n  }\n"])));
+var ControlButton = function (_a) {
+    var node = _a.node, label = _a.label, style = _a.style, disabled = _a.disabled, onClick = _a.onClick, onSelect = _a.onSelect, options = _a.options, hideChevron = _a.hideChevron;
+    if (node)
+        return _jsx(_Fragment, { children: node });
+    if (options) {
+        return (_jsx(DropdownSelect, { label: label || '', appearance: style || 'secondary', options: options, showChevron: !hideChevron, onSelect: onSelect, disabled: disabled }));
+    }
+    else {
+        return (_jsx(StyledButton, { type: "button", onClick: onClick, disabled: disabled, appearance: style || 'secondary', children: label }));
+    }
+};
+var ExtraControlButtons = function (_a) {
+    var extraControlButtons = _a.extraControlButtons, targetPosition = _a.targetPosition;
+    return (_jsx(Row, { children: (extraControlButtons || [])
+            .filter(function (_a) {
+            var position = _a.position;
+            return position == targetPosition;
+        })
+            .map(function (button, idx) { return (_jsx(x.div, { children: _jsx(ControlButton, __assign({}, button)) }, idx)); }) }));
+};
+export default ExtraControlButtons;
+var templateObject_1, templateObject_2;

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

@@ -0,0 +1,2 @@
+import ExtraControlButtons from './ExtraControlButtons';
+export default ExtraControlButtons;

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

@@ -0,0 +1,2 @@
+import ExtraControlButtons from './ExtraControlButtons';
+export default ExtraControlButtons;

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

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from 'react';
+declare const OverlayComponent: ({ children }: PropsWithChildren<{}>) => JSX.Element;
+export default OverlayComponent;

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

@@ -0,0 +1,36 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import styled from '@xstyled/styled-components';
+var OverlayWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  z-index: 1;\n  visibility: hidden;\n"], ["\n  position: absolute;\n  z-index: 1;\n  visibility: hidden;\n"])));
+var OverlayComponent = function (_a) {
+    var children = _a.children;
+    var overlayRef = React.useRef(null);
+    React.useEffect(function () {
+        var _a;
+        var Overlay = overlayRef.current;
+        if (!Overlay)
+            return;
+        var FilterCell = Overlay === null || Overlay === void 0 ? void 0 : Overlay.closest('.cell');
+        var GridWrapper = FilterCell === null || FilterCell === void 0 ? void 0 : FilterCell.closest('.gridWrapper');
+        // position of left edge of filter cell
+        var relativeLeftOffset = (FilterCell === null || FilterCell === void 0 ? void 0 : FilterCell.offsetLeft) - ((_a = FilterCell === null || FilterCell === void 0 ? void 0 : FilterCell.parentElement) === null || _a === void 0 ? void 0 : _a.offsetLeft); // parent element = row
+        // space available to the right edge of visible part of grid
+        var spaceTotal = (GridWrapper === null || GridWrapper === void 0 ? void 0 : GridWrapper.clientWidth) + (GridWrapper === null || GridWrapper === void 0 ? void 0 : GridWrapper.scrollLeft) - relativeLeftOffset;
+        // difference between availible space and width
+        var spaceLeft = spaceTotal - (Overlay === null || Overlay === void 0 ? void 0 : Overlay.clientWidth);
+        // left position
+        var left = spaceLeft > 0 ? FilterCell === null || FilterCell === void 0 ? void 0 : FilterCell.offsetLeft : (FilterCell === null || FilterCell === void 0 ? void 0 : FilterCell.offsetLeft) + spaceLeft;
+        // top calculation
+        var topOffset = (FilterCell === null || FilterCell === void 0 ? void 0 : FilterCell.offsetTop) + (FilterCell === null || FilterCell === void 0 ? void 0 : FilterCell.clientHeight);
+        Overlay.style.left = "".concat(left, "px");
+        Overlay.style.top = "".concat(topOffset, "px");
+        Overlay.style.visibility = "initial";
+    });
+    return (_jsx(OverlayWrapper, { ref: overlayRef, className: "filterOverlay", children: children }));
+};
+export default OverlayComponent;
+var templateObject_1;

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

@@ -0,0 +1,15 @@
+import { Settings, ColumnDefinition as ColumnDefinitionType, ActionColumn, GridActionsType, GridSelectorsType, Group, FiltersConfig, UxState, RowProps } from '../types';
+type Props = {
+    columns: ColumnDefinitionType[];
+    actionColumn?: ActionColumn;
+    onChange: Required<GridActionsType>['addFilter'];
+    filterValues?: Settings['filter'];
+    displayColumnsWidth: Required<GridSelectorsType>['columnsWidth'];
+    filters?: FiltersConfig;
+    groups?: Group[];
+    handleUxChange?: GridActionsType['handleUxChange'];
+    rowsData: RowProps[];
+    uxState: UxState;
+};
+declare const FilterRow: ({ columns, groups, actionColumn, onChange, filterValues, displayColumnsWidth, filters, handleUxChange, rowsData, uxState, }: Props) => JSX.Element;
+export default FilterRow;

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

@@ -0,0 +1,34 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import get from 'lodash/fp/get';
+import throttle from 'lodash/throttle';
+import ColumnFilterCell from './ColumnFilterCell';
+import { Row, Cell } from './Table';
+import { getActionCellSizeProps, getFilterName } from '../utils';
+import { useToggleAllCheckbox } from '../utils/public';
+import Toggle from '../../../Elements/Toggle/Toggle';
+var FilterRow = function (_a) {
+    var _b, _c;
+    var columns = _a.columns, groups = _a.groups, actionColumn = _a.actionColumn, onChange = _a.onChange, _d = _a.filterValues, filterValues = _d === void 0 ? {} : _d, displayColumnsWidth = _a.displayColumnsWidth, filters = _a.filters, handleUxChange = _a.handleUxChange, rowsData = _a.rowsData, uxState = _a.uxState;
+    var handleOnChange = throttle(onChange, 500);
+    var actionColumnStyle = React.useMemo(function () {
+        return actionColumn ? __assign({}, getActionCellSizeProps(actionColumn)) : {};
+    }, [actionColumn]);
+    var _e = useToggleAllCheckbox(rowsData, uxState, handleUxChange), allChecked = _e[0], toggleCheckbox = _e[1];
+    var displayCheckbox = (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.checkAllPosition) === 'top' && (((_b = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _b === void 0 ? void 0 : _b.length) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.forceCheckboxes));
+    var displayRowNumberLabel = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbers;
+    var rowsNumberLabel = (_c = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbersLabel) !== null && _c !== void 0 ? _c : '#';
+    return (_jsxs(Row, { className: "filterRow", children: [displayCheckbox && (_jsx(Cell, { className: "cell", style: actionColumnStyle, children: _jsx(Toggle, { checked: allChecked, onChange: toggleCheckbox, label: "" }, "check-all") })), displayRowNumberLabel && (_jsx(Cell, { className: "cell", style: actionColumnStyle, children: _jsx("div", { children: rowsNumberLabel }) })), !!(!displayCheckbox && !displayRowNumberLabel && actionColumn) && (_jsx(Cell, { className: "cell", style: actionColumnStyle }, 'actions')), columns.map(function (column, index) { return (_jsx(ColumnFilterCell, { column: column, onChange: handleOnChange, value: get([getFilterName(column), 'value'], filterValues), displayColumnWidth: displayColumnsWidth[column.name], filters: filters, group: groups === null || groups === void 0 ? void 0 : groups[index] }, index)); })] }));
+};
+export default FilterRow;

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

@@ -0,0 +1,7 @@
+import { FloatingButtonProps } from '../../types';
+export declare const StyledButton: import("styled-components").StyledComponent<"button", import("@xstyled/system").Theme, {}, never>;
+export declare const StyledCross: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    isOpen: boolean;
+}, never>;
+declare const FloatingButton: ({ options, onSelect, onClick }: FloatingButtonProps) => JSX.Element | null;
+export default FloatingButton;

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

@@ -0,0 +1,45 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef, useState } from 'react';
+import styled from '@xstyled/styled-components';
+import DropdownMenu from '../../../../Elements/DropdownMenu';
+import { Popover } from '../../../Popover';
+var StyledDropdownMenu = styled(DropdownMenu)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  min-width: 160px;\n  width: max-content;\n"], ["\n  min-width: 160px;\n  width: max-content;\n"])));
+export var StyledButton = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 56px;\n  height: 56px;\n  border-radius: 50%;\n  border: none;\n  background-color: red1;\n  display: flex;\n  z-index: 1;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  bottom: 65px;\n  right: 24px;\n\n  :hover {\n    cursor: pointer;\n  }\n"], ["\n  width: 56px;\n  height: 56px;\n  border-radius: 50%;\n  border: none;\n  background-color: red1;\n  display: flex;\n  z-index: 1;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  bottom: 65px;\n  right: 24px;\n\n  :hover {\n    cursor: pointer;\n  }\n"])));
+export var StyledCross = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  .line {\n    border: 1px solid white;\n    display: flex;\n    width: 16px;\n    background-color: white;\n    transition: 0.3s;\n  }\n  > :nth-child(1) {\n    transform: ", ";\n  }\n  > :nth-child(2) {\n    transform: ", ";\n  }\n"], ["\n  .line {\n    border: 1px solid white;\n    display: flex;\n    width: 16px;\n    background-color: white;\n    transition: 0.3s;\n  }\n  > :nth-child(1) {\n    transform: ", ";\n  }\n  > :nth-child(2) {\n    transform: ", ";\n  }\n"])), function (_a) {
+    var isOpen = _a.isOpen;
+    return (isOpen ? 'rotate(135deg) translate(1px, 0)' : 'none');
+}, function (_a) {
+    var isOpen = _a.isOpen;
+    return (isOpen ? 'rotate(45deg) translate(-1px, -1px)' : 'rotate(90deg) translate(-2px, 0)');
+});
+var FloatingButton = function (_a) {
+    var options = _a.options, onSelect = _a.onSelect, onClick = _a.onClick;
+    var _b = useState(false), showDropdownMenu = _b[0], setShowDropdownMenu = _b[1];
+    var ref = useRef(null);
+    var onClose = useCallback(function () { return setShowDropdownMenu(false); }, []);
+    var handleOnClick = useCallback(function () {
+        if (options && (options === null || options === void 0 ? void 0 : options.length) > 0) {
+            setShowDropdownMenu(function (prev) { return !prev; });
+        }
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    }, [onClick, options]);
+    var handleSelectItem = useCallback(function (item) {
+        setShowDropdownMenu(false);
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(item.value);
+    }, [onSelect]);
+    var items = useMemo(function () {
+        return options === null || options === void 0 ? void 0 : options.map(function (item) { return ({
+            title: item.label,
+            onClick: function () { return handleSelectItem(item); },
+            link: '#',
+            name: item.name,
+        }); });
+    }, [handleSelectItem, options]);
+    return (_jsxs(StyledButton, { ref: ref, onClick: handleOnClick, children: [_jsxs(StyledCross, { isOpen: showDropdownMenu, children: [_jsx("span", { className: "line" }), _jsx("span", { className: "line" })] }), showDropdownMenu && (_jsx(Popover, { parentRef: ref, onClose: onClose, placement: "left-end", children: _jsx(StyledDropdownMenu, { showMenu: true, items: items }) }))] }));
+};
+export default FloatingButton;
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -0,0 +1,2 @@
+import FloatingButton from './FloatingButton';
+export default FloatingButton;

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

@@ -0,0 +1,2 @@
+import FloatingButton from './FloatingButton';
+export default FloatingButton;

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

@@ -0,0 +1,10 @@
+import { ColumnDefinition } from '../../types';
+type Props = {
+    onChange: (data: any) => void;
+    isMulti?: boolean;
+    options?: ColumnDefinition['filterOptions'];
+    value?: string | string[];
+    checkAllButton?: boolean;
+};
+declare const SelectFilter: ({ onChange, isMulti, value, options, checkAllButton }: Props) => JSX.Element;
+export default SelectFilter;

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import MultiSelect from '../../../../Elements/MultiSelect';
+import SingleSelect from '../../../../Elements/SingleSelect';
+import isArray from 'lodash/isArray';
+var emptyValue = [];
+var SelectFilter = function (_a) {
+    var onChange = _a.onChange, isMulti = _a.isMulti, value = _a.value, options = _a.options, checkAllButton = _a.checkAllButton;
+    var handleOnMultiChange = useCallback(function (options) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(!isArray(options) || !(options === null || options === void 0 ? void 0 : options.length) ? null : options.map(function (option) { return option.value; }));
+    }, [onChange]);
+    if (isMulti) {
+        return (_jsx(MultiSelect, { maxMenuHeight: 250, onChange: handleOnMultiChange, value: value || emptyValue, options: options, checkAllButton: checkAllButton, style: "gridFilter" }));
+    }
+    else {
+        return _jsx(SingleSelect, { maxMenuHeight: 250, onChange: onChange, value: value, options: options, style: "gridFilter" });
+    }
+};
+export default SelectFilter;

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

@@ -0,0 +1,2 @@
+import GridSelect from './GridSelect';
+export default GridSelect;

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

@@ -0,0 +1,2 @@
+import GridSelect from './GridSelect';
+export default GridSelect;

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

@@ -0,0 +1,9 @@
+import { ActionColumn, Group, ColumnDefinition, GridSelectorsType } from '../types';
+type GroupRowProps = {
+    groups: Group[];
+    actionColumn?: ActionColumn;
+    columns: ColumnDefinition[];
+    displayColumnsWidth: Required<GridSelectorsType>['columnsWidth'];
+};
+declare const GroupRow: ({ actionColumn, columns, groups, displayColumnsWidth }: GroupRowProps) => JSX.Element;
+export default GroupRow;

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

@@ -0,0 +1,27 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Row, Cell } from './Table';
+import { getCellSizeProps, getActionCellSizeProps, getGroupClassNames, getStickyCollClassNames } from '../utils';
+var GroupCell = function (_a) {
+    var column = _a.column, group = _a.group, displayColumnWidth = _a.displayColumnWidth;
+    var cellSizeProps = getCellSizeProps(column, displayColumnWidth);
+    var cellClassName = "cell".concat(getStickyCollClassNames(!!column.sticky, column.stickTo), " ").concat(getGroupClassNames(group));
+    return (_jsx(Cell, __assign({ className: cellClassName }, cellSizeProps, { children: group.start && _jsx(_Fragment, { children: group.name }) })));
+};
+var GroupRow = function (_a) {
+    var actionColumn = _a.actionColumn, columns = _a.columns, groups = _a.groups, displayColumnsWidth = _a.displayColumnsWidth;
+    var actionColumnStyle = React.useMemo(function () { return (actionColumn ? __assign({}, getActionCellSizeProps(actionColumn)) : {}); }, [actionColumn]);
+    return (_jsxs(Row, { className: "group-row", children: [actionColumn && _jsx(Cell, { className: "cell", style: actionColumnStyle }, "actions"), groups.map(function (group, key) { return (_jsx(GroupCell, { column: columns[key], group: group, displayColumnWidth: displayColumnsWidth[columns[key].name] }, key)); })] }));
+};
+export default GroupRow;

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { DraggableProps, DraggableProvidedDragHandleProps } from 'react-beautiful-dnd';
+import { SortingValueType, Group, GridActionsType, StickTo } from '../types';
+type Props = {
+    title?: string | JSX.Element;
+    name?: string;
+    isSortable: boolean;
+    systemName?: string;
+    isDragging?: boolean;
+    draggableProps?: DraggableProps | any;
+    dragHandleProps?: DraggableProvidedDragHandleProps | null;
+    innerRef?: Function;
+    hasResize?: boolean;
+    flexBasis?: number;
+    flexGrow?: number;
+    flexShrink?: number;
+    onResizeOver?: () => void;
+    onResizeOut?: () => void;
+    onAddSort?: GridActionsType['addSorting'];
+    sortValue: SortingValueType;
+    handleResizeDrag?: (column: string, width: number) => void;
+    group?: Group;
+    sticky?: boolean;
+    stickTo?: StickTo;
+};
+declare const _default: React.MemoExoticComponent<({ title, name, isSortable, systemName, onAddSort, sortValue, hasResize, onResizeOver, onResizeOut, innerRef, isDragging, draggableProps, dragHandleProps, flexBasis, flexGrow, flexShrink, handleResizeDrag, group, sticky, stickTo, }: Props) => JSX.Element>;
+export default _default;

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

@@ -0,0 +1,40 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import styled from '@xstyled/styled-components';
+import { Cell } from './Table';
+import ColumnTitle from './ColumnTitle';
+import Resize from './Resize';
+import { getGroupClassNames, getStickyCollClassNames } from '../utils';
+var DraggableCell = styled(Cell)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var $isDragging = _a.$isDragging;
+    return ($isDragging ? 'transparentRed' : 'transparent');
+});
+var HeadCell = function (_a) {
+    var title = _a.title, _b = _a.name, name = _b === void 0 ? '' : _b, isSortable = _a.isSortable, systemName = _a.systemName, onAddSort = _a.onAddSort, sortValue = _a.sortValue, hasResize = _a.hasResize, onResizeOver = _a.onResizeOver, onResizeOut = _a.onResizeOut, innerRef = _a.innerRef, isDragging = _a.isDragging, draggableProps = _a.draggableProps, dragHandleProps = _a.dragHandleProps, flexBasis = _a.flexBasis, flexGrow = _a.flexGrow, _c = _a.flexShrink, flexShrink = _c === void 0 ? 1 : _c, handleResizeDrag = _a.handleResizeDrag, group = _a.group, sticky = _a.sticky, stickTo = _a.stickTo;
+    var onResize = React.useCallback(function (width) {
+        handleResizeDrag === null || handleResizeDrag === void 0 ? void 0 : handleResizeDrag(name, width);
+    }, [handleResizeDrag, name]);
+    var style = React.useMemo(function () { return (__assign({}, draggableProps === null || draggableProps === void 0 ? void 0 : draggableProps.style)); }, [draggableProps]);
+    var onSetSort = React.useCallback(function (value) {
+        onAddSort && onAddSort(systemName || name, value);
+    }, [onAddSort, systemName, name]);
+    var cellClassName = "cell".concat(getStickyCollClassNames(!!sticky, stickTo), " ").concat(getGroupClassNames(group));
+    return (_jsxs(DraggableCell, __assign({}, draggableProps, dragHandleProps, { style: style, flexBasis: flexBasis, flexGrow: flexGrow, flexShrink: flexShrink, innerRef: innerRef, "$isDragging": isDragging, className: cellClassName, children: [_jsx(ColumnTitle, { title: title, isSortable: isSortable, onSetSort: onSetSort, sortValue: sortValue }), hasResize && onResizeOut && onResizeOver && (_jsx(Resize, { onResize: onResize, onResizeOver: onResizeOver, onResizeOut: onResizeOut }))] })));
+};
+export default React.memo(HeadCell);
+var templateObject_1;

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

@@ -0,0 +1,15 @@
+import { Settings, ColumnDefinition, ActionColumn, GridSelectorsType, Group, CommonGridProps, GridActionsType } from '../types';
+type HeadRowProps = {
+    actionColumn?: ActionColumn;
+    columns: ColumnDefinition[];
+    columnsOrder?: string[];
+    onAddSort: GridActionsType['addSorting'];
+    setColumnsOrder: (columnsOrder: string[]) => void;
+    sortingValues?: Settings['sorting'];
+    displayColumnsWidth: Required<GridSelectorsType>['columnsWidth'];
+    columnLayout: Required<CommonGridProps>['columnLayout'];
+    handleResizeDrag: (column: string, width: number) => void;
+    groups: Group[];
+};
+declare const HeadRow: ({ columns, actionColumn, onAddSort, setColumnsOrder, columnsOrder, sortingValues, displayColumnsWidth, columnLayout, handleResizeDrag, groups, }: HeadRowProps) => JSX.Element;
+export default HeadRow;