@mailstep/design-system 0.5.1-beta.1 → 0.6.0

package/ui/Blocks/CommonGrid/components/gridCells/EnumInCell.d.ts

@@ -0,0 +1,9 @@
+import { FlagAppearanceType } from '../../../../Elements/HighlightBox/HighlightBox';
+type Props = {
+    value: string;
+    appearanceMap: Record<string, FlagAppearanceType>;
+    enumObj: Record<string, () => string>;
+    size?: 'default' | 'small' | 'wide' | 'fitContent';
+};
+export declare const EnumInCell: ({ value, enumObj, appearanceMap, size }: Props) => JSX.Element | null;
+export {};

package/ui/Blocks/CommonGrid/components/gridCells/EnumInCell.js

@@ -0,0 +1,33 @@
+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 } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import styled from '@xstyled/styled-components';
+import HighlightBox from '../../../../Elements/HighlightBox';
+var Center = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-start;\n  width: 100%;\n"], ["\n  display: flex;\n  justify-content: flex-start;\n  width: 100%;\n"])));
+export var EnumInCell = function (_a) {
+    var value = _a.value, enumObj = _a.enumObj, appearanceMap = _a.appearanceMap, size = _a.size;
+    var finalLabel = useMemo(function () {
+        return enumObj[value] ? enumObj[value]() : value;
+    }, [enumObj, value]);
+    var coloringProp = useMemo(function () {
+        return { appearance: appearanceMap[value] };
+    }, [appearanceMap, value]);
+    if (!finalLabel)
+        return null;
+    return (_jsx(Center, { children: _jsx(HighlightBox, __assign({}, coloringProp, { size: size, prefix: "grid", children: finalLabel })) }));
+};
+var templateObject_1;

package/ui/Blocks/CommonGrid/components/gridCells/HoverBubble.d.ts

@@ -0,0 +1,4 @@
+import { DataCellProps } from '../../types';
+type Props = DataCellProps<{}>;
+export declare const HoverBubble: ({ rowData, column }: Props) => JSX.Element | null;
+export {};

package/ui/Blocks/CommonGrid/components/gridCells/HoverBubble.js

@@ -0,0 +1,18 @@
+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 styled from '@xstyled/styled-components';
+import get from 'lodash/fp/get';
+var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  text-align: center;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  :hover {\n    cursor: pointer;\n    .tooltip {\n      display: block;\n    }\n  }\n"], ["\n  text-align: center;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  :hover {\n    cursor: pointer;\n    .tooltip {\n      display: block;\n    }\n  }\n"])));
+var Tooltip = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-content: center;\n  justify-content: center;\n  margin-bottom: 2;\n\n  div {\n    display: none;\n    position: absolute;\n    background-color: white;\n    color: gray;\n    border-color: gray;\n    border: 1px solid;\n    border-radius: md;\n    padding: 2 3;\n    margin: 1;\n    z-index: 1;\n    box-shadow: tooltipBoxShadow;\n    transform: translateY(-100%);\n\n    max-width: 400px;\n    line-break: anywhere;\n    white-space: initial;\n  }\n"], ["\n  display: flex;\n  align-content: center;\n  justify-content: center;\n  margin-bottom: 2;\n\n  div {\n    display: none;\n    position: absolute;\n    background-color: white;\n    color: gray;\n    border-color: gray;\n    border: 1px solid;\n    border-radius: md;\n    padding: 2 3;\n    margin: 1;\n    z-index: 1;\n    box-shadow: tooltipBoxShadow;\n    transform: translateY(-100%);\n\n    max-width: 400px;\n    line-break: anywhere;\n    white-space: initial;\n  }\n"])));
+export var HoverBubble = function (_a) {
+    var rowData = _a.rowData, column = _a.column;
+    var value = get(column.name, rowData);
+    if (value) {
+        return (_jsxs(Wrapper, { children: [_jsx(Tooltip, { children: _jsx("div", { className: "tooltip", children: value }) }), value] }));
+    }
+    return null;
+};
+var templateObject_1, templateObject_2;

package/ui/Blocks/CommonGrid/components/gridCells/IconButtonInCell.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type Props = {
+    icon?: string;
+    isLoading?: boolean;
+    onClick: React.HTMLProps<HTMLButtonElement>['onClick'];
+    linkTo?: string;
+};
+export declare const IconButtonInCell: ({ icon, isLoading, onClick, linkTo }: Props) => JSX.Element;
+export {};

