@mailstep/design-system 0.7.30-beta.1 → 0.7.30-beta.10

package/package.json

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

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

@@ -2,11 +2,12 @@ import type { ColumnDefinition, GridActionsType, FiltersConfig, CustomComparator
 type Props = {
     onChange: Required<GridActionsType>['addFilter'];
     value?: any;
+    others?: any;
     column: ColumnDefinition;
     displayColumnWidth: number;
     filters?: FiltersConfig;
     group?: Group;
     comparators?: CustomComparators;
 };
-declare const ColumnFilterCell: ({ onChange, value, displayColumnWidth, filters, column: columnDefinition, group, comparators }: Props) => JSX.Element;
+declare const ColumnFilterCell: ({ onChange, value, others, displayColumnWidth, filters, column: columnDefinition, group, comparators }: Props) => JSX.Element;
 export default ColumnFilterCell;

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

@@ -17,7 +17,7 @@ import { x } from '@xstyled/styled-components';
 import OverlayComponent from './FilterDropdown';
 import { Cell } from './Table';
 var ColumnFilterCell = function (_a) {
-    var onChange = _a.onChange, value = _a.value, displayColumnWidth = _a.displayColumnWidth, filters = _a.filters, columnDefinition = _a.column, group = _a.group, comparators = _a.comparators;
+    var onChange = _a.onChange, value = _a.value, others = _a.others, displayColumnWidth = _a.displayColumnWidth, filters = _a.filters, columnDefinition = _a.column, group = _a.group, comparators = _a.comparators;
     var cellSizeProps = getCellSizeProps(columnDefinition, displayColumnWidth);
     var handleAddFilter = useAddFilter(onChange);
     var handleChange = React.useCallback(function (event, others) {
@@ -35,6 +35,6 @@ var ColumnFilterCell = function (_a) {
         console.error("ERROR, using unknown filter type ".concat(filterType));
         return (_jsx(x.div, { children: _jsx("span", { children: "".concat(filterType, " filter") }) }));
     }
-    return (_jsx(Cell, __assign({ className: cellClassName }, cellSizeProps, { children: _jsx(x.div, { children: _jsx(RenderComponent, __assign({ "data-test": columnDefinition.name, name: columnDefinition.name, onChange: handleChange, value: value, OverlayComponent: OverlayComponent, comparators: defaultComparators }, filterConfig === null || filterConfig === void 0 ? void 0 : filterConfig.defaultExtraProps, columnDefinition.filterExtraProps, (filterType == 'options' && { options: columnDefinition.filterOptions }))) }) })));
+    return (_jsx(Cell, __assign({ className: cellClassName }, cellSizeProps, { children: _jsx(x.div, { children: _jsx(RenderComponent, __assign({ "data-test": columnDefinition.name, name: columnDefinition.name, onChange: handleChange, value: value, others: others, OverlayComponent: OverlayComponent, comparators: defaultComparators }, filterConfig === null || filterConfig === void 0 ? void 0 : filterConfig.defaultExtraProps, columnDefinition.filterExtraProps, (filterType == 'options' && { options: columnDefinition.filterOptions }))) }) })));
 };
 export default ColumnFilterCell;

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

@@ -29,6 +29,6 @@ var FilterRow = function (_a) {
     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(Checkbox, { 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, comparators: comparators, group: groups === null || groups === void 0 ? void 0 : groups[index] }, index)); })] }));
+    return (_jsxs(Row, { className: "filterRow", children: [displayCheckbox && (_jsx(Cell, { className: "cell", style: actionColumnStyle, children: _jsx(Checkbox, { 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), others: get([getFilterName(column), 'others'], filterValues), displayColumnWidth: displayColumnsWidth[column.name], filters: filters, comparators: comparators, group: groups === null || groups === void 0 ? void 0 : groups[index] }, index)); })] }));
 };
 export default FilterRow;

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

@@ -41,10 +41,9 @@ var OverlayComponentDefault = function (_a) {
 };
 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 onChange = props.onChange, error = props.error, label = props.label, value = props.value, others = props.others, filterTime = props.filterTime, initialView = props.initialView, _d = props.OverlayComponent, OverlayComponent = _d === void 0 ? OverlayComponentDefault : _d, rest = __rest(props, ["onChange", "error", "label", "value", "others", "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 _g = useState(undefined), others = _g[0], setOthersValues = _g[1];
     var timeFormat = filterTime ? 'HH:mm' : false;
     var placeholder = i18n._({ id: 'dataGrid.filterCell', message: 'Type to filter' });
     var cleanValue = React.useMemo(function () { return getCleanValues(value); }, [value]);
@@ -63,7 +62,7 @@ var DatePickerRange = function (props) {
         }
         return [cleanValue[0] || firstDate, cleanValue[1] || secondDate];
     }, [cleanValue, initialView]);
