@mailstep/design-system 0.7.59 → 0.7.61-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.7.59",
+  "version": "0.7.61-beta.0",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

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

@@ -15,9 +15,13 @@ var DataRow = function (_a) {
         }
     }, [onRowAction, allowRowSelectOnAction, onUxChange]);
     var handleRowClick = React.useCallback(function (e) {
+        var _a;
         // test whether I should trigger event or not (because of possible button/link/input/etc in cell)
         var classes = Object.values(e.target.classList);
-        if (!classes.includes('dataRow') && !classes.includes('cell'))
+        // find children of parent that has propagation attribute
+        var parent = e.target.closest('.cell');
+        var canPropagation = ((_a = parent === null || parent === void 0 ? void 0 : parent.querySelectorAll('[data-propagation="true"]')) === null || _a === void 0 ? void 0 : _a.length) > 0;
+        if (!classes.includes('dataRow') && !classes.includes('cell') && !canPropagation)
             return;
         if (onUxChange && allowRowSelect)
             onUxChange('selectedRow', rowData.id);

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

@@ -1,4 +1,4 @@
-import { FlagAppearanceType } from '../../../../Elements/HighlightBox/HighlightBox';
+import type { FlagAppearanceType } from '../../../../Elements/HighlightBox/HighlightBox';
 type Props = {
     value: string;
     appearanceMap: Record<string, FlagAppearanceType>;

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

@@ -15,8 +15,8 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import styled from '@xstyled/styled-components';
 import HighlightBox from '../../../../Elements/HighlightBox';
+import styled from '@xstyled/styled-components';
 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;
@@ -28,6 +28,6 @@ export var EnumInCell = function (_a) {
     }, [appearanceMap, value]);
     if (!finalLabel)
         return null;
-    return (_jsx(Center, { children: _jsx(HighlightBox, __assign({}, coloringProp, { size: size, prefix: "grid", children: finalLabel })) }));
+    return (_jsx(Center, { "data-propagation": "true", children: _jsx(HighlightBox, __assign({}, coloringProp, { size: size, prefix: "grid", children: finalLabel })) }));
 };
 var templateObject_1;

package/ui/Blocks/CommonGrid/storybook/components/ComplexCell.d.ts

@@ -0,0 +1,4 @@
+import type { DataCellProps } from '../../types';
+export declare const ComplexCell: (props: DataCellProps<{
+    id: string;
+}>) => JSX.Element;

package/ui/Blocks/CommonGrid/storybook/components/ComplexCell.js

@@ -0,0 +1,13 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+export var ComplexCell = function (props) {
+    var handleActionClick = useCallback(function () {
+        var _a;
+        if (props.onRowAction) {
+            (_a = props.onRowAction(props.rowData.id, 'get_invoice', null)) === null || _a === void 0 ? void 0 : _a.catch(function (error) {
+                console.error(error);
+            });
+        }
+    }, [props]);
+    return _jsxs("button", { onClick: handleActionClick, children: [" download ", props.rowData.id, " "] });
+};

package/ui/Blocks/CommonGrid/storybook/components/EnumCellExample.d.ts

@@ -0,0 +1,6 @@
+import type { DataCellProps } from '../../types';
+type CellProps = DataCellProps<{
+    enumColumn: string;
+}>;
+export declare const EnumCellExample: ({ rowData }: CellProps) => JSX.Element;
+export {};

package/ui/Blocks/CommonGrid/storybook/components/EnumCellExample.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { EnumInCell } from '../../components/gridCells/EnumInCell';
+var packagingTypeAppearance = {
+    'option A': 'neutralSubtle',
+    'option B': 'orangeSubtle',
+    'option C': 'greenSubtle'
+};
+var PackagingTypeTrans = {
+    'option A': function () { return 'option A'; },
+    'option B': function () { return 'option B'; },
+    'option C': function () { return 'option C'; }
+};
+export var EnumCellExample = function (_a) {
+    var rowData = _a.rowData;
+    return _jsx(EnumInCell, { value: rowData.enumColumn, enumObj: PackagingTypeTrans, appearanceMap: packagingTypeAppearance });
+};

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

@@ -4,7 +4,7 @@ import { LinguiContainer } from '../../../../utils/LinguiContainer';
 import withReduxActions from '../../HoC/withReduxActions';
 import { useAddFilter } from '../../hooks/useAddFilter';
 import { ExtraControlButtonPosition } from '../../types';
-import { onRowEditClick, onRowReadClick, onRowAction, onBatchAction } from '../utils/actions';
+import { onRowEditClick, onRowReadClick, onRowAction, onRowClick, onBatchAction } from '../utils/actions';
 import { columnDefinitions, enumColumn } from '../utils/columnDefinition';
 import { ReduxGrid, createRandomData, enumValues, gridDummyActions } from '../utils/utils';
 import withRedux from '../utils/withRedux';
@@ -47,7 +47,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, getRowsPerPage: getRowsPerPage, quickFilter: "textColumn", extraControlButtons: extraControlButtons, comparators: comparators, gridName: "gridName" })] })); };
+export var ComplexWithPaginationAndRedux = function () { return (_jsxs(LinguiContainer, { children: [_jsx(ConnectedFilterSetter, { gridActions: gridDummyActions }), _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, actionColumnDefinition: ActionColumnButtons, rowsData: createRandomData(10), onRowAction: onRowAction, onRowClick: onRowClick, onRowReadClick: onRowReadClick, onRowEditClick: onRowEditClick, totalRowsCount: 200, onBatchAction: onBatchAction, getRowsPerPage: getRowsPerPage, quickFilter: "textColumn", extraControlButtons: extraControlButtons, comparators: comparators, gridName: "gridName" })] })); };
 ComplexWithPaginationAndRedux.story = {
     name: 'Complex, with pagination and redux'
 };