package/ui/Blocks/CommonGrid/components/gridCells/IconButtonInCell.js

@@ -0,0 +1,15 @@
+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 styled from '@xstyled/styled-components';
+import { Link as ReactLink } from 'react-router-dom';
+import Spinner from '../../../../Elements/Spinner/Spinner';
+import Icon from '../../../../Elements/Icon/Icon';
+var Center = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  & > * {\n    cursor: pointer;\n    color: gray1;\n    :hover {\n      color: blue2;\n    }\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  & > * {\n    cursor: pointer;\n    color: gray1;\n    :hover {\n      color: blue2;\n    }\n  }\n"])));
+export var IconButtonInCell = function (_a) {
+    var icon = _a.icon, isLoading = _a.isLoading, onClick = _a.onClick, linkTo = _a.linkTo;
+    return (_jsx(Center, { children: isLoading ? (_jsx(Spinner, { variant: "sm" })) : linkTo ? (_jsx(ReactLink, { to: linkTo, "data-cy": "".concat(icon, "IconBtn"), children: _jsx(Icon, { icon: icon || 'warning', size: "16px" }) })) : (_jsx("span", { onClick: onClick, "data-cy": "".concat(icon, "IconBtn"), children: _jsx(Icon, { icon: icon || 'warning', size: "16px" }) })) }));
+};
+var templateObject_1;

package/ui/Blocks/CommonGrid/components/gridCells/ImageCell.d.ts

@@ -0,0 +1,6 @@
+import { DataCellProps } from '../../types';
+type Props = DataCellProps<{}> & {
+    onClick?: () => void;
+};
+export declare const ImageCell: ({ rowData, column, onClick }: Props) => JSX.Element | null;
+export {};

package/ui/Blocks/CommonGrid/components/gridCells/ImageCell.js

@@ -0,0 +1,23 @@
+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 styled from '@xstyled/styled-components';
+import get from 'lodash/fp/get';
+import Image from '../../../../Elements/Image/Image';
+var ImageWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  height: 100%;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  ", "\n  height: 100%;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_a) {
+    var onClick = _a.onClick;
+    return (onClick ? 'cursor: pointer;' : '');
+});
+var StyledImage = styled(Image)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  max-width: 100%;\n  height: 30px;\n  border: 1x solid;\n  border-radius: md;\n  border-color: lightGray3;\n"], ["\n  max-width: 100%;\n  height: 30px;\n  border: 1x solid;\n  border-radius: md;\n  border-color: lightGray3;\n"])));
+export var ImageCell = function (_a) {
+    var _b;
+    var rowData = _a.rowData, column = _a.column, onClick = _a.onClick;
+    var value = get(column.name, rowData);
+    if ((_b = value === null || value === void 0 ? void 0 : value[0]) === null || _b === void 0 ? void 0 : _b.urlSmall) {
+        return (_jsx(ImageWrapper, { onClick: onClick, children: _jsx(StyledImage, { src: value[0].urlSmall }) }));
+    }
+    return null;
+};
+var templateObject_1, templateObject_2;

package/ui/Blocks/CommonGrid/components/gridCells/LinkInCell.d.ts

@@ -0,0 +1 @@
+export declare const LinkInCell: import("styled-components").StyledComponent<typeof import("react-router-dom").Link, import("@xstyled/system").Theme, import("../../../../Elements/SimpleLink/SimpleLink").Props, never>;

package/ui/Blocks/CommonGrid/components/gridCells/LinkInCell.js

@@ -0,0 +1,8 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from '@xstyled/styled-components';
+import { SimpleLink } from '../../../../Elements/SimpleLink';
+export var LinkInCell = styled(SimpleLink)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  text-decoration: underline;\n"], ["\n  text-decoration: underline;\n"])));
+var templateObject_1;

package/ui/Blocks/CommonGrid/components/gridCells/RemoveItem.d.ts

@@ -0,0 +1,5 @@
+import { DataCellProps } from '../../types';
+type Props = DataCellProps<any>;
+export declare const Wrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const RemoveCell: ({ rowData, onRowAction }: Props) => JSX.Element;
+export {};

package/ui/Blocks/CommonGrid/components/gridCells/RemoveItem.js