-    var _h = useState(false), isOpen = _h[0], setOpen = _h[1];
+    var _g = useState(false), isOpen = _g[0], setOpen = _g[1];
     var setDateFrom = useCallback(function (v) {
         setStartRangeValue(v);
         onChange([v, cleanValue[1]], others);
@@ -72,6 +71,9 @@ var DatePickerRange = function (props) {
         setEndRangeValue(v);
         onChange([cleanValue[0], v], others);
     }, [onChange, others, cleanValue]);
+    var handleOthersChange = useCallback(function (others) {
+        onChange(cleanValue, others);
+    }, [onChange, cleanValue]);
     var openPicker = useCallback(function () {
         setOpen(true);
     }, [setOpen]);
@@ -79,7 +81,7 @@ var DatePickerRange = function (props) {
         onChange([]);
         setStartRangeValue(undefined);
         setEndRangeValue(undefined);
-        setOthersValues(undefined);
+        // setOthersValues(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]);
@@ -89,8 +91,7 @@ var DatePickerRange = function (props) {
     // 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 });
-    console.log('others', others);
-    return (_jsxs("div", { ref: ref, children: [_jsx(Input, { name: props.name, placeholder: placeholder, type: "text", icon: "calendar", value: pickerRangeToString(cleanValue, others), label: props.label, onFocus: openPicker, iconOnClick: openPicker, 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, others: others, onChangeOthers: setOthersValues, icon: false, label: isOpen && i18n._({ 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 && i18n._({ id: 'dataGrid.filterCell.to', message: 'To' }), isValidDate: isValidDateTo, input: false, spaceAround: true, open: true, disabled: secondDatePickerValue === null || !!(others === null || others === void 0 ? void 0 : others.dateTypeRepeater), isSecondDatePicker: true }))] })) }) })] }));
+    return (_jsxs("div", { ref: ref, children: [_jsx(Input, { name: props.name, placeholder: placeholder, type: "text", icon: "calendar", value: pickerRangeToString(cleanValue, others), label: props.label, onFocus: openPicker, iconOnClick: openPicker, 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, others: others, onChangeOthers: handleOthersChange, icon: false, label: isOpen && i18n._({ 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 && i18n._({ id: 'dataGrid.filterCell.to', message: 'To' }), isValidDate: isValidDateTo, input: false, spaceAround: true, open: true, disabled: secondDatePickerValue === null || !!(others === null || others === void 0 ? void 0 : others.dateTypeRepeater), isSecondDatePicker: true }))] })) }) })] }));
 };
 export default DatePickerRange;
 var templateObject_1;

package/ui/Blocks/CommonGrid/store/index.d.ts