package/ui/Blocks/CommonGrid/storybook/utils/actions.d.ts

@@ -1,4 +1,5 @@
 export declare const onRowEditClick: (id: string, props: object) => void;
 export declare const onRowReadClick: (id: string, props: object) => void;
 export declare const onRowAction: (id: string, field: string, value: string | boolean) => void;
+export declare const onRowClick: (id: string, field: string, value: string | boolean) => void;
 export declare const onBatchAction: (action: string, affectedRows: object[]) => void;

package/ui/Blocks/CommonGrid/storybook/utils/actions.js

@@ -1,6 +1,7 @@
 export var onRowEditClick = function (id, props) { return console.log('onRowEditClick', id, props); };
 export var onRowReadClick = function (id, props) { return console.log('onRowReadClick', id, props); };
 export var onRowAction = function (id, field, value) { return console.log('onRowAction', id, field, value); };
+export var onRowClick = function (id, field, value) { return console.log('onRowClick', id, field, value); };
 export var onBatchAction = function (action, affectedRows) {
     console.log('onBatchAction called', action, affectedRows);
 };

package/ui/Blocks/CommonGrid/storybook/utils/columnDefinition.d.ts

@@ -1,6 +1,5 @@
-import { ColumnDefinition } from '../../types';
+import type { ColumnDefinition } from '../../types';
 export declare const oversizedArrayColumns = 25;