@@ -0,0 +1,24 @@
+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 from 'react';
+import styled from '@xstyled/styled-components';
+import { Trans } from '@lingui/react';
+import Icon from '../../../../Elements/Icon/Icon';
+export var Wrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
+var Trigger = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  cursor: pointer;\n  color: gray;\n  font-weight: bold;\n  font-size: 10px;\n  & .faIcon {\n    margin-right: 4px;\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  cursor: pointer;\n  color: gray;\n  font-weight: bold;\n  font-size: 10px;\n  & .faIcon {\n    margin-right: 4px;\n  }\n"])));
+export var RemoveCell = function (_a) {
+    var _b;
+    var rowData = _a.rowData, onRowAction = _a.onRowAction;
+    var onRemoveClick = React.useCallback(function () {
+        if (onRowAction)
+            onRowAction(rowData.id, 'remove', rowData);
+    }, [rowData, onRowAction]);
+    if (((_b = rowData === null || rowData === void 0 ? void 0 : rowData.product) === null || _b === void 0 ? void 0 : _b.type) === 'virtual') {
+        return _jsx(Trans, { id: "dataGrid.columnLot.NA", message: "N/A" });
+    }
+    return (_jsx(Wrap, { children: _jsxs(Trigger, { onClick: onRemoveClick, children: [_jsx(Icon, { icon: "deleteX", size: "12px" }), _jsx(Trans, { id: "dataGrid.deleteItem", message: "Delete" })] }) }));
+};
+var templateObject_1, templateObject_2;

package/ui/Blocks/CommonGrid/components/gridCells/RowActionsCell.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    canEdit: boolean;
+    onClick: () => void;
+    linkTo?: string;
+};
+export declare const RowActionsCell: ({ canEdit, onClick, linkTo }: Props) => JSX.Element;
+export {};

package/ui/Blocks/CommonGrid/components/gridCells/RowActionsCell.js

@@ -0,0 +1,30 @@
+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 { useCallback, useMemo } from 'react';
+import styled from '@xstyled/styled-components';
+import { isFunction } from 'lodash/fp';
+import { IconButtonInCell } from './IconButtonInCell';
+var Center = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  cursor: pointer;\n  width: 100%;\n\n  svg {\n    color: blue2;\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  cursor: pointer;\n  width: 100%;\n\n  svg {\n    color: blue2;\n  }\n"])));
+export var RowActionsCell = function (_a) {
+    var canEdit = _a.canEdit, onClick = _a.onClick, linkTo = _a.linkTo;
+    var handleOnClick = useCallback(function () {
+        if (isFunction(onClick)) {
+            onClick();
+        }
+    }, [onClick]);
+    var actions = useMemo(function () {
+        var actionOptions = [];
+        if (canEdit) {
+            actionOptions.push(_jsx(IconButtonInCell, { icon: "pen", onClick: handleOnClick, linkTo: linkTo }, "edit"));
+        }
+        else {
+            actionOptions.push(_jsx(IconButtonInCell, { icon: "chevronRight", onClick: handleOnClick, linkTo: linkTo }, "read"));
+        }
+        return actionOptions;
+    }, [canEdit, handleOnClick, linkTo]);
+    return _jsx(Center, { onClick: handleOnClick, children: actions });
+};
+var templateObject_1;

package/ui/Blocks/CommonGrid/components/gridCells/StringJoin.d.ts

@@ -0,0 +1,4 @@
+import { DataCellProps } from '../../types';
+type Props = DataCellProps<{}>;
+export declare const StringJoinCell: ({ rowData, column }: Props) => JSX.Element | null;
+export {};

package/ui/Blocks/CommonGrid/components/gridCells/StringJoin.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import get from 'lodash/fp/get';
+export var StringJoinCell = function (_a) {
+    var rowData = _a.rowData, column = _a.column;
+    var values = get(column.name, rowData);
+    return values && values.length ? _jsx("span", { className: "cell", children: values.join(', ') }) : null;
+};

package/ui/Blocks/CommonGrid/components/gridCells/SwitchInCell.d.ts

@@ -0,0 +1,2 @@
+import { Props } from '../../../../Elements/Toggle/types';
+export declare const SwitchInCell: (props: Props) => JSX.Element;

package/ui/Blocks/CommonGrid/components/gridCells/SwitchInCell.js

@@ -0,0 +1,16 @@
+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 } from "react/jsx-runtime";
+import Toggle from '../../../../Elements/Toggle/Toggle';
+export var SwitchInCell = function (props) {
+    return _jsx(Toggle, __assign({}, props, { variant: "grid" }));
+};

