@mailstep/design-system 0.6.86-beta-jja.1 → 0.6.86-beta-jja.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.6.86-beta-jja.1",
+  "version": "0.6.86-beta-jja.3",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",
@@ -25,7 +25,6 @@
     "@babel/preset-env": "^7.22.4",
     "@babel/preset-react": "^7.22.3",
     "@babel/preset-typescript": "^7.23.3",
-    "@chromatic-com/storybook": "^1",
     "@fortawesome/fontawesome-svg-core": "^6.3.0",
     "@fortawesome/free-brands-svg-icons": "^6.1.1",
     "@fortawesome/pro-duotone-svg-icons": "^6.0.0",

package/ui/Blocks/CommonGrid/CommonGridContainer.d.ts

@@ -1,3 +1,3 @@
 import { GridProps } from './types';
-declare const StyledCommonGrid: (props: GridProps) => JSX.Element;
-export default StyledCommonGrid;
+declare const CommonGridContainer: (props: GridProps) => JSX.Element;
+export default CommonGridContainer;

package/ui/Blocks/CommonGrid/CommonGridContainer.js

@@ -39,7 +39,7 @@ import Modal from '../Modal';
 import ManageColumnForm from './components/ManageColumnForm';
 import { Trans } from '@lingui/react';
 import { Settings2 } from '../../Elements/Icon/icons/Settings2';
-var StyledCommonGrid = function (props) {
+var CommonGridContainer = function (props) {
     var _a = props.optimizeFilters, optimizeFilters = _a === void 0 ? false : _a, extraControlButtons = props.extraControlButtons, onBatchAction = props.onBatchAction, processCheckedValues = props.processCheckedValues, processCheckedValuesTitle = props.processCheckedValuesTitle, hideControlButtons = props.hideControlButtons, quickFilter = props.quickFilter, floatingButtonProps = props.floatingButtonProps, queryRowsParam = props.queryRowsParam, customPaginationHandler = props.customPaginationHandler, passDownProps = __rest(props, ["optimizeFilters", "extraControlButtons", "onBatchAction", "processCheckedValues", "processCheckedValuesTitle", "hideControlButtons", "quickFilter", "floatingButtonProps", "queryRowsParam", "customPaginationHandler"]);
     var gridActions = passDownProps.gridActions, gridSelectors = passDownProps.gridSelectors, rowsData = passDownProps.rowsData, actionColumnDefinition = passDownProps.actionColumnDefinition;
     var _b = useState(false), displayManageColumnButton = _b[0], setDisplayManageColumnButton = _b[1];
@@ -64,4 +64,4 @@ var StyledCommonGrid = function (props) {
     }), columnsConfigValues = _e.columnsConfigValues, setColumnsConfigOptions = _e.setColumnsConfigOptions, onConfirmForm = _e.onConfirmForm, resetColumnConfig = _e.resetColumnConfig, handleDragEnd = _e.handleDragEnd, onCloseForm = _e.onCloseForm, displayColumnsDefinitions = _e.displayColumnsDefinitions, manageColumnsFormDefinitions = _e.manageColumnsFormDefinitions;
     return (_jsxs(ContentContainer, { children: [_jsxs(CommonGridWrap, { children: [_jsx(HidePrint, { children: _jsxs(StyledButtonStrip, { className: "buttonsStrip", children: [!hideControlButtons && (_jsx(ControlButtons, { extraControlButtons: extraControlButtons, gridActions: gridActions, gridSelectors: gridSelectors, quickFilter: quickFilter, displayColumnsDefinitions: displayColumnsDefinitions, filters: filters, setDisplayManageColumnButton: setDisplayManageColumnButton })), displayManageColumnButton && (_jsx(StyledColumnButton, { type: "button", variant: "ghost", appearance: "primary", iconLeft: _jsx(Settings2, {}), onClick: openManageColumnForm, children: _jsx(H6, { variant: "semiBold", mt: 0, mb: 0, children: _jsx(Trans, { id: "manageColumn.title", message: "Manage column" }) }) }))] }) }), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { filters: filters, gridRef: gridRef, height: gridHeight, floatingButtonProps: floatingButtonProps, handleDragEnd: handleDragEnd(false), displayColumnsDefinitions: displayColumnsDefinitions, hasColouredRows: true }))] }), _jsx(HidePrint, { children: _jsxs(BottomWrapper, { ref: paginationRef, isFixed: !!gridHeight, children: [processCheckedValues && (_jsx(ActionHead, { rowsData: rowsData, onBatchAction: onBatchAction, gridActions: gridActions, gridSelectors: gridSelectors, actionColumn: actionColumnDefinition, processCheckedValues: processCheckedValues, processCheckedValuesTitle: processCheckedValuesTitle })), _jsxs(x.div, { display: "flex", justifyContent: "center", alignItems: "center", className: "paginatorWrapper", w: "100%", h: window.innerWidth > 1204 ? '60px' : '32px', children: [_jsx(Pagination, { page: gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.page, itemCount: passDownProps === null || passDownProps === void 0 ? void 0 : passDownProps.totalRowsCount, itemPerPage: (gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.rowsPerPage) || 10, onPageChange: gridActions === null || gridActions === void 0 ? void 0 : gridActions.setPage, customPaginationHandler: customPaginationHandler, radius: window.innerWidth < 768 ? 3 : 5, rate: window.innerWidth < 768 ? 1 : 4 }), _jsx(TablePagination, { gridActions: gridActions, gridSelectors: gridSelectors, customPaginationHandler: customPaginationHandler })] })] }) }), manageColumnFormVisible && (_jsx(Modal, { title: _jsx(Trans, { id: "manageColumn.title", message: "Manage columns" }), onClose: onCloseForm, onCancel: onCloseForm, onExtraAction: resetColumnConfig, onConfirm: onConfirmForm, width: "auto", minWidth: "350px", hasFooter: true, extraActionLabel: _jsx(Trans, { id: "dataGrid.buttonClearConfig", message: "Reset config" }), cancelLabel: _jsx(Trans, { id: "form.buttonCancel", message: "Cancel" }), confirmLabel: _jsx(Trans, { id: "form.buttonConfirm", message: "Confirm" }), children: _jsx(ManageColumnForm, { columns: manageColumnsFormDefinitions, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, handleDragEnd: handleDragEnd(true) }) }))] }));
 };
