@mailstep/design-system 0.7.79-beta.7 → 0.7.79-beta.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/package.json +1 -1
  2. package/ui/Blocks/CommonGrid/components/Filters/GridSelect/GridSelect.js +0 -1
  3. package/ui/Blocks/CommonGrid/storybook/utils/columnDefinition.js +53 -54
  4. package/ui/Elements/Select/Select.js +2 -2
  5. package/ui/Elements/Select/components/SelectAll.d.ts +5 -3
  6. package/ui/Elements/Select/components/SelectAll.js +7 -4
  7. package/ui/index.es.js +13966 -13327
  8. package/ui/index.umd.js +437 -437
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mailstep/design-system",
3
- "version": "0.7.79-beta.7",
3
+ "version": "0.7.79-beta.8",
4
4
  "license": "ISC",
5
5
  "type": "module",
6
6
  "main": "./ui/index.js",
package/ui/Blocks/CommonGrid/components/Filters/GridSelect/GridSelect.js CHANGED
@@ -55,7 +55,6 @@ var SelectFilter = function (_a) {
55
55
  var onChange = _a.onChange, isMulti = _a.isMulti, value = _a.value, options = _a.options, checkAllButton = _a.checkAllButton, asyncLoadKey = _a.asyncLoadKey, onAsyncLoadFilterOptions = _a.onAsyncLoadFilterOptions;
56
56
  var _b = useState([]), loadedOptions = _b[0], setLoadedOptions = _b[1];
57
57
  var handleOnMultiChange = useCallback(function (options) {
58
- console.log('handleOnMultiChange', options);
59
58
  onChange === null || onChange === void 0 ? void 0 : onChange(!isArray(options) || !(options === null || options === void 0 ? void 0 : options.length) ? null : options);
60
59
  }, [onChange]);
61
60
  var isAsync = !!asyncLoadKey;
package/ui/Blocks/CommonGrid/storybook/utils/columnDefinition.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { ComplexCell } from '../components/ComplexCell';
1
2
  import { EnumCellExample } from '../components/EnumCellExample';
2
3
  import { enumValues } from './utils';
3
4
  export var oversizedArrayColumns = 25;
@@ -42,72 +43,70 @@ export var columnDefinitions = [
42
43
  sorting: true,
43
44
  asyncLoadKey: 'enumColumnAsync'
44
45
  },
45
- /*
46
46
  {
47
- name: 'numberColumn',
48
- title: 'Number Column',
49
- flexBasis: 160,
50
- filtering: true,
51
- filteringType: 'number',
52
- filterExtraProps: {
53
- decimals: 2
54
- },
55
- sorting: true
47
+ name: 'numberColumn',
48
+ title: 'Number Column',
49
+ flexBasis: 160,
50
+ filtering: true,
51
+ filteringType: 'number',
52
+ filterExtraProps: {
53
+ decimals: 2
54
+ },
55
+ sorting: true
56
56
  },
57
57
  {
58
- name: 'numberFloatColumn',
59
- title: 'Number Float Column',
60
- flexBasis: 160,
61
- filtering: true,
62
- filteringType: 'number',
63
- sorting: true,
64
- filterExtraProps: {
65
- isFloat: true
66
- }
58
+ name: 'numberFloatColumn',
59
+ title: 'Number Float Column',
60
+ flexBasis: 160,
61
+ filtering: true,
62
+ filteringType: 'number',
63
+ sorting: true,
64
+ filterExtraProps: {
65
+ isFloat: true
66
+ }
67
67
  },
68
68
  {
69
- name: 'dateColumn',
70
- title: 'Date Column',
71
- flexBasis: 160,
72
- filtering: true,
73
- filteringType: 'date',
74
- sorting: true,
75
- filterExtraProps: {
76
- filterTime: true
77
- }
69
+ name: 'dateColumn',
70
+ title: 'Date Column',
71
+ flexBasis: 160,
72
+ filtering: true,
73
+ filteringType: 'date',
74
+ sorting: true,
75
+ filterExtraProps: {
76
+ filterTime: true
77
+ }
78
78
  },
79
79
  {
80
- name: 'boolColumn',
81
- title: 'Bool Column',
82
- flexBasis: 160,
83
- filtering: true,
84
- filteringType: 'flag',
85
- sorting: true,
86
- formatRowValue: (row: { boolColumn: boolean }): RowValueType => {
87
- return row.boolColumn ? 'Yes' : 'No'
88
- }
80
+ name: 'boolColumn',
81
+ title: 'Bool Column',
82
+ flexBasis: 160,
83
+ filtering: true,
84
+ filteringType: 'flag',
85
+ sorting: true,
86
+ formatRowValue: function (row) {
87
+ return row.boolColumn ? 'Yes' : 'No';
88
+ }
89
89
  },
90
90
  {
91
- name: 'advancedColumn',
92
- title: 'Advanced Column',
93
- flexBasis: 160,
94
- formatRowValue: (row: { numberColumn: number; textColumn: string }): RowValueType => {
95
- return `${(row.numberColumn / 4) * row.textColumn.length}`
96
- }
91
+ name: 'advancedColumn',
92
+ title: 'Advanced Column',
93
+ flexBasis: 160,
94
+ formatRowValue: function (row) {
95
+ return "".concat((row.numberColumn / 4) * row.textColumn.length);
96
+ }
97
97
  },
98
98
  {
99
- name: 'complexColumn',
100
- title: 'Complex Column',
101
- flexBasis: 350,
102
- cellComponent: ComplexCell
99
+ name: 'complexColumn',
100
+ title: 'Complex Column',
101
+ flexBasis: 350,
102
+ cellComponent: ComplexCell
103
103
  },
104
104
  {
105
- name: 'stickyColumn',
106
- title: 'Sticky Column',
107
- flexBasis: 160,
108
- alwaysOn: true,
109
- sticky: true,
110
- stickTo: 'right'
105
+ name: 'stickyColumn',
106
+ title: 'Sticky Column',
107
+ flexBasis: 160,
108
+ alwaysOn: true,
109
+ sticky: true,
110
+ stickTo: 'right'
111
111
  }
112
- */
113
112
  ];
