@synerise/ds-column-manager 1.0.13 → 1.1.1

package/dist/ColumnManager.js

@@ -1,430 +1,118 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
-function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _inheritsLoose(t, o) { t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o); }
-function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
-import React from 'react';
-import { injectIntl } from 'react-intl';
-import Typography from 'antd/lib/typography';
+import React, { useEffect, useMemo, useState } from 'react';
+import { Title } from '@synerise/ds-typography';
 import Drawer from '@synerise/ds-drawer';
 import Button from '@synerise/ds-button';
-import Icon, { CloseM, FolderM, SearchM } from '@synerise/ds-icon';
-import ItemFilter from '@synerise/ds-item-filter';
-import Scrollbar from '@synerise/ds-scrollbar';
-import SearchBar from '@synerise/ds-search-bar';
-import { theme } from '@synerise/ds-core';
-import Tooltip from '@synerise/ds-tooltip';
-import ColumnManagerActions from './ColumnManagerActions/ColumnManagerActions';
+import Icon, { CloseM, SearchM } from '@synerise/ds-icon';
+import { useTheme } from '@synerise/ds-core';
+import { ColumnManagerActions } from './ColumnManagerActions/ColumnManagerActions';
 import ColumnManagerList from './ColumnManagerList/ColumnManagerList';