@@ -46,7 +46,7 @@ export declare const createActions: (gridName: string) => {
     setColumnsOrder: (columnsOrder: string[]) => Action;
     setRowsPerPage: (rowsPerPage: number) => Action;
     resetFilters: () => Action;
-    addFilter: (column: string, value: any, filterProps: FilterProps) => Action;
+    addFilter: (column: string, value: any, filterProps: FilterProps, others?: any) => Action;
     setFilters: (filters: Filtering) => Action;
     addSorting: (column: string, direction: SortingValueType) => Action;
     clearSettings: () => Action;

package/ui/Blocks/CommonGrid/store/index.js

@@ -195,12 +195,13 @@ export var createActions = function (gridName) { return ({
     }); },
     setRowsPerPage: function (rowsPerPage) { return ({ gridName: gridName, type: actionTypes.setRowsPerPage, rowsPerPage: rowsPerPage }); },
     resetFilters: function () { return ({ gridName: gridName, type: actionTypes.resetFilters }); },
-    addFilter: function (column, value, filterProps) { return ({
+    addFilter: function (column, value, filterProps, others) { return ({
         gridName: gridName,
         type: actionTypes.addFilter,
         column: column,
         value: value,
-        filterProps: filterProps
+        filterProps: filterProps,
+        others: others
     }); },
     setFilters: function (filters) { return ({ gridName: gridName, type: actionTypes.setFilters, filters: filters }); },
     addSorting: function (column, direction) { return ({

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

@@ -45,8 +45,8 @@ export var gridDummyActions = {
     // @see types for full list of actions
     setPage: function (number) { return console.log('setPage', number); },
     setRowsPerPage: function (number) { return console.log('setRowsPerPage', number); },
-    addFilter: function (column, value, filterProps) {
-        return console.log('setRowsPerPage', column, value, filterProps);
+    addFilter: function (column, value, filterProps, others) {
+        return console.log('addFilter', column, value, filterProps, others);
     }
 };
 export var createOversizedRandomData = function (count) {

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

@@ -72,6 +72,7 @@ export type Filtering = {
     [column: string]: {
         value: any;
         filterProps: FilterProps;
+        others?: any;
     };
 };
 export type Sorting = {

package/ui/Elements/DatePicker/Datetime/components/DateRepeater.js

@@ -12,7 +12,8 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from 'react';
 import Icon from '../../../Icon';
-import { DatePickerRepeat, DatePickerRepeatTrans } from '../../utils/constants';
+import { DatePickerRepeatTrans } from '../../utils/constants';
+import { DatePickerRepeat } from '../types';
 import { i18n } from '@lingui/core';
 import { x } from '@xstyled/styled-components';
 import { FooterRow } from './FooterRow';
@@ -21,10 +22,10 @@ export var DateRepeater = function (_a) {
     var onChangeOthers = _a.onChangeOthers, others = _a.others, reset = _a.reset;
     var handleChange = useCallback(function (e) {
         var dateTypeRepeater = e.target.value;
-        onChangeOthers === null || onChangeOthers === void 0 ? void 0 : onChangeOthers(__assign(__assign({}, others), { dateTypeRepeater: dateTypeRepeater }));
-        if (dateTypeRepeater) {
+        if (!dateTypeRepeater) {
             reset();
         }
+        onChangeOthers === null || onChangeOthers === void 0 ? void 0 : onChangeOthers(__assign(__assign({}, others), { dateTypeRepeater: dateTypeRepeater }));
     }, [onChangeOthers, reset, others]);
     return (_jsx(x.div, { borderTop: "1px solid", borderColor: "lightGray2", mt: "8px", pt: "8px", mb: "8px", children: _jsxs(FooterRow, { children: [_jsxs(x.div, { display: "flex", alignItems: "center", flex: "1", children: [_jsx(Icon, { icon: "calendar" }), _jsx(FooterRowLabel, { children: i18n._({ id: 'dataGrid.repeat', message: 'Repeat' }) })] }), _jsxs(x.select, { textAlign: "right", onChange: handleChange, value: others === null || others === void 0 ? void 0 : others.dateTypeRepeater, border: "none", children: [_jsx("option", { value: "", children: i18n._({ id: 'dataGrid.noRepeat', message: 'No repeat' }) }), _jsx("option", { value: DatePickerRepeat.EVERY_TODAY, children: DatePickerRepeatTrans[DatePickerRepeat.EVERY_TODAY] }), _jsx("option", { value: DatePickerRepeat.EVERY_YESTERDAY, children: DatePickerRepeatTrans[DatePickerRepeat.EVERY_YESTERDAY] }), _jsx("option", { value: DatePickerRepeat.EVERY_LAST_WEEK, children: DatePickerRepeatTrans[DatePickerRepeat.EVERY_LAST_WEEK] })] })] }) }));
 };

package/ui/Elements/DatePicker/Datetime/components/Timepicker.js

@@ -12,7 +12,8 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from 'react';
 import Icon from '../../../Icon';
-import { TimePickerRepeat, TimePickerRepeatTrans } from '../../utils/constants';
+import { TimePickerRepeatTrans } from '../../utils/constants';
+import { TimePickerRepeat } from '../types';
 import { i18n } from '@lingui/core';
 import { x } from '@xstyled/styled-components';
 import { FooterRow } from './FooterRow';

package/ui/Elements/DatePicker/Datetime/types.d.ts

@@ -1,6 +1,5 @@
 import type { FocusEvent, FocusEventHandler } from 'react';
 import type { Moment } from 'moment';
-import type { DatePickerRepeat, TimePickerRepeat } from '../utils/constants';
 export type ViewMode = 'years' | 'months' | 'days' | 'time';
 export interface TimeConstraint {
     min: number;
@@ -68,4 +67,14 @@ export type DateTimeOthers = {
         m: number;
     };
 };
+export declare enum DatePickerRepeat {
+    EVERY_TODAY = "every-today",
+    EVERY_YESTERDAY = "every-yesterday",
+    EVERY_LAST_WEEK = "every-last-week"
+}
+export declare enum TimePickerRepeat {
+    FROM = "from",
+    TO = "to",
+    AT = "at"
+}
 export {};

package/ui/Elements/DatePicker/Datetime/types.js

@@ -1 +1,12 @@
-export {};
+export var DatePickerRepeat;
+(function (DatePickerRepeat) {
+    DatePickerRepeat["EVERY_TODAY"] = "every-today";
+    DatePickerRepeat["EVERY_YESTERDAY"] = "every-yesterday";
+    DatePickerRepeat["EVERY_LAST_WEEK"] = "every-last-week";
+})(DatePickerRepeat || (DatePickerRepeat = {}));
+export var TimePickerRepeat;
+(function (TimePickerRepeat) {
+    TimePickerRepeat["FROM"] = "from";
+    TimePickerRepeat["TO"] = "to";
+    TimePickerRepeat["AT"] = "at";
+})(TimePickerRepeat || (TimePickerRepeat = {}));

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

@@ -1,2 +1,3 @@
 import DatePicker from './DatePicker';
+export { DatePickerRepeat, TimePickerRepeat } from './Datetime/types';
 export default DatePicker;

package/ui/Elements/DatePicker/index.js

@@ -1,2 +1,3 @@
 import DatePicker from './DatePicker';
+export { DatePickerRepeat, TimePickerRepeat } from './Datetime/types';
 export default DatePicker;

package/ui/Elements/DatePicker/utils/constants.d.ts

@@ -1,12 +1,3 @@
-export declare enum DatePickerRepeat {
-    EVERY_TODAY = "every-today",
-    EVERY_YESTERDAY = "every-yesterday",
-    EVERY_LAST_WEEK = "every-last-week"
-}
+import { DatePickerRepeat, TimePickerRepeat } from '../Datetime/types';
 export declare const DatePickerRepeatTrans: Record<DatePickerRepeat, string>;
-export declare enum TimePickerRepeat {
-    FROM = "from",
-    TO = "to",
-    AT = "at"
-}
 export declare const TimePickerRepeatTrans: Record<TimePickerRepeat, string>;

package/ui/Elements/DatePicker/utils/constants.js

@@ -1,22 +1,11 @@
 var _a, _b;
+import { DatePickerRepeat, TimePickerRepeat } from '../Datetime/types';
 import { i18n } from '@lingui/core';
-export var DatePickerRepeat;
-(function (DatePickerRepeat) {
-    DatePickerRepeat["EVERY_TODAY"] = "every-today";
-    DatePickerRepeat["EVERY_YESTERDAY"] = "every-yesterday";
-    DatePickerRepeat["EVERY_LAST_WEEK"] = "every-last-week";
-})(DatePickerRepeat || (DatePickerRepeat = {}));
 export var DatePickerRepeatTrans = (_a = {},
     _a[DatePickerRepeat.EVERY_TODAY] = i18n._({ id: 'dataGrid.everyToday', message: 'Every today' }),
     _a[DatePickerRepeat.EVERY_YESTERDAY] = i18n._({ id: 'dataGrid.everyYesterday', message: 'Every yesterday' }),
     _a[DatePickerRepeat.EVERY_LAST_WEEK] = i18n._({ id: 'dataGrid.everyLastWeek', message: 'Every last week' }),
     _a);
-export var TimePickerRepeat;
-(function (TimePickerRepeat) {
-    TimePickerRepeat["FROM"] = "from";
-    TimePickerRepeat["TO"] = "to";
-    TimePickerRepeat["AT"] = "at";
-})(TimePickerRepeat || (TimePickerRepeat = {}));
 export var TimePickerRepeatTrans = (_b = {},
     _b[TimePickerRepeat.FROM] = i18n._({ id: 'dataGrid.timepicker.from', message: 'from' }),
     _b[TimePickerRepeat.TO] = i18n._({ id: 'dataGrid.timepicker.to', message: 'to' }),