package/ui/Elements/Select/Select.js CHANGED
@@ -74,8 +74,8 @@ var Select = function (_a) {
74
74
  if (showSelectAllButton && !isMulti) {
75
75
  console.error('CheckboxSelect incompatible props');
76
76
  }
77
- var setAllOptions = useCallback(function () {
78
- console.log('setAllOptions', options);
77
+ var setAllOptions = useCallback(function (_a) {
78
+ var options = _a.options;
79
79
  onChange === null || onChange === void 0 ? void 0 : onChange((options || []));
80
80
  }, [onChange, options]);
81
81
  var unsetAllOptions = useCallback(function () {
package/ui/Elements/Select/components/SelectAll.d.ts CHANGED
@@ -1,12 +1,14 @@
1
- import { SelectProps, CustomTheme } from '../types';
1
+ import { SelectProps, CustomTheme, Option } from '../types';
2
2
 
3
3
  type Props = {
4
- onCustomSelectAll: () => void;
4
+ onCustomSelectAll: ({ options }: {
5
+ options?: Option[];
6
+ }) => void;
5
7
  onCustomDeselectAll: () => void;
6
8
  value: SelectProps['value'];
7
9
  options: SelectProps['options'];
8
10
  maxMenuHeight: number;
9
11
  theme: CustomTheme;
10
12
  };
11
- declare const SelectAll: ({ onCustomSelectAll, onCustomDeselectAll, value, options, maxMenuHeight, theme }: Props) => import("react/jsx-runtime").JSX.Element;
13
+ declare const SelectAll: ({ onCustomSelectAll, onCustomDeselectAll, value, options, maxMenuHeight, theme }: Props) => import("react/jsx-runtime").JSX.Element | null;
12
14
  export default SelectAll;
package/ui/Elements/Select/components/SelectAll.js CHANGED
@@ -4,11 +4,11 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
4
4
  };
5
5
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
6
6
  import { useCallback, useState, useEffect, useRef } from 'react';
7
- import styled, { th } from '@xstyled/styled-components';
8
- import { Trans } from '@lingui/react';
9
7
  import Checkbox from '../../../Forms/Checkbox/Checkbox';
10
8
  import Toggle from '../../Toggle/Toggle';
11
9
  import SelectedIndicator from '../components/SelectedIndicator';
10
+ import { Trans } from '@lingui/react';
11
+ import styled, { th } from '@xstyled/styled-components';
12
12
  var SelectAllWrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n margin: 0px 2px 1px 0px;\n padding: ", ";\n font-weight: 400;\n background-color: ", ";\n color: ", ";\n border-radius: 6px;\n height: 36px;\n cursor: pointer;\n\n :hover {\n background-color: ", ";\n }\n"], ["\n display: flex;\n margin: 0px 2px 1px 0px;\n padding: ", ";\n font-weight: 400;\n background-color: ", ";\n color: ", ";\n border-radius: 6px;\n height: 36px;\n cursor: pointer;\n\n :hover {\n background-color: ", ";\n }\n"])), function (_a) {
13
13
  var additionalPadding = _a.additionalPadding;
14
14
  return (additionalPadding ? '8px 27px 8px 10px' : '10px 10px');
@@ -32,7 +32,7 @@ var SelectAll = function (_a) {
32
32
  var handleSelectAll = useCallback(function () {
33
33
  if (!isSelected) {
34
34
  setIsSelected(true);
35
- onCustomSelectAll();
35
+ onCustomSelectAll({ options: options });
36
36
  }
37
37
  else if (isSelected) {
38
38
  setIsSelected(false);
@@ -50,7 +50,10 @@ var SelectAll = function (_a) {
50
50
  (options === null || options === void 0 ? void 0 : options.length) !== value.length && setIsSelected(false);
51
51
  }
52
52
  }, [maxMenuHeight, options === null || options === void 0 ? void 0 : options.length, value]);
53
- return (_jsxs(SelectAllWrap, { isSelected: isSelected, onClick: handleSelectAll, ref: ref, additionalPadding: additionalPadding, children: [(showCheckbox || showToggle) && (_jsxs(SelectedIndicator, { children: [showCheckbox && _jsx(Checkbox, { checked: isSelected, size: 2, readOnly: true }), showToggle && _jsx(Toggle, { name: "", checked: isSelected, spaceAround: false, variant: 'grid' })] })), _jsx(Trans, { id: "datagrid.filterCell.selectAllLabel", message: 'select all' })] }));
53
+ if (!(options === null || options === void 0 ? void 0 : options.length)) {
54
+ return null;
55
+ }
56
+ return (_jsxs(SelectAllWrap, { isSelected: isSelected, onClick: handleSelectAll, ref: ref, additionalPadding: additionalPadding, children: [(showCheckbox || showToggle) && (_jsxs(SelectedIndicator, { children: [showCheckbox && _jsx(Checkbox, { checked: isSelected, size: 2, readOnly: true }), showToggle && _jsx(Toggle, { name: "", checked: isSelected, spaceAround: false, variant: 'grid' })] })), _jsx(Trans, { id: "datagrid.filterCell.selectAllLabel", message: 'select all' }), " (", options === null || options === void 0 ? void 0 : options.length, ")"] }));
54
57
  };
55
58
  export default SelectAll;
56
59
  var templateObject_1;