-import * as S from './styles/ColumnManager.styles';
-import ColumnManagerGroupSettings from './ColumnManagerGroupSettings/ColumnManagerGroupSettings';
-var DEFAULT_STATE = {
-  searchQuery: '',
-  visibleList: [],
-  hiddenList: [],
-  itemFilterVisible: false,
-  selectedFilterId: undefined,
-  activeColumn: undefined,
-  groupSettings: undefined
-};
-var ColumnManager = /*#__PURE__*/function (_React$Component) {
-  function ColumnManager(props) {
-    var _this;
-    _this = _React$Component.call(this, props) || this;
-    // eslint-disable-next-line react/state-in-constructor
-    _this.updateVisibleColumns = function (newVisibleList) {
-      _this.setState({
-        visibleList: newVisibleList.map(function (column) {
-          return _extends({}, column, {
-            visible: true
-          });
-        })
-      });
-    };
-    _this.updateHiddenColumns = function (newHiddenList) {
-      _this.setState({
-        hiddenList: newHiddenList.map(function (column) {
-          return _extends({}, column, {
-            visible: false
-          });
-        })
-      });
-    };
-    _this.hideColumn = function (id) {
-      var _this$state = _this.state,
-        visibleList = _this$state.visibleList,
-        hiddenList = _this$state.hiddenList;
-      var column = visibleList.find(function (col) {
-        return col.id === id;
-      });
-      column && _this.setState({
-        visibleList: visibleList.filter(function (visibleColumn) {
-          return visibleColumn.id !== column.id;
-        }),
-        hiddenList: [].concat(hiddenList, [_extends({}, column, {
-          visible: false
-        })])
-      });
-    };
-    _this.showColumn = function (id) {
-      var _this$state2 = _this.state,
-        visibleList = _this$state2.visibleList,
-        hiddenList = _this$state2.hiddenList;
-      var column = hiddenList.find(function (col) {
-        return col.id === id;
-      });
-      column && _this.setState({
-        hiddenList: hiddenList.filter(function (hiddenColumn) {
-          return hiddenColumn.id !== column.id;
-        }),
-        visibleList: [].concat(visibleList, [_extends({}, column, {
-          visible: true
-        })])
-      });
-    };
-    _this.toggleColumn = function (id, columnVisible) {
-      if (columnVisible) {
-        _this.hideColumn(id);
-      } else {
-        _this.showColumn(id);
-      }
-    };
-    _this.setFixed = function (id, fixed) {
-      var visibleList = _this.state.visibleList;
-      _this.setState({
-        visibleList: visibleList.map(function (visibleColumn) {
-          if (visibleColumn.id === id) {
-            return visibleColumn.fixed === fixed ? _extends({}, visibleColumn, {
-              fixed: undefined
-            }) : _extends({}, visibleColumn, {
-              fixed: fixed
-            });
-          }
-          return visibleColumn;
-        })
-      });
-    };
-    _this.showGroupSettings = function (column) {
-      _this.setState({
-        activeColumn: column
-      });
-    };
-    _this.hideItemFilter = function () {
-      var hideSavedViews = _this.props.hideSavedViews;
-      hideSavedViews && hideSavedViews();
-      _this.setState({
-        itemFilterVisible: false
-      });
-    };
-    _this.handleShowItemFilter = function () {
-      _this.setState({
-        itemFilterVisible: true
-      });
-    };
-    _this.handleSearchChange = function (query) {
-      _this.setState({
-        searchQuery: query
-      });
-    };
-    _this.handleSave = function (viewMeta) {
-      var onSave = _this.props.onSave;
-      var _this$state3 = _this.state,
-        visibleList = _this$state3.visibleList,
-        hiddenList = _this$state3.hiddenList,
-        groupSettings = _this$state3.groupSettings;
-      onSave({
-        meta: viewMeta,
-        groupSettings: groupSettings,
-        columns: [].concat(visibleList, hiddenList)
-      });
-    };
-    _this.handleApply = function () {
-      var onApply = _this.props.onApply;
-      var _this$state4 = _this.state,
-        visibleList = _this$state4.visibleList,
-        hiddenList = _this$state4.hiddenList,
-        groupSettings = _this$state4.groupSettings;
-      onApply([].concat(visibleList, hiddenList), groupSettings);
-    };
-    _this.state = _extends({}, DEFAULT_STATE, {
-      groupSettings: props.groupSettings || undefined,
-      visibleList: props.columns.filter(function (column) {
-        return column.visible;
-      }),
-      hiddenList: props.columns.filter(function (column) {
-        return !column.visible;
-      }),
-      selectedFilterId: props.itemFilterConfig && props.itemFilterConfig.selectedItemId
-    });
-    return _this;
-  }
-  _inheritsLoose(ColumnManager, _React$Component);
-  ColumnManager.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
-    if (props.itemFilterConfig && props.itemFilterConfig.selectedItemId !== state.selectedFilterId) {
-      var visible = props.columns.filter(function (column) {
-        return column.visible;
-      });
-      var hidden = props.columns.filter(function (column) {
-        return !column.visible;
-      });
-      return {
-        visibleList: visible,
-        hiddenList: hidden,
-        selectedFilterId: props.itemFilterConfig && props.itemFilterConfig.selectedItemId || undefined,
-        groupSettings: props.groupSettings
-      };
+import * as S from './ColumnManager.styles';
+import { useTranslations } from './hooks/useTranslations';
+import { matchesSearchQuery } from './utils/matchesSearchQuery';
+var ColumnManager = function ColumnManager(_ref) {
+  var columns = _ref.columns,
+    customTexts = _ref.texts,
+    onApply = _ref.onApply,
+    visible = _ref.visible,
+    hide = _ref.hide,
+    _ref$draggable = _ref.draggable,
+    draggable = _ref$draggable === void 0 ? true : _ref$draggable;
+  var _useState = useState(''),
+    searchQuery = _useState[0],
+    setSearchQuery = _useState[1];
+  var _useState2 = useState(columns),
+    currentColumns = _useState2[0],
+    setCurrentColumns = _useState2[1];
+  var texts = useTranslations(customTexts);
+  var theme = useTheme();
+  useEffect(function () {
+    setCurrentColumns(columns);
+  }, [columns]);
+  useEffect(function () {
+    if (!visible) {
+      setCurrentColumns(columns);
     }
-    return null;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visible]);
+  var handleApply = function handleApply() {
+    onApply(currentColumns);
+  };
+  var handleCancel = function handleCancel() {
+    hide();
+  };
+  var handleToggleColumn = function handleToggleColumn(id, updatedVisible) {
+    setCurrentColumns(currentColumns.map(function (column) {
+      return column.id === id ? _extends({}, column, {
+        visible: updatedVisible
+      }) : column;
+    }));
   };
-  var _proto = ColumnManager.prototype;
-  _proto.render = function render() {
-    var _this2 = this,
-      _groupSettings$column2;
-    var _this$props = this.props,
-      visible = _this$props.visible,
-      hide = _this$props.hide,
-      itemFilterConfig = _this$props.itemFilterConfig,
-      savedViewsVisible = _this$props.savedViewsVisible;
-    var _this$state5 = this.state,
-      visibleList = _this$state5.visibleList,
-      hiddenList = _this$state5.hiddenList,
-      searchQuery = _this$state5.searchQuery,
-      itemFilterVisible = _this$state5.itemFilterVisible,
-      activeColumn = _this$state5.activeColumn,
-      groupSettings = _this$state5.groupSettings;
-    var searchResults = [].concat(visibleList, hiddenList).filter(function (column) {
-      return column.name.toLowerCase().includes(searchQuery.toLowerCase());
+  var handleOrderChange = function handleOrderChange(newOrder) {
+    var idOrder = newOrder.map(function (item) {
+      return item.id;
     });
-    var visibleListWithGroup = visibleList.map(function (column) {
-      var _groupSettings$column;
-      if (column.id === (groupSettings == null || (_groupSettings$column = groupSettings.column) == null ? void 0 : _groupSettings$column.id)) {
-        return _extends({}, column, {
-          group: true
-        });
-      }
-      return column;
+    var updatedColumns = [].concat(currentColumns).sort(function (a, b) {
+      return idOrder.indexOf(a.id) - idOrder.indexOf(b.id);
     });
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.ColumnManager, {
-      visible: visible || savedViewsVisible,
-      width: 338,
-      onClose: hide
-    }, /*#__PURE__*/React.createElement(Drawer.DrawerHeader, null, /*#__PURE__*/React.createElement(Drawer.DrawerHeaderBar, null, /*#__PURE__*/React.createElement(Typography.Title, {
-      style: {
-        flex: 1,
-        margin: 0
-      },
-      level: 4
-    }, this.texts.title), /*#__PURE__*/React.createElement(Tooltip, {
-      title: this.texts.savedViews,
-      placement: "bottom"
-    }, /*#__PURE__*/React.createElement(Button, {
-      "data-testid": "ds-column-manager-show-filters",
-      type: "ghost",
-      mode: "single-icon",
-      onClick: this.handleShowItemFilter
-    }, /*#__PURE__*/React.createElement(Icon, {
-      component: /*#__PURE__*/React.createElement(FolderM, null)
-    }))), /*#__PURE__*/React.createElement(Button, {
-      "data-testid": "ds-column-manager-close",
-      style: {
-        marginLeft: '8px'
-      },
-      mode: "single-icon",
-      type: "ghost",
-      onClick: hide
-    }, /*#__PURE__*/React.createElement(Icon, {
-      component: /*#__PURE__*/React.createElement(CloseM, null)
-    })))), /*#__PURE__*/React.createElement(SearchBar, {
-      onSearchChange: this.handleSearchChange,
-      placeholder: this.texts.searchPlaceholder,
-      value: searchQuery,
-      onClearInput: function onClearInput() {
-        return _this2.handleSearchChange('');
-      },
-      iconLeft: /*#__PURE__*/React.createElement(Icon, {
-        component: /*#__PURE__*/React.createElement(SearchM, null),
-        color: theme.palette['grey-600']
-      }),
-      clearTooltip: this.texts.searchClearTooltip || ''
-    }), /*#__PURE__*/React.createElement(Scrollbar, {
-      absolute: true
-    }, /*#__PURE__*/React.createElement(Drawer.DrawerContent, {
-      style: {
-        padding: '0 0 80px'
-      }
-    }, /*#__PURE__*/React.createElement(ColumnManagerList, {
-      texts: this.texts,
-      searchQuery: searchQuery,
-      searchResults: searchResults,
-      visibleList: visibleListWithGroup,
-      hiddenList: hiddenList,
-      setFixed: this.setFixed,
-      showGroupSettings: this.showGroupSettings,
-      groupSettings: groupSettings,
-      toggleColumn: this.toggleColumn,
-      updateVisibleList: this.updateVisibleColumns,
-      updateHiddenList: this.updateHiddenColumns
-    }))), /*#__PURE__*/React.createElement(ColumnManagerActions, {
-      onSave: this.handleSave,
-      onApply: this.handleApply,
-      onCancel: hide,
-      texts: this.texts
-    }), itemFilterConfig && /*#__PURE__*/React.createElement(ItemFilter, _extends({}, itemFilterConfig, {
-      visible: itemFilterVisible || Boolean(savedViewsVisible),
-      hide: this.hideItemFilter
-    }))), /*#__PURE__*/React.createElement(ColumnManagerGroupSettings, {
-      texts: this.texts,
-      hide: function hide() {
-        _this2.setState({
-          activeColumn: undefined
-        });
-      },
-      visible: activeColumn !== undefined,
-      column: activeColumn,
-      settings: (activeColumn == null ? void 0 : activeColumn.key) === (groupSettings == null || (_groupSettings$column2 = groupSettings.column) == null ? void 0 : _groupSettings$column2.key) ? groupSettings : undefined,
-      onOk: function onOk(settings) {
-        _this2.setState({
-          groupSettings: settings,
-          activeColumn: undefined
-        });
-      }
-    }));
+    setCurrentColumns(updatedColumns);
   };
-  return _createClass(ColumnManager, [{
-    key: "texts",
-    get: function get() {
-      var _this$props2 = this.props,
-        texts = _this$props2.texts,
-        intl = _this$props2.intl;
-      return _extends({
-        title: intl.formatMessage({
-          id: 'DS.COLUMN-MANAGER.TITLE'
-        }),
-        savedViews: intl.formatMessage({
-          id: 'DS.COLUMN-MANAGER.SAVED-VIEWS',
-          defaultMessage: 'Saved views'
-        }),
-        searchPlaceholder: intl.formatMessage({
-          id: 'DS.COLUMN-MANAGER.SEARCH-PLACEHOLDER'
-        }),
-        searchClearTooltip: intl.formatMessage({
-          id: 'DS.ITEM-FILTER.SEARCH-CLEAR'
-        }),
-        noResults: intl.formatMessage({
-          id: 'DS.COLUMN-MANAGER.NO-RESULTS'
-        }),
-        searchResults: intl.formatMessage({
-          id: 'DS.COLUMN-MANAGER.SEARCH-RESULTS'
-        }),
-        visible: intl.formatMessage({
-          id: 'DS.COLUMN-MANAGER.VISIBLE'
-        }),
-        hidden: intl.formatMessage({
-          id: 'DS.COLUMN-MANAGER.HIDDEN'
-        }),
-        saveView: intl.formatMessage({
-          id: 'DS.COLUMN-MANAGER.SAVE-VIEW'
-        }),
-        cancel: intl.formatMessage({
-          id: 'DS.COLUMN-MANAGER.CANCEL'
-        }),
-        apply: intl.formatMessage({
-          id: 'DS.COLUMN-MANAGER.APPLY'
-        }),
-        fixedLeft: intl.formatMessage({
-          id: 'DS.COLUMN-MANAGER.FIXED-LEFT'
-        }),
-        fixedRight: intl.formatMessage({
-          id: 'DS.COLUMN-MANAGER.FIXED-RIGHT'
-        }),
-        group: intl.formatMessage({
-          id: 'DS.COLUMN-MANAGER.GROUP'
-        }),
-        clear: intl.formatMessage({
-          id: 'DS.COLUMN-MANAGER.CLEAR'
-        }),
-        viewName: intl.formatMessage({
-          id: 'DS.COLUMN-MANAGER.VIEW-NAME'
-        }),
-        viewDescription: intl.formatMessage({
-          id: 'DS.COLUMN-MANAGER.VIEW-DESCRIPTION'
-        }),
-        viewNamePlaceholder: intl.formatMessage({
-          id: 'DS.COLUMN-MANAGER.VIEW-NAME-PLACEHOLDER'
-        }),
-        viewDescriptionPlaceholder: intl.formatMessage({
-          id: 'DS.COLUMN-MANAGER.VIEW-DESCRIPTION-PLACEHOLDER'
-        }),
-        mustNotBeEmpty: intl.formatMessage({
-          id: 'DS.COLUMN-MANAGER.MUST-NOT-BE-EMPTY'
-        }),
-        switchOn: intl.formatMessage({
-          id: 'DS.COLUMN-MANAGER.SWITCH-ON'
-        }),
-        switchOff: intl.formatMessage({
-          id: 'DS.COLUMN-MANAGER.SWITCH-OFF'
-        }),
-        groupByValue: intl.formatMessage({
-          id: 'DS.COLUMN-MANAGER.GROUP_BY_VALUE'
-        }),
-        groupByRanges: intl.formatMessage({
-          id: 'DS.COLUMN-MANAGER.GROUP_BY_RANGERS'
-        }),
-        groupByIntervals: intl.formatMessage({
-          id: 'DS.COLUMN-MANAGER.GROUP_BY_INTERVALS'
-        }),
-        groupDisabled: intl.formatMessage({
-          id: 'DS.COLUMN-MANAGER.GROUP_DISABLED'
-        }),
-        groupTitle: intl.formatMessage({
-          id: 'DS.COLUMN-MANAGER.GROUP_TITLE'
-        }),
-        selectPlaceholder: intl.formatMessage({
-          id: 'DS.COLUMN-MANAGER.SELECT_PLACEHOLDER'
-        }),
-        intervalPlaceholder: intl.formatMessage({
-          id: 'DS.COLUMN-MANAGER.INTERVAL_PLACEHOLDER'
-        }),
-        groupingType: intl.formatMessage({
-          id: 'DS.COLUMN-MANAGER.SET_GROUPING_TYPE'
-        }),
-        groupingTypeTooltip: intl.formatMessage({
-          id: 'DS.COLUMN-MANAGER.GROUPING_TYPE_TOOLTIP'
-        }),
-        from: intl.formatMessage({
-          id: 'DS.COLUMN-MANAGER.FROM'
-        }),
-        to: intl.formatMessage({
-          id: 'DS.COLUMN-MANAGER.TO'
-        }),
-        remove: intl.formatMessage({
-          id: 'DS.COLUMN-MANAGER.REMOVE'
-        }),
-        addRange: intl.formatMessage({
-          id: 'DS.COLUMN-MANAGER.ADD_RANGE'
-        }),
-        errorEmptyRange: intl.formatMessage({
-          id: 'DS.COLUMN-MANAGER.ERROR_EMPTY_RANGE'
-        }),
-        errorEmptyFromField: intl.formatMessage({
-          id: 'DS.COLUMN-MANAGER.ERROR_EMPTY_FROM_FIELD'
-        }),
-        errorEmptyToField: intl.formatMessage({
-          id: 'DS.COLUMN-MANAGER.ERROR_EMPTY_TO_FIELD'
-        }),
-        errorChooseGrouping: intl.formatMessage({
-          id: 'DS.COLUMN-MANAGER.ERROR_CHOOSE_GROUPING'
-        }),
-        errorInterval: intl.formatMessage({
-          id: 'DS.COLUMN-MANAGER.ERROR_INTERVAL'
-        }),
-        errorRange: intl.formatMessage({
-          id: 'DS.COLUMN-MANAGER.ERROR_RANGE'
-        })
-      }, texts);
+  var handleSearchChange = function handleSearchChange(query) {
+    setSearchQuery(query);
+  };
+  var filteredColumns = useMemo(function () {
+    return searchQuery ? currentColumns.filter(function (column) {
+      return matchesSearchQuery(column.name, searchQuery);
+    }) : currentColumns;
+  }, [currentColumns, searchQuery]);
+  return /*#__PURE__*/React.createElement(S.ColumnManager, {
+    visible: visible,
+    width: 338,
+    onClose: hide
+  }, /*#__PURE__*/React.createElement(Drawer.DrawerHeader, null, /*#__PURE__*/React.createElement(Drawer.DrawerHeaderBar, null, /*#__PURE__*/React.createElement(Title, {
+    style: {
+      flex: 1,
+      margin: 0
+    },
+    level: 4
+  }, texts.title), /*#__PURE__*/React.createElement(Button, {
+    "data-testid": "ds-column-manager-close",
+    style: {
+      marginLeft: '8px'
+    },
+    mode: "single-icon",
+    type: "ghost",
+    onClick: hide
+  }, /*#__PURE__*/React.createElement(Icon, {
+    component: /*#__PURE__*/React.createElement(CloseM, null)
+  })))), /*#__PURE__*/React.createElement(S.SearchBar, {
+    onSearchChange: handleSearchChange,
+    placeholder: texts.searchPlaceholder,
+    value: searchQuery,
+    onClearInput: function onClearInput() {
+      return handleSearchChange('');
+    },
+    iconLeft: /*#__PURE__*/React.createElement(Icon, {
+      component: /*#__PURE__*/React.createElement(SearchM, null),
+      color: theme.palette['grey-600']
+    }),
+    clearTooltip: texts.searchClearTooltip || ''
+  }), /*#__PURE__*/React.createElement(S.ColumnManagerListWrapper, null, /*#__PURE__*/React.createElement(Drawer.DrawerContent, {
+    style: {
+      padding: '0',
+      height: '100%'
     }
-  }]);
-}(React.Component); // @ts-ignore
-export default injectIntl(ColumnManager);
+  }, /*#__PURE__*/React.createElement(ColumnManagerList, {
+    texts: texts,
+    draggable: draggable,
+    handleOrderChange: handleOrderChange,
+    searchQuery: searchQuery,
+    columns: filteredColumns,
+    toggleColumn: handleToggleColumn
+  }))), /*#__PURE__*/React.createElement(ColumnManagerActions, {
+    onApply: handleApply,
+    onCancel: handleCancel,
+    texts: texts
+  }));
+};
+export default ColumnManager;

package/dist/ColumnManager.styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import Drawer from '@synerise/ds-drawer';
+export declare const ColumnManager: import("styled-components").StyledComponent<typeof Drawer, any, {}, never>;
+export declare const SearchBar: import("styled-components").StyledComponent<({ value, className, onSearchChange, onClearInput, placeholder, iconLeft, autofocus, clearTooltip, disabled, borderRadius, handleInputRef, autofocusDelay, clearTooltipProps, valuePrefix, ...htmlAttributes }: import("@synerise/ds-search-bar").SearchBarProps) => import("react").JSX.Element, any, {}, never>;
+export declare const ColumnManagerListWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/ColumnManager.styles.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+import Drawer from '@synerise/ds-drawer';
+import SearchBarBase from '@synerise/ds-search-bar';
+export var ColumnManager = styled(Drawer).withConfig({
+  displayName: "ColumnManagerstyles__ColumnManager",
+  componentId: "sc-4cxi70-0"
+})([""]);
+export var SearchBar = styled(SearchBarBase).withConfig({
+  displayName: "ColumnManagerstyles__SearchBar",
+  componentId: "sc-4cxi70-1"
+})(["min-height:52px;height:52px;"]);
+export var ColumnManagerListWrapper = styled.div.withConfig({
+  displayName: "ColumnManagerstyles__ColumnManagerListWrapper",
+  componentId: "sc-4cxi70-2"
+})(["flex:1 1 auto;min-height:0;"]);

package/dist/ColumnManager.types.d.ts

@@ -1,48 +1,18 @@
-import { ItemFilterProps } from '@synerise/ds-item-filter/dist/ItemFilter.types';
-import React from 'react';
-import { IntlFormatters } from 'react-intl';
-import { Column } from './ColumnManagerItem/ColumManagerItem.types';
-import { Range, GroupSettingsTexts } from './ColumnManagerGroupSettings/ColumnManagerGroupSettings.types';
-export type Texts = GroupSettingsTexts | 'title' | 'savedViews' | 'searchPlaceholder' | 'searchClearTooltip' | 'noResults' | 'searchResults' | 'visible' | 'hidden' | 'saveView' | 'cancel' | 'apply' | 'fixedLeft' | 'fixedRight' | 'group' | 'clear' | 'viewName' | 'viewDescription' | 'viewNamePlaceholder' | 'viewDescriptionPlaceholder' | 'switchOn' | 'switchOff' | 'mustNotBeEmpty';
-export type ColumnManagerProps = {
+import type { ReactNode } from 'react';
+import type { Column } from './ColumnManagerItem/ColumManagerItem.types';
+type TextsString = 'searchPlaceholder';
+type TextsReactNode = 'title' | 'searchClearTooltip' | 'noResults' | 'cancel' | 'apply' | 'clear' | 'switchOn' | 'switchOff';
+export type ColumnManagerTexts = {
+    [k in TextsReactNode]: ReactNode;
+} & {
+    [k in TextsString]: string;
+};
+export type ColumnManagerProps<ColumnType extends Column> = {
     hide: () => void;
     visible: boolean;
-    onSave: (savedView: SavedView) => void;
-    onApply: (columns: Column[], groupSettings?: GroupSettings | undefined) => void;
-    columns: Column[];
-    texts?: {
-        [k in Texts]: string | React.ReactNode;
-    };
-    itemFilterConfig?: Omit<ItemFilterProps, 'visible' | 'hide' | 'theme'>;
-    savedViewsVisible?: boolean;
-    hideSavedViews?: () => void;
-    intl: IntlFormatters;
-    groupSettings?: GroupSettings;
-};
-export type SavedView = {
-    meta: ViewMeta;
-    groupSettings?: GroupSettings;
-    columns: Column[];
-};
-export type ViewMeta = {
-    name: string;
-    description: string;
-};
-export type GroupType = 'value' | 'ranges' | 'interval' | string | undefined;
-export type GroupSettings = {
-    column?: Column;
-    settings: {
-        type: GroupType;
-        ranges: Range[] | false;
-        interval: number | false;
-    };
-};
-export type State = {
-    searchQuery: string;
-    visibleList: Column[];
-    hiddenList: Column[];
-    itemFilterVisible: boolean;
-    selectedFilterId: string | undefined;
-    activeColumn: Column | undefined;
-    groupSettings: GroupSettings | undefined;
+    onApply: (columns: ColumnType[]) => void;
+    columns: ColumnType[];
+    texts?: Partial<ColumnManagerTexts>;
+    draggable?: boolean;
 };
+export {};

package/dist/ColumnManagerActions/ColumnManagerActions.d.ts

@@ -1,11 +1,3 @@
 import React from 'react';
-import { Props, State } from './ColumnManagerActions.types';
-declare class ColumnManagerActions extends React.Component<Props, State> {
-    state: State;
-    handleCancel: () => void;
-    handleShowModal: () => void;
-    handleChange: (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-    handleSubmit: () => void;
-    render(): React.ReactElement;
-}
-export default ColumnManagerActions;
+import { ColumnManagerActionsProps } from './ColumnManagerActions.types';
+export declare const ColumnManagerActions: ({ texts, onApply, onCancel }: ColumnManagerActionsProps) => React.JSX.Element;