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

package/package.json

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

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

@@ -44,18 +44,17 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useState } from 'react';
+import { useCallback, useState, useMemo } from 'react';
 import Select from '../../../../../Elements/Select';
 import SingleSelect from '../../../../../Elements/SingleSelect';
 import { i18n } from '@lingui/core';
 import isArray from 'lodash/isArray';
-import { isOptionArray } from './guards';
 import uniqBy from 'lodash/uniqBy';
+import { isOptionArray } from './guards';
 var SelectFilter = function (_a) {
     var onChange = _a.onChange, isMulti = _a.isMulti, value = _a.value, options = _a.options, checkAllButton = _a.checkAllButton, asyncLoadKey = _a.asyncLoadKey, onAsyncLoadFilterOptions = _a.onAsyncLoadFilterOptions;
     var _b = useState([]), loadedOptions = _b[0], setLoadedOptions = _b[1];
     var handleOnMultiChange = useCallback(function (options) {
-        console.log('handleOnMultiChange', options);
         onChange === null || onChange === void 0 ? void 0 : onChange(!isArray(options) || !(options === null || options === void 0 ? void 0 : options.length) ? null : options);
     }, [onChange]);
     var isAsync = !!asyncLoadKey;
@@ -75,9 +74,9 @@ var SelectFilter = function (_a) {
                     return [2 /*return*/, data];
             }
         });
-    }); }, [options]);
+    }); }, [asyncLoadKey, onAsyncLoadFilterOptions]);
+    var defaultOptions = useMemo(function () { return (isMulti && isAsync && isOptionArray(value) ? uniqBy(__spreadArray(__spreadArray([], loadedOptions, true), value, true), 'value') : undefined); }, [isAsync, value, loadedOptions]);
     if (isMulti) {
-        var defaultOptions = isAsync && isOptionArray(value) ? uniqBy(__spreadArray(__spreadArray([], loadedOptions, true), value, true), 'value') : undefined;
         return (_jsx(Select, { maxMenuHeight: 250, onChange: handleOnMultiChange, value: isOptionArray(value) ? value.map(function (option) { return String(option.value); }) : value, options: defaultOptions || options, showSelectAllButton: checkAllButton, style: "gridFilter", loadOptions: isAsync ? handleLoadOptions : undefined, defaultOptions: defaultOptions, placeholder: isAsync ? i18n._({ id: 'dataGrid.filterCell', message: 'Type to filter' }) : undefined, noOptionsMessage: function () { return null; }, containerVariant: isAsync ? 'search' : undefined, optionVariant: "checkbox", multiLabelVariant: "count", isMulti: true }));
     }
     return (_jsx(SingleSelect, { maxMenuHeight: 250, onChange: onChange, value: value, options: options, style: "gridFilter", loadOptions: isAsync ? handleLoadOptions : undefined, placeholder: isAsync ? i18n._({ id: 'dataGrid.filterCell', message: 'Type to filter' }) : undefined, isClearable: true }));

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

@@ -1,3 +1,4 @@
+import { ComplexCell } from '../components/ComplexCell';
 import { EnumCellExample } from '../components/EnumCellExample';
 import { enumValues } from './utils';
 export var oversizedArrayColumns = 25;
@@ -42,72 +43,70 @@ export var columnDefinitions = [
         sorting: true,
         asyncLoadKey: 'enumColumnAsync'
     },