-export default StyledCommonGrid;
+export default CommonGridContainer;

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

@@ -1,6 +1,5 @@
 import { Dispatch } from 'react';
 import { CommonGridProps, GridActionsType, GridSelectorsType, ColumnDefinition, FiltersConfig } from '../../types';
-export declare const Row: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
 type Props = {
     extraControlButtons: CommonGridProps['extraControlButtons'];
     gridActions: GridActionsType;

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

@@ -1,7 +1,3 @@
-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 { useEffect } from 'react';
 import Button from '../../../../Elements/Button/Button';
@@ -11,8 +7,8 @@ import ExtraControlButtons from '../ExtraControlButtons';
 import QuickFilter from '../QuickFilter';
 import { i18n } from '@lingui/core';
 import { Trans } from '@lingui/react';
-import styled, { x } from '@xstyled/styled-components';
-export var Row = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  position: sticky;\n  justify-content: space-between;\n  flex: 1;\n  left: 20px;\n"], ["\n  display: flex;\n  position: sticky;\n  justify-content: space-between;\n  flex: 1;\n  left: 20px;\n"])));
+import { x } from '@xstyled/styled-components';
+import { ControlButtonsContainer, Left } from './styles';
 var ControlButtons = function (_a) {
     var extraControlButtons = _a.extraControlButtons, gridActions = _a.gridActions, gridSelectors = _a.gridSelectors, _b = _a.quickFilter, quickFilter = _b === void 0 ? '' : _b, displayColumnsDefinitions = _a.displayColumnsDefinitions, filters = _a.filters, setDisplayManageColumnButton = _a.setDisplayManageColumnButton;
     var _c = useQuickFilter({
@@ -26,11 +22,10 @@ var ControlButtons = function (_a) {
         setDisplayManageColumnButton(!isMobileInputView);
     }, [isMobileInputView, setDisplayManageColumnButton]);
     var filtersOn = !!filter && Object.values(filter).some(function (item) { var _a; return ((_a = item.value) === null || _a === void 0 ? void 0 : _a.value) !== '' && item.value !== ''; });
-    return (_jsxs(Row, { children: [_jsxs("div", { children: [quickFilter && (_jsx(QuickFilter, { searchedValue: searchedValue, placeholderText: i18n._({
+    return (_jsxs(ControlButtonsContainer, { children: [_jsxs(Left, { children: [quickFilter && (_jsx(QuickFilter, { searchedValue: searchedValue, placeholderText: i18n._({
                             id: 'controlButtons.searchPlaceholder',
                             message: "Search ".concat(translatedValue, " ..."),
                             values: { translatedValue: translatedValue }
                         }), onChange: onChangeInputValue, onClear: onClear, onClick: onDisplayInput, displayInput: displayInput, isMobileInputView: isMobileInputView, alwaysShowClear: isMobile })), _jsx(ExtraControlButtons, { extraControlButtons: extraControlButtons, targetPosition: ExtraControlButtonPosition.TopLeft }), _jsx(x.div, { children: filtersOn && (_jsx(Button, { type: "button", onClick: onResetFilters, variant: "default", appearance: "secondary", "data-cy": "resetFiltersBtn", children: _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset filters" }) })) })] }), _jsx(ExtraControlButtons, { extraControlButtons: extraControlButtons, targetPosition: ExtraControlButtonPosition.TopRight })] }));
 };
 export default ControlButtons;
-var templateObject_1;

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

@@ -0,0 +1,2 @@
+export declare const ControlButtonsContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const Left: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;

package/ui/Blocks/CommonGrid/components/ControlButtons/styles.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';
+export var ControlButtonsContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  position: sticky;\n  justify-content: space-between;\n  flex: 1;\n  left: 20px;\n"], ["\n  display: flex;\n  position: sticky;\n  justify-content: space-between;\n  flex: 1;\n  left: 20px;\n"])));
+export var Left = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var templateObject_1, templateObject_2;

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

@@ -9,6 +9,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import { useCallback, useMemo } from 'react';
 import getReadEditButtonCell from '../components/ReadEditButtonCell';
+import { EditReadPosition } from '../types';
 /**
  * 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).
@@ -44,18 +45,23 @@ var useEditReadAsColumn = function (props) {
     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);
+            var stickTo = actionColumnDefinition.stickTo || 'right';
+            var editReadColumnDefinition = {
+                name: 'sticky',
+                flexBasis: 88,
+                filtering: false,
+                sorting: false,
+                sticky: true,
+                stickTo: stickTo,
+                alwaysOn: true,
+                cellComponent: CellComponent
+            };
+            if (stickTo === EditReadPosition.Left) {
+                return __spreadArray([editReadColumnDefinition], columnsDefinitions, true);
+            }
+            else {
+                return __spreadArray(__spreadArray([], columnsDefinitions, true), [editReadColumnDefinition], false);
+            }
         }
         else {
             return columnsDefinitions;
@@ -64,7 +70,7 @@ var useEditReadAsColumn = function (props) {
     return {
         columnsDefinitions: modifiedColumnsDefinitions,
         actionColumnDefinition: modifiedActionColumnDefinition,
-        onRowAction: modifiedOnRowAction,
+        onRowAction: modifiedOnRowAction
     };
 };
 export default useEditReadAsColumn;

package/ui/Blocks/CommonGrid/storybook/stories/complexWithPaginationAndRedux.stories.js

@@ -10,6 +10,7 @@ import { LinguiContainer } from '../../../../utils/LinguiContainer';
 var ActionColumnButtons = {
     flexBasis: 160,
     canRowRead: true,
+    stickTo: 'left',
     canRowEdit: function (row) { return row.enumColumn !== 'option C'; }
 };
 var FilterSetter = function (_a) {
@@ -25,7 +26,7 @@ export default {
     title: 'Blocks/CommonGrid',
     decorators: [withRedux]
 };
-export var ComplexWithPaginationAndRedux = function () { return (_jsxs(LinguiContainer, { children: [_jsx(ConnectedFilterSetter, { gridActions: gridDummyActions }), _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, actionColumnDefinition: ActionColumnButtons, rowsData: createRandomData(10), onRowAction: onRowAction, onRowReadClick: onRowReadClick, onRowEditClick: onRowEditClick, totalRowsCount: 200, onBatchAction: onBatchAction, confirmOnReset: function () { return window.confirm('Are you sure you want to reset grid?'); } })] })); };
+export var ComplexWithPaginationAndRedux = function () { return (_jsxs(LinguiContainer, { children: [_jsx(ConnectedFilterSetter, { gridActions: gridDummyActions }), _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, actionColumnDefinition: ActionColumnButtons, rowsData: createRandomData(10), onRowAction: onRowAction, onRowReadClick: onRowReadClick, onRowEditClick: onRowEditClick, totalRowsCount: 200, onBatchAction: onBatchAction, quickFilter: "productSku", confirmOnReset: function () { return window.confirm('Are you sure you want to reset grid?'); } })] })); };
 ComplexWithPaginationAndRedux.story = {
     name: 'Complex, with pagination and redux'
 };

package/ui/Blocks/CommonGrid/types.d.ts

@@ -145,6 +145,7 @@ export type ActionColumn = ColumnBaseProps & {
     createLink?: (params?: object) => string;
     forceCheckboxes?: boolean;
     checkAllPosition?: 'top' | 'bottom';
+    stickTo?: StickTo;
     addRowNumbers?: boolean;
     addRowNumbersLabel?: string;
 };
@@ -265,7 +266,12 @@ export type CommonGridProps<TData extends RowProps = RowProps> = {
     extraControlButtons?: ExtraControlButton[];
     perPageOptions?: number[];
     floatingButtonProps?: FloatingButtonProps;
+    editReadPosition?: EditReadPosition;
 };
+export declare enum EditReadPosition {
+    Left = "left",
+    Right = "right"
+}
 export declare enum ExtraControlButtonPosition {
     TopLeft = "top-left",
     TopRight = "top-right",

package/ui/Blocks/CommonGrid/types.js

@@ -1,4 +1,9 @@
 export var rowClassSymbol = Symbol();
+export var EditReadPosition;
+(function (EditReadPosition) {
+    EditReadPosition["Left"] = "left";
+    EditReadPosition["Right"] = "right";
+})(EditReadPosition || (EditReadPosition = {}));
 export var ExtraControlButtonPosition;
 (function (ExtraControlButtonPosition) {
     ExtraControlButtonPosition["TopLeft"] = "top-left";