-export declare const enumValues: string[];
 export declare const oversizedColumnDefinition: {
     name: string;
     title: string;

package/ui/Blocks/CommonGrid/storybook/utils/columnDefinition.js

@@ -1,15 +1,7 @@
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
+import { ComplexCell } from '../components/ComplexCell';
+import { EnumCellExample } from '../components/EnumCellExample';
+import { enumValues } from './utils';
 export var oversizedArrayColumns = 25;
-export var enumValues = ['option A', 'option B', 'option C'];
-var ComplexCell = function (props) {
-    var handleActionClick = React.useCallback(function () {
-        if (props.onRowAction)
-            props.onRowAction(props.rowData.id, 'get_invoice', null);
-        //     // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [props.rowData, props.onRowAction]);
-    return _jsxs("button", { onClick: handleActionClick, children: [" download ", props.rowData.id, " "] });
-};
 export var oversizedColumnDefinition = new Array(oversizedArrayColumns).fill(null).map(function (unused, index) { return ({
     name: "column_".concat(index),
     title: "column_".concat(index),
@@ -22,7 +14,8 @@ export var enumColumn = {
     filterOptions: enumValues.map(function (v) { return ({ value: v, label: v }); }),
     filterExtraProps: { isMulti: true, checkAllButton: true },
     filtering: true,
-    sorting: false
+    sorting: false,
+    cellComponent: EnumCellExample
 };
 export var columnDefinitions = [
     {
@@ -92,7 +85,7 @@ export var columnDefinitions = [
     },
     {
         name: 'complexColumn',
-        title: 'Complex Column',
+        title: 'Custom Cell Component Column1',
         flexBasis: 350,
         cellComponent: ComplexCell
     },

package/ui/Elements/CheckedCircle/index.d.ts

@@ -1,2 +1,7 @@
 import { type FC } from 'react';
-export declare const CheckedCircle: FC;
+type CheckedCircleProps = {
+    checked?: boolean;
+    color?: string;
+};
+export declare const CheckedCircle: FC<CheckedCircleProps>;
+export {};

package/ui/Elements/CheckedCircle/index.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import Icon from '../Icon';
 import { CheckedCircleContainer } from './styles';
-export var CheckedCircle = function () {
-    return (_jsx(CheckedCircleContainer, { children: _jsx(Icon, { icon: "check", size: "12px" }) }));
+export var CheckedCircle = function (_a) {
+    var _b = _a.checked, checked = _b === void 0 ? true : _b, _c = _a.color, color = _c === void 0 ? 'red1' : _c;
+    return _jsx(CheckedCircleContainer, { color: color, children: checked && _jsx(Icon, { icon: "check", size: "12px" }) });
 };

package/ui/Elements/CheckedCircle/storries/CheckedCircle.stories.d.ts

@@ -2,10 +2,16 @@
 import type { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: import("react").FC;
+    component: import("react").FC<{
+        checked?: boolean | undefined;
+        color?: string | undefined;
+    }>;
     tags: string[];
     argTypes: {};
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const Checked: Story;
+export declare const CheckedGreen: Story;
+export declare const Unchecked: Story;

package/ui/Elements/CheckedCircle/storries/CheckedCircle.stories.js

@@ -9,3 +9,19 @@ export default meta;
 export var Default = {
     args: {}
 };
+export var Checked = {
+    args: {
+        checked: true
+    }
+};
+export var CheckedGreen = {
+    args: {
+        checked: true,
+        color: 'green60'
+    }
+};
+export var Unchecked = {
+    args: {
+        checked: false
+    }
+};

package/ui/Elements/CheckedCircle/styles.d.ts

@@ -1 +1,3 @@
-export declare const CheckedCircleContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const CheckedCircleContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    color: string;
+}, never>;

package/ui/Elements/CheckedCircle/styles.js

@@ -3,5 +3,11 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import styled, { th } from '@xstyled/styled-components';
-export var CheckedCircleContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 50%;\n  border: 8px solid ", ";\n  color: ", ";\n  height: 36px;\n  width: 36px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: white;\n"], ["\n  border-radius: 50%;\n  border: 8px solid ", ";\n  color: ", ";\n  height: 36px;\n  width: 36px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: white;\n"])), th.color('red1'), th.color('red1'));
+export var CheckedCircleContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 50%;\n  border: 8px solid ", ";\n  color: ", ";\n  height: 36px;\n  width: 36px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: white;\n"], ["\n  border-radius: 50%;\n  border: 8px solid ", ";\n  color: ", ";\n  height: 36px;\n  width: 36px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: white;\n"])), function (_a) {
+    var color = _a.color;
+    return th.color(color);
+}, function (_a) {
+    var color = _a.color;
+    return th.color(color);
+});
 var templateObject_1;