-    /*
     {
-      name: 'numberColumn',
-      title: 'Number Column',
-      flexBasis: 160,
-      filtering: true,
-      filteringType: 'number',
-      filterExtraProps: {
-        decimals: 2
-      },
-      sorting: true
+        name: 'numberColumn',
+        title: 'Number Column',
+        flexBasis: 160,
+        filtering: true,
+        filteringType: 'number',
+        filterExtraProps: {
+            decimals: 2
+        },
+        sorting: true
     },
     {
-      name: 'numberFloatColumn',
-      title: 'Number Float Column',
-      flexBasis: 160,
-      filtering: true,
-      filteringType: 'number',
-      sorting: true,
-      filterExtraProps: {
-        isFloat: true
-      }
+        name: 'numberFloatColumn',
+        title: 'Number Float Column',
+        flexBasis: 160,
+        filtering: true,
+        filteringType: 'number',
+        sorting: true,
+        filterExtraProps: {
+            isFloat: true
+        }
     },
     {
-      name: 'dateColumn',
-      title: 'Date Column',
-      flexBasis: 160,
-      filtering: true,
-      filteringType: 'date',
-      sorting: true,
-      filterExtraProps: {
-        filterTime: true
-      }
+        name: 'dateColumn',
+        title: 'Date Column',
+        flexBasis: 160,
+        filtering: true,
+        filteringType: 'date',
+        sorting: true,
+        filterExtraProps: {
+            filterTime: true
+        }
     },
     {
-      name: 'boolColumn',
-      title: 'Bool Column',
-      flexBasis: 160,
-      filtering: true,
-      filteringType: 'flag',
-      sorting: true,
-      formatRowValue: (row: { boolColumn: boolean }): RowValueType => {
-        return row.boolColumn ? 'Yes' : 'No'
-      }
+        name: 'boolColumn',
+        title: 'Bool Column',
+        flexBasis: 160,
+        filtering: true,
+        filteringType: 'flag',
+        sorting: true,
+        formatRowValue: function (row) {
+            return row.boolColumn ? 'Yes' : 'No';
+        }
     },
     {
-      name: 'advancedColumn',
-      title: 'Advanced Column',
-      flexBasis: 160,
-      formatRowValue: (row: { numberColumn: number; textColumn: string }): RowValueType => {
-        return `${(row.numberColumn / 4) * row.textColumn.length}`
-      }
+        name: 'advancedColumn',
+        title: 'Advanced Column',
+        flexBasis: 160,
+        formatRowValue: function (row) {
+            return "".concat((row.numberColumn / 4) * row.textColumn.length);
+        }
     },
     {
-      name: 'complexColumn',
-      title: 'Complex Column',
-      flexBasis: 350,
-      cellComponent: ComplexCell
+        name: 'complexColumn',
+        title: 'Complex Column',
+        flexBasis: 350,
+        cellComponent: ComplexCell
     },
     {
-      name: 'stickyColumn',
-      title: 'Sticky Column',
-      flexBasis: 160,
-      alwaysOn: true,
-      sticky: true,
-      stickTo: 'right'
+        name: 'stickyColumn',
+        title: 'Sticky Column',
+        flexBasis: 160,
+        alwaysOn: true,
+        sticky: true,
+        stickTo: 'right'
     }
-      */
 ];

package/ui/Elements/Select/Select.js