package/ui/Blocks/CommonGrid/components/gridCells/ToggleCell.d.ts

@@ -0,0 +1,7 @@
+import { DataCellProps } from '../../types';
+type SwitchData = {
+    id: string;
+};
+type Props = DataCellProps<SwitchData>;
+export declare const ToggleCell: ({ rowData, column, onRowAction }: Props) => JSX.Element;
+export {};

package/ui/Blocks/CommonGrid/components/gridCells/ToggleCell.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useCallback } from 'react';
+import { SwitchInCell } from './SwitchInCell';
+import get from 'lodash/fp/get';
+export var ToggleCell = function (_a) {
+    var _b;
+    var rowData = _a.rowData, column = _a.column, onRowAction = _a.onRowAction;
+    var inverse = !!((_b = column === null || column === void 0 ? void 0 : column.passProps) === null || _b === void 0 ? void 0 : _b.inverse);
+    var rawValue = get(column.name, rowData);
+    var value = inverse ? !rawValue : !!rawValue;
+    var actionName = "toggle_".concat(column.name);
+    var _c = React.useState(value), isChecked = _c[0], setIsChecked = _c[1];
+    React.useEffect(function () {
+        setIsChecked(value);
+    }, [rowData.id]);
+    var onSwitchChange = useCallback(function () {
+        if (!onRowAction)
+            return;
+        var ret = onRowAction(rowData.id, actionName, !isChecked);
+        if (ret) {
+            // promise returned = we wait for result
+            ret.then(function () { return setIsChecked(!isChecked); });
+        }
+        else {
+            // no promise = we fake feedback
+            setIsChecked(!isChecked);
+        }
+    }, [onRowAction, rowData.id, actionName, isChecked]);
+    return _jsx(SwitchInCell, { checked: isChecked, onChange: onSwitchChange });
+};

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

@@ -0,0 +1,14 @@
+export { DateCell } from './Date';
+export { DateTimeCell } from './DateTime';
+export { StringJoinCell } from './StringJoin';
+export { BoolIconCell } from './BoolIcon';
+export { RemoveCell } from './RemoveItem';
+export { LinkInCell } from './LinkInCell';
+export { ButtonInCell } from './ButtonInCell';
+export { IconButtonInCell } from './IconButtonInCell';
+export { SwitchInCell } from './SwitchInCell';
+export { ImageCell } from './ImageCell';
+export { EnumInCell } from './EnumInCell';
+export { HoverBubble } from './HoverBubble';
+export { RowActionsCell } from './RowActionsCell';
+export { ToggleCell } from './ToggleCell';

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

@@ -0,0 +1,14 @@
+export { DateCell } from './Date';
+export { DateTimeCell } from './DateTime';
+export { StringJoinCell } from './StringJoin';
+export { BoolIconCell } from './BoolIcon';
+export { RemoveCell } from './RemoveItem';
+export { LinkInCell } from './LinkInCell';
+export { ButtonInCell } from './ButtonInCell';
+export { IconButtonInCell } from './IconButtonInCell';
+export { SwitchInCell } from './SwitchInCell';
+export { ImageCell } from './ImageCell';
+export { EnumInCell } from './EnumInCell';
+export { HoverBubble } from './HoverBubble';
+export { RowActionsCell } from './RowActionsCell';
+export { ToggleCell } from './ToggleCell';

package/ui/Blocks/CommonGrid/hooks/useAddFilter.d.ts

@@ -0,0 +1,4 @@
+import { GridActionsType, ColumnDefinition } from '../types';
+type AddFilterRet = (value: any, column: ColumnDefinition) => void;
+export declare const useAddFilter: (onChange: Required<GridActionsType>['addFilter']) => AddFilterRet;
+export {};

package/ui/Blocks/CommonGrid/hooks/useAddFilter.js

@@ -0,0 +1,14 @@
+import { useCallback } from 'react';
+import { createFilterType, getFilterName } from '../utils';
+export var useAddFilter = function (onChange) {
+    return useCallback(function (value, column) {
+        if (onChange) {
+            var filterProps = {
+                type: createFilterType(column),
+                filterExtraProps: column.filterExtraProps || {},
+                computedValue: column.getFilterCriteria ? column.getFilterCriteria(value) : null,
+            };
+            onChange(getFilterName(column), value, filterProps);
+        }
+    }, [onChange]);
+};

package/ui/Blocks/CommonGrid/hooks/useEditReadAsColumn.d.ts

@@ -0,0 +1,15 @@
+import { CommonGridProps } from '../types';
+type ExcludedProps = 'components' | 'filters' | 'onBatchAction' | 'extraControlButtons';
+type Props = Omit<CommonGridProps, ExcludedProps>;
+type UseEditReadAsColumnHook = {
+    columnsDefinitions: CommonGridProps['columnsDefinitions'];
+    actionColumnDefinition: CommonGridProps['actionColumnDefinition'];
+    onRowAction: CommonGridProps['onRowAction'];
+};
+/**
+ * Because in new design we are displaying lot of the controlls differently, including read and edit buttons in grid,
+ * easiest way to make all the definition changes is to just overwrite the here once, instead of modifying every single grid (33 instances atm).
+ * This will also allow to easily swap back to grid provided logic, if it becomes usable for redesigned grid or if design changes again
+ * */
+declare const useEditReadAsColumn: (props: Props) => UseEditReadAsColumnHook;
+export default useEditReadAsColumn;

package/ui/Blocks/CommonGrid/hooks/useEditReadAsColumn.js

@@ -0,0 +1,70 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { useCallback, useMemo } from 'react';
+import getReadEditButtonCell from '../components/ReadEditButtonCell';
+/**
+ * Because in new design we are displaying lot of the controlls differently, including read and edit buttons in grid,
+ * easiest way to make all the definition changes is to just overwrite the here once, instead of modifying every single grid (33 instances atm).
+ * This will also allow to easily swap back to grid provided logic, if it becomes usable for redesigned grid or if design changes again
+ * */
+var useEditReadAsColumn = function (props) {
+    var onRowAction = props.onRowAction, actionColumnDefinition = props.actionColumnDefinition, columnsDefinitions = props.columnsDefinitions, onRowEditClick = props.onRowEditClick, onRowReadClick = props.onRowReadClick;
+    var modifiedActionColumnDefinition = useMemo(function () {
+        var _a;
+        if ((actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.forceCheckboxes) || ((_a = actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.actionOptions) === null || _a === void 0 ? void 0 : _a.length)) {
+            // note: this also removes actions, because we render action trigger outside the grid anyway
+            return { flexBasis: 40, forceCheckboxes: true, addRowNumbers: true, checkAllPosition: 'top' };
+        }
+        else if (actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.addRowNumbers) {
+            return { flexBasis: 40, addRowNumbers: true };
+        }
+        else {
+            return undefined;
+        }
+    }, [actionColumnDefinition]);
+    var modifiedOnRowAction = useCallback(function (id, field, value) {
+        if (field === 'row_edit' || field === 'row_read') {
+            if (field === 'row_edit' && onRowEditClick)
+                onRowEditClick(id, value);
+            if (field === 'row_read' && onRowReadClick)
+                onRowReadClick(id, value);
+        }
+        else if (onRowAction) {
+            return onRowAction(id, field, value);
+        }
+    }, [onRowAction, onRowEditClick, onRowReadClick]);
+    // TODO Entire logic of row edit / row read need to be completely refactored.
+    var CellComponent = useMemo(function () { return getReadEditButtonCell(actionColumnDefinition); }, [actionColumnDefinition]);
+    var modifiedColumnsDefinitions = useMemo(function () {
+        if ((actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.canRowEdit) !== undefined || (actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.canRowRead) !== undefined) {
+            return __spreadArray(__spreadArray([], columnsDefinitions, true), [
+                {
+                    name: 'sticky',
+                    flexBasis: 88,
+                    filtering: false,
+                    sorting: false,
+                    sticky: true,
+                    stickTo: 'right',
+                    alwaysOn: true,
+                    cellComponent: CellComponent,
+                },
+            ], false);
+        }
+        else {
+            return columnsDefinitions;
+        }
+    }, [CellComponent, actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.canRowEdit, actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.canRowRead, columnsDefinitions]);
+    return {
+        columnsDefinitions: modifiedColumnsDefinitions,
+        actionColumnDefinition: modifiedActionColumnDefinition,
+        onRowAction: modifiedOnRowAction,
+    };
+};
+export default useEditReadAsColumn;

package/ui/Blocks/CommonGrid/hooks/useFloatingButton.d.ts

@@ -0,0 +1,3 @@
+import { FloatingButtonProps, Item } from '../types';
+declare const useFloatingButton: (hasPermission: any, onClick?: () => void, options?: Item[], onSelect?: ((value: string) => void) | undefined) => FloatingButtonProps | undefined;
+export default useFloatingButton;

package/ui/Blocks/CommonGrid/hooks/useFloatingButton.js

@@ -0,0 +1,13 @@
+import { useMemo } from 'react';
+var useFloatingButton = function (hasPermission, onClick, options, onSelect) {
+    return useMemo(function () {
+        if (!hasPermission)
+            return;
+        return {
+            onClick: onClick,
+            options: options,
+            onSelect: onSelect,
+        };
+    }, [hasPermission, onClick, options, onSelect]);
+};
+export default useFloatingButton;

package/ui/Blocks/CommonGrid/hooks/useGetGridHeight.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare const useGetGridHeight: () => {
+    gridHeight: number | undefined;
+    gridRef: import("react").MutableRefObject<HTMLElement | null>;
+    paginationRef: import("react").MutableRefObject<HTMLElement | null>;
+};
+export default useGetGridHeight;

package/ui/Blocks/CommonGrid/hooks/useGetGridHeight.js

@@ -0,0 +1,33 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+var useGetGridHeight = function () {
+    var _a = useState(window.innerHeight), windowHeight = _a[0], setWindowHeight = _a[1];
+    var _b = useState(0), topDistance = _b[0], setTopDistance = _b[1];
+    var _c = useState(0), bottomDistance = _c[0], setBottomDistance = _c[1];
+    var gridRef = useRef(null);
+    var paginationRef = useRef(null);
+    useEffect(function () {
+        var handleResize = function () {
+            var _a, _b;
+            setTopDistance(((_a = gridRef.current) === null || _a === void 0 ? void 0 : _a.offsetTop) || 0);
+            setBottomDistance(((_b = paginationRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 0);
+            setWindowHeight(window.innerHeight);
+        };
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return function () {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+    var gridHeight = useMemo(function () {
+        var calculatedHeight = windowHeight - topDistance - bottomDistance;
+        if (calculatedHeight !== windowHeight && calculatedHeight > 360) {
+            return calculatedHeight - 25;
+        }
+        else {
+            // grids inside modals
+            return undefined;
+        }
+    }, [bottomDistance, topDistance, windowHeight]);
+    return { gridHeight: gridHeight, gridRef: gridRef, paginationRef: paginationRef };
+};
+export default useGetGridHeight;

package/ui/Blocks/CommonGrid/hooks/useGridActionTrigger.d.ts

@@ -0,0 +1,8 @@
+import { RowProps, UxState, ActionColumn, OnBatchActionFn } from '../types';
+/**
+ * hook for action selection and trigger
+ * returns [subset of actions that are enabled, onSelect(value) - param1: selected action value]
+ */
+type GridActionTriggerRet = [Required<ActionColumn>['actionOptions'], (value: any) => void];
+export declare const useGridActionTrigger: (rowsData: RowProps[], uxState: UxState, actionOptions?: ActionColumn['actionOptions'], onBatchAction?: OnBatchActionFn) => GridActionTriggerRet;
+export {};

package/ui/Blocks/CommonGrid/hooks/useGridActionTrigger.js

@@ -0,0 +1,25 @@
+import { useMemo, useCallback } from 'react';
+import find from 'lodash/find';
+export var useGridActionTrigger = function (rowsData, uxState, actionOptions, onBatchAction) {
+    if (actionOptions === void 0) { actionOptions = []; }
+    var actionRows = useMemo(function () {
+        return (rowsData || []).filter(function (row) { var _a; return (_a = uxState.checkedRows) === null || _a === void 0 ? void 0 : _a[row.id]; });
+    }, [uxState, rowsData]);
+    var enabledActions = useMemo(function () {
+        var actionsOptions = actionOptions || [];
+        return actionsOptions.filter(function (action) {
+            if (action.isEnabled) {
+                return action.isEnabled(actionRows);
+            }
+            else {
+                return uxState.checkedRows && find(uxState.checkedRows, Boolean);
+            }
+        });
+    }, [uxState, actionRows, actionOptions]);
+    var handleBatchAction = useCallback(function (value) {
+        var actionsOptions = actionOptions || [];
+        var action = actionsOptions.find(function (option) { return option.value == value; });
+        action && onBatchAction && onBatchAction(action, actionRows);
+    }, [actionOptions, onBatchAction, actionRows]);
+    return [enabledActions, handleBatchAction];
+};

package/ui/Blocks/CommonGrid/hooks/useManageColumn.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { CommonGridProps, GridActionsType, GridSelectorsType } from '../types';
+type Props = {
+    columns: CommonGridProps['columnsDefinitions'];
+    gridActions: GridActionsType;
+    gridSelectors: GridSelectorsType;
+    onClose?: () => void;
+};
+declare const useManageColumn: ({ columns, gridSelectors, gridActions, onClose }: Props) => {
+    columnsConfigValues: string[];
+    setColumnsConfigOptions: import("react").Dispatch<import("react").SetStateAction<{
+        [x: string]: {
+            isHidden?: boolean | undefined;
+        };
+    }>>;
+    onConfirmForm: () => void;
+    resetColumnConfig: () => void;
+};
+export default useManageColumn;

package/ui/Blocks/CommonGrid/hooks/useManageColumn.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 { useCallback, useMemo, useState } from 'react';
+var useManageColumn = function (_a) {
+    var columns = _a.columns, gridSelectors = _a.gridSelectors, gridActions = _a.gridActions, onClose = _a.onClose;
+    var resetGrid = gridActions.resetGrid, setColumnConfig = gridActions.setColumnConfig;
+    var columnConfig = gridSelectors.columnConfig;
+    var _b = useState(__assign({}, columnConfig)), columnsConfigOptions = _b[0], setColumnsConfigOptions = _b[1];
+    var columnsConfigValues = useMemo(function () {
+        return columns === null || columns === void 0 ? void 0 : columns.filter(function (column) {
+            var _a;
+            var isHidden = (_a = columnConfig === null || columnConfig === void 0 ? void 0 : columnConfig[column.name]) === null || _a === void 0 ? void 0 : _a.isHidden;
+            return (column === null || column === void 0 ? void 0 : column.alwaysOn) || typeof isHidden === 'boolean' ? !isHidden : !(column === null || column === void 0 ? void 0 : column.defaultHidden);
+        }).map(function (column) { return column.name; });
+    }, [columnConfig, columns]);
+    var onConfirmForm = useCallback(function () {
+        (setColumnConfig === null || setColumnConfig === void 0 ? void 0 : setColumnConfig(columnsConfigOptions)) && (onClose === null || onClose === void 0 ? void 0 : onClose());
+    }, [columnsConfigOptions, onClose, setColumnConfig]);
+    var resetColumnConfig = useCallback(function () {
+        (resetGrid === null || resetGrid === void 0 ? void 0 : resetGrid()) && (onClose === null || onClose === void 0 ? void 0 : onClose());
+        setColumnsConfigOptions(columnConfig || {});
+    }, [onClose, resetGrid]);
+    return { columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, onConfirmForm: onConfirmForm, resetColumnConfig: resetColumnConfig };
+};
+export default useManageColumn;

package/ui/Blocks/CommonGrid/hooks/useToggleAllCheckbox.d.ts

@@ -0,0 +1,8 @@
+import { RowProps, GridActionsType, UxState } from '../types';
+/**
+ * hook for checkbox that select and unselects all row
+ * returns [checked state, toggleAllHandler()] for checkbox
+ */
+type ToggleAllCheckboxRet = [boolean, () => void];
+export declare const useToggleAllCheckbox: (rowsData: RowProps[], uxState: UxState, handleUxChange?: GridActionsType['handleUxChange']) => ToggleAllCheckboxRet;
+export {};

package/ui/Blocks/CommonGrid/hooks/useToggleAllCheckbox.js

@@ -0,0 +1,15 @@
+import { useMemo, useCallback } from 'react';
+export var useToggleAllCheckbox = function (rowsData, uxState, handleUxChange) {
+    var allChecked = useMemo(function () { return (rowsData || []).length >= 1 && rowsData.every(function (row) { var _a; return (_a = uxState.checkedRows) === null || _a === void 0 ? void 0 : _a[row.id]; }); }, [rowsData, uxState.checkedRows]);
+    var toggleAllHandler = useCallback(function () {
+        var checkedRows = {};
+        // if check all is not check, we check all
+        if (!allChecked && rowsData) {
+            rowsData.forEach(function (row) {
+                checkedRows[row.id] = true;
+            });
+        }
+        handleUxChange && handleUxChange('checkedRows', checkedRows);
+    }, [handleUxChange, rowsData, allChecked]);
+    return [allChecked, toggleAllHandler];
+};