@@ -74,8 +74,8 @@ var Select = function (_a) {
     if (showSelectAllButton && !isMulti) {
         console.error('CheckboxSelect incompatible props');
     }
-    var setAllOptions = useCallback(function () {
-        console.log('setAllOptions', options);
+    var setAllOptions = useCallback(function (_a) {
+        var options = _a.options;
         onChange === null || onChange === void 0 ? void 0 : onChange((options || []));
     }, [onChange, options]);
     var unsetAllOptions = useCallback(function () {

package/ui/Elements/Select/components/ConnectedMenu.js

@@ -10,12 +10,19 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import { components as selectComponents } from 'react-select';
-import SelectAll from '../components/SelectAll';
 import ResetAll from '../components/ResetAll';
+import SelectAll from '../components/SelectAll';
 var ConnectedMenu = function (props) {
     var theme = props.theme;
-    var _a = props.selectProps, resetGrid = _a.resetGrid, onCustomSelectAll = _a.onCustomSelectAll, onCustomDeselectAll = _a.onCustomDeselectAll, value = _a.value, options = _a.options, resetGridButton = _a.resetGridButton, selectAllButton = _a.selectAllButton, maxMenuHeight = _a.maxMenuHeight, isLoading = _a.isLoading;
-    return (_jsxs(selectComponents.MenuList, __assign({}, props, { children: [selectAllButton && !isLoading && (_jsx(SelectAll, { theme: theme, onCustomSelectAll: onCustomSelectAll, onCustomDeselectAll: onCustomDeselectAll, value: value, options: options, maxMenuHeight: maxMenuHeight })), props.children, resetGridButton && _jsx(ResetAll, { onReset: resetGrid })] })));
+    var _a = props.selectProps, resetGrid = _a.resetGrid, onCustomSelectAll = _a.onCustomSelectAll, onCustomDeselectAll = _a.onCustomDeselectAll, value = _a.value, resetGridButton = _a.resetGridButton, selectAllButton = _a.selectAllButton, maxMenuHeight = _a.maxMenuHeight, isLoading = _a.isLoading;
+    // because the filterd options (filterd by the search input) are not passed to the menu list (there are all options),
+    // we need to specify them here by children
+    var filteredOptions = useMemo(function () { var _a, _b; return (_b = (_a = props.children) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.call(_a, function (_a) {
+        var _b = _a.props, value = _b.value, label = _b.label;
+        return ({ label: label, value: value });
+    }); }, [props.children]);
+    return (_jsxs(selectComponents.MenuList, __assign({}, props, { children: [selectAllButton && !isLoading && (_jsx(SelectAll, { theme: theme, onCustomSelectAll: onCustomSelectAll, onCustomDeselectAll: onCustomDeselectAll, value: value, options: filteredOptions, maxMenuHeight: maxMenuHeight })), props.children, resetGridButton && _jsx(ResetAll, { onReset: resetGrid })] })));
 };
 export default ConnectedMenu;

package/ui/Elements/Select/components/SelectAll.d.ts

@@ -1,12 +1,14 @@
-import { SelectProps, CustomTheme } from '../types';
+import { SelectProps, CustomTheme, Option } from '../types';
 
 type Props = {
-    onCustomSelectAll: () => void;
+    onCustomSelectAll: ({ options }: {
+        options?: Option[];
+    }) => void;
     onCustomDeselectAll: () => void;
     value: SelectProps['value'];
     options: SelectProps['options'];
     maxMenuHeight: number;
     theme: CustomTheme;
 };
-declare const SelectAll: ({ onCustomSelectAll, onCustomDeselectAll, value, options, maxMenuHeight, theme }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const SelectAll: ({ onCustomSelectAll, onCustomDeselectAll, value, options, maxMenuHeight, theme }: Props) => import("react/jsx-runtime").JSX.Element | null;
 export default SelectAll;

package/ui/Elements/Select/components/SelectAll.js

@@ -4,11 +4,11 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState, useEffect, useRef } from 'react';
-import styled, { th } from '@xstyled/styled-components';
-import { Trans } from '@lingui/react';
 import Checkbox from '../../../Forms/Checkbox/Checkbox';
 import Toggle from '../../Toggle/Toggle';
 import SelectedIndicator from '../components/SelectedIndicator';
+import { Trans } from '@lingui/react';
+import styled, { th } from '@xstyled/styled-components';
 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) {
     var additionalPadding = _a.additionalPadding;
     return (additionalPadding ? '8px 27px 8px 10px' : '10px 10px');
@@ -32,13 +32,13 @@ var SelectAll = function (_a) {
     var handleSelectAll = useCallback(function () {
         if (!isSelected) {
             setIsSelected(true);
-            onCustomSelectAll();
+            onCustomSelectAll({ options: options });
         }
         else if (isSelected) {
             setIsSelected(false);
             onCustomDeselectAll();
         }
-    }, [isSelected, onCustomDeselectAll, onCustomSelectAll]);
+    }, [isSelected, onCustomDeselectAll, onCustomSelectAll, options]);
     useEffect(function () {
         var _a;
         // if the height of all options is higher than maxMenuHeight and the slider is displayed => the indentation needs to be increased
@@ -50,7 +50,10 @@ var SelectAll = function (_a) {
             (options === null || options === void 0 ? void 0 : options.length) !== value.length && setIsSelected(false);
         }
     }, [maxMenuHeight, options === null || options === void 0 ? void 0 : options.length, value]);
-    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' })] }));
+    if (!(options === null || options === void 0 ? void 0 : options.length)) {
+        return null;
+    }
+    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, ")"] }));
 };
 export default SelectAll;
 var templateObject_1;