@synerise/ds-column-manager 1.0.13 → 1.1.0

package/dist/ColumnManagerActions/ColumnManagerActions.js

@@ -1,125 +1,19 @@
-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 _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 Button from '@synerise/ds-button';
-import Modal from '@synerise/ds-modal';
-import { Input, TextArea } from '@synerise/ds-input';
 import * as S from './ColumnManagerActions.styles';
-var DEFAULT_STATE = {
-  name: {
-    value: '',
-    error: ''
-  },
-  description: {
-    value: '',
-    error: ''
-  },
-  modalVisible: false
-};
-var ColumnManagerActions = /*#__PURE__*/function (_React$Component) {
-  function ColumnManagerActions() {
-    var _this;
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-    _this.state = DEFAULT_STATE;
-    _this.handleCancel = function () {
-      _this.setState(DEFAULT_STATE);
-    };
-    _this.handleShowModal = function () {
-      _this.setState({
-        modalVisible: true
-      });
-    };
-    _this.handleChange = function (event) {
-      var _this$setState;
-      var _event$currentTarget = event.currentTarget,
-        name = _event$currentTarget.name,
-        value = _event$currentTarget.value;
-      _this.setState((_this$setState = {}, _this$setState[name] = {
-        value: value,
-        error: ''
-      }, _this$setState));
-    };
-    _this.handleSubmit = function () {
-      var _this$state = _this.state,
-        name = _this$state.name,
-        description = _this$state.description;
-      var _this$props = _this.props,
-        onSave = _this$props.onSave,
-        texts = _this$props.texts;
-      if (name.value !== '') {
-        _this.setState(DEFAULT_STATE);
-        onSave({
-          name: name.value,
-          description: description.value
-        });
-      } else {
-        _this.setState({
-          name: _extends({}, name, {
-            error: texts.mustNotBeEmpty
-          })
-        });
-      }
-    };
-    return _this;
-  }
-  _inheritsLoose(ColumnManagerActions, _React$Component);
-  var _proto = ColumnManagerActions.prototype;
-  _proto.render = function render() {
-    var _this$props2 = this.props,
-      texts = _this$props2.texts,
-      onCancel = _this$props2.onCancel,
-      onApply = _this$props2.onApply;
-    var _this$state2 = this.state,
-      modalVisible = _this$state2.modalVisible,
-      name = _this$state2.name,
-      description = _this$state2.description;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.ColumnManagerActions, null, /*#__PURE__*/React.createElement(Button, {
-      type: "secondary",
-      mode: "simple",
-      onClick: this.handleShowModal
-    }, texts.saveView), /*#__PURE__*/React.createElement(S.RightButtons, null, /*#__PURE__*/React.createElement(Button, {
-      "data-testid": "ds-column-manager-cancel",
-      type: "ghost",
-      mode: "simple",
-      onClick: onCancel
-    }, texts.cancel), /*#__PURE__*/React.createElement(Button, {
-      "data-testid": "ds-column-manager-apply",
-      type: "primary",
-      mode: "simple",
-      onClick: onApply
-    }, texts.apply))), /*#__PURE__*/React.createElement(Modal, {
-      visible: modalVisible,
-      onCancel: this.handleCancel,
-      title: texts.saveView,
-      footer: /*#__PURE__*/React.createElement(S.ModalFooter, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
-        "data-testid": "ds-modal-cancel",
-        type: "ghost",
-        onClick: this.handleCancel
-      }, texts.cancel), /*#__PURE__*/React.createElement(Button, {
-        "data-testid": "ds-modal-apply",
-        type: "primary",
-        onClick: this.handleSubmit
-      }, texts.apply)))
-    }, /*#__PURE__*/React.createElement(S.Form, null, /*#__PURE__*/React.createElement(Input, {
-      name: "name",
-      onChange: this.handleChange,
-      value: name.value,
-      label: texts.viewName,
-      placeholder: texts.viewNamePlaceholder,
-      errorText: name.error
-    }), /*#__PURE__*/React.createElement(TextArea, {
-      name: "description",
-      value: description.value,
-      onChange: this.handleChange,
-      label: texts.viewDescription,
-      placeholder: texts.viewDescriptionPlaceholder,
-      rows: 2
-    }))));
-  };
-  return ColumnManagerActions;
-}(React.Component);
-export default ColumnManagerActions;
+export var ColumnManagerActions = function ColumnManagerActions(_ref) {
+  var texts = _ref.texts,
+    onApply = _ref.onApply,
+    onCancel = _ref.onCancel;
+  return /*#__PURE__*/React.createElement(S.ColumnManagerActions, null, /*#__PURE__*/React.createElement(S.RightButtons, null, /*#__PURE__*/React.createElement(Button, {
+    "data-testid": "ds-column-manager-cancel",
+    type: "ghost",
+    mode: "simple",
+    onClick: onCancel
+  }, texts.cancel), /*#__PURE__*/React.createElement(Button, {
+    "data-testid": "ds-column-manager-apply",
+    type: "primary",
+    mode: "simple",
+    onClick: onApply
+  }, texts.apply)));
+};

package/dist/ColumnManagerActions/ColumnManagerActions.styles.d.ts

@@ -1,4 +1,2 @@
 export declare const ColumnManagerActions: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const RightButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Form: import("styled-components").StyledComponent<"form", any, {}, never>;
-export declare const ModalFooter: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/ColumnManagerActions/ColumnManagerActions.styles.js

@@ -1,20 +1,11 @@
 import styled from 'styled-components';
-import { OuterWrapper } from '@synerise/ds-input/dist/Input.styles';
 export var ColumnManagerActions = styled.div.withConfig({
   displayName: "ColumnManagerActionsstyles__ColumnManagerActions",
   componentId: "sc-1vmwevx-0"
-})(["display:flex;flex-direction:row;align-items:center;justify-content:space-between;background-color:", ";padding:24px;position:absolute;width:100%;bottom:0;"], function (props) {
+})(["display:flex;flex:0 0 80px;flex-direction:row;align-items:center;justify-content:flex-end;background-color:", ";padding:24px;"], function (props) {
   return props.theme.palette['grey-050'];
 });
 export var RightButtons = styled.div.withConfig({
   displayName: "ColumnManagerActionsstyles__RightButtons",
   componentId: "sc-1vmwevx-1"
-})(["display:flex;flex-direction:row;align-items:center;justify-content:flex-end;button{margin-left:8px;}"]);
-export var Form = styled.form.withConfig({
-  displayName: "ColumnManagerActionsstyles__Form",
-  componentId: "sc-1vmwevx-2"
-})(["display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;width:282px;margin:16px auto 0;", "{margin-bottom:24px;}"], OuterWrapper);
-export var ModalFooter = styled.div.withConfig({
-  displayName: "ColumnManagerActionsstyles__ModalFooter",
-  componentId: "sc-1vmwevx-3"
-})(["display:flex;flex-wrap:nowrap;flex-direction:row;align-items:center;justify-content:flex-end;> div{display:flex;}"]);
+})(["display:flex;flex-direction:row;align-items:center;justify-content:flex-end;button{margin-left:8px;}"]);

package/dist/ColumnManagerActions/ColumnManagerActions.types.d.ts

@@ -1,20 +1,6 @@
-import React from 'react';
-import { ViewMeta } from '../ColumnManager.types';
-export type Props = {
-    onSave: (viewMeta: ViewMeta) => void;
+import { ColumnManagerTexts } from '../ColumnManager.types';
+export type ColumnManagerActionsProps = {
     onApply: () => void;
     onCancel: () => void;
-    texts: {
-        [k: string]: string | React.ReactNode;
-    };
-};
-export declare const INPUT_NAMES: readonly ["name", "description"];
-export type FormFields = {
-    [k in typeof INPUT_NAMES[number]]: {
-        value: string;
-        error: string | React.ReactNode;
-    };
-};
-export type State = FormFields & {
-    modalVisible: boolean;
+    texts: ColumnManagerTexts;
 };

package/dist/ColumnManagerActions/ColumnManagerActions.types.js

@@ -1 +1 @@
-export var INPUT_NAMES = ['name', 'description'];
+export {};

package/dist/ColumnManagerItem/ColumManagerItem.types.d.ts

@@ -1,24 +1,24 @@
-import type { ReactText, ReactNode } from 'react';
-import type { ThemePropsVars } from '@synerise/ds-core';
-export type ColumnType = string | 'text' | 'number' | 'date' | 'boolean' | 'list';
+import type { DraggableAttributes, DraggableSyntheticListeners } from '@dnd-kit/core';
+import type { ColumnManagerTexts } from '../ColumnManager.types';
+export type ColumnIconType = string | 'text' | 'number' | 'date' | 'boolean' | 'list';
 export type Column = {
     id: string;
-    key: ReactText;
     name: string;
     visible: boolean;
-    type: ColumnType;
-    fixed?: string | 'left' | 'right';
-    group?: boolean;
+    readOnly?: boolean;
+    type?: ColumnIconType;
 };
-export type ColumnProps = {
-    setFixed: (id: string, fixed?: string) => void;
-    showGroupSettings: (item: Column) => void;
+export type ColumnManagerItemProps<ColumnType extends Column> = {
     draggable?: boolean;
+    isDragged?: boolean;
     switchAction: (id: string, visible: boolean) => void;
     searchQuery?: string;
-    item: Column;
-    texts: {
-        [k: string]: ReactNode;
+    item: ColumnType;
+    texts: ColumnManagerTexts;
+    index?: number;
+    dragHandleProps?: {
+        attributes: DraggableAttributes;
+        listeners: DraggableSyntheticListeners;
     };
-    theme: ThemePropsVars;
+    id: string | number;
 };

package/dist/ColumnManagerItem/ColumnManagerItem.d.ts

@@ -1,15 +1,4 @@
 import React from 'react';
-declare const _default: React.ForwardRefExoticComponent<{
-    draggable?: boolean | undefined;
-    texts: {
-        [k: string]: React.ReactNode;
-    };
-    item: import("./ColumManagerItem.types").Column;
-    setFixed: (id: string, fixed?: string | undefined) => void;
-    switchAction: (id: string, visible: boolean) => void;
-    searchQuery?: string | undefined;
-    showGroupSettings: (item: import("./ColumManagerItem.types").Column) => void;
-} & {
-    theme?: any;
-}>;
-export default _default;
+import { Column, ColumnManagerItemProps } from './ColumManagerItem.types';
+export declare const ColumnManagerItem: <ColumnType extends Column>({ item, switchAction, draggable, searchQuery, texts, dragHandleProps, id, isDragged, ...rest }: ColumnManagerItemProps<ColumnType>) => React.JSX.Element;
+export default ColumnManagerItem;

package/dist/ColumnManagerItem/ColumnManagerItem.js

@@ -1,18 +1,14 @@
-var _excluded = ["item", "theme", "setFixed", "switchAction", "draggable", "searchQuery", "texts", "showGroupSettings"];
+var _excluded = ["item", "switchAction", "draggable", "searchQuery", "texts", "dragHandleProps", "id", "isDragged"];
+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 _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { useMemo } from 'react';
-import { withTheme } from 'styled-components';
-import Icon, { CheckS, DividerM, DragHandleM, Grid4M, Grid5M, OptionHorizontalM, PinM, VarTypeBooleanM, VarTypeDateM, VarTypeListM, VarTypeNumberM, VarTypeStringM } from '@synerise/ds-icon';
-import Switch from '@synerise/ds-switch';
-import Dropdown from '@synerise/ds-dropdown';
-import Button from '@synerise/ds-button';
+import { useTheme } from '@synerise/ds-core';
+import Icon, { DragHandleM, VarTypeBooleanM, VarTypeDateM, VarTypeListM, VarTypeNumberM, VarTypeStringM } from '@synerise/ds-icon';
+import { RawSwitch } from '@synerise/ds-switch';
 import { escapeRegEx } from '@synerise/ds-utils';
 import Tooltip from '@synerise/ds-tooltip';
 import * as S from './ColumnManagerItem.styles';
-var FIXED_TYPES = {
-  left: 'left',
-  right: 'right'
-};
+var DEFAULT_TYPE = 'text';
 var typeIcon = {
   text: /*#__PURE__*/React.createElement(VarTypeStringM, null),
   number: /*#__PURE__*/React.createElement(VarTypeNumberM, null),
@@ -20,16 +16,17 @@ var typeIcon = {
   "boolean": /*#__PURE__*/React.createElement(VarTypeBooleanM, null),
   list: /*#__PURE__*/React.createElement(VarTypeListM, null)
 };
-var ColumnManagerItem = function ColumnManagerItem(_ref) {
+export var ColumnManagerItem = function ColumnManagerItem(_ref) {
   var item = _ref.item,
-    theme = _ref.theme,
-    setFixed = _ref.setFixed,
     switchAction = _ref.switchAction,
     draggable = _ref.draggable,
     searchQuery = _ref.searchQuery,
     texts = _ref.texts,
-    showGroupSettings = _ref.showGroupSettings,
+    dragHandleProps = _ref.dragHandleProps,
+    id = _ref.id,
+    isDragged = _ref.isDragged,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var theme = useTheme();
   var columnName = useMemo(function () {
     if (searchQuery) {
       var escapedQuery = escapeRegEx(searchQuery);
@@ -39,55 +36,16 @@ var ColumnManagerItem = function ColumnManagerItem(_ref) {
     }
     return item.name;
   }, [item.name, searchQuery]);
-  var menuDataSource = useMemo(function () {
-    return [{
-      onClick: function onClick() {
-        return setFixed(item.id, FIXED_TYPES.left);
-      },
-      prefixel: /*#__PURE__*/React.createElement(Icon, {
-        component: /*#__PURE__*/React.createElement(Grid4M, null),
-        color: theme.palette['grey-600']
-      }),
-      suffixel: item.fixed === FIXED_TYPES.left && /*#__PURE__*/React.createElement(Icon, {
-        component: /*#__PURE__*/React.createElement(CheckS, null),
-        color: theme.palette['green-600']
-      }),
-      text: texts.fixedLeft
-    }, {
-      onClick: function onClick() {
-        return setFixed(item.id, FIXED_TYPES.right);
-      },
-      prefixel: /*#__PURE__*/React.createElement(Icon, {
-        component: /*#__PURE__*/React.createElement(Grid5M, null),
-        color: theme.palette['grey-600']
-      }),
-      suffixel: item.fixed === FIXED_TYPES.right && /*#__PURE__*/React.createElement(Icon, {
-        component: /*#__PURE__*/React.createElement(CheckS, null),
-        color: theme.palette['green-600']
-      }),
-      text: texts.fixedRight
-    }, {
-      onClick: function onClick() {
-        return showGroupSettings(item);
-      },
-      prefixel: /*#__PURE__*/React.createElement(Icon, {
-        component: /*#__PURE__*/React.createElement(DividerM, null),
-        color: theme.palette['grey-600']
-      }),
-      suffixel: item.group && /*#__PURE__*/React.createElement(Icon, {
-        component: /*#__PURE__*/React.createElement(CheckS, null),
-        color: theme.palette['green-600']
-      }),
-      text: texts.group
-    }];
-  }, [item, setFixed, showGroupSettings, texts.fixedLeft, texts.fixedRight, texts.group, theme.palette]);
-  return /*#__PURE__*/React.createElement(S.ColumnManagerItem, rest, /*#__PURE__*/React.createElement(S.ItemPart, {
+  return /*#__PURE__*/React.createElement(S.ColumnManagerItem, _extends({
+    "data-testid": "ds-column-manager-item",
+    isDragged: isDragged
+  }, rest), /*#__PURE__*/React.createElement(S.ItemPart, {
     align: "left"
-  }, draggable && /*#__PURE__*/React.createElement(S.DragHandler, {
+  }, draggable && /*#__PURE__*/React.createElement(S.DragHandler, _extends({
     component: /*#__PURE__*/React.createElement(DragHandleM, null),
     color: theme.palette['grey-400']
-  }), /*#__PURE__*/React.createElement(Icon, {
-    component: typeIcon[item.type],
+  }, dragHandleProps == null ? void 0 : dragHandleProps.attributes, dragHandleProps == null ? void 0 : dragHandleProps.listeners)), /*#__PURE__*/React.createElement(Icon, {
+    component: typeIcon[item.type || DEFAULT_TYPE],
     color: theme.palette['grey-600']
   }), /*#__PURE__*/React.createElement(S.ColumnManagerItemName, {
     dangerouslySetInnerHTML: {
@@ -95,31 +53,16 @@ var ColumnManagerItem = function ColumnManagerItem(_ref) {
     }
   })), /*#__PURE__*/React.createElement(S.ItemPart, {
     align: "right"
-  }, /*#__PURE__*/React.createElement(S.Icons, null, item.group && /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(DividerM, null),
-    color: theme.palette['grey-400']
-  }), item.fixed && /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(PinM, null),
-    color: theme.palette['grey-400']
-  })), item.visible && /*#__PURE__*/React.createElement(Dropdown, {
-    overlay: /*#__PURE__*/React.createElement(S.FixedMenu, {
-      dataSource: menuDataSource
-    })
-  }, /*#__PURE__*/React.createElement(Button, {
-    type: "ghost",
-    mode: "single-icon"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(OptionHorizontalM, null),
-    color: theme.palette['grey-700']
-  }))), /*#__PURE__*/React.createElement(Tooltip, {
+  }, /*#__PURE__*/React.createElement(Tooltip, {
     title: item.visible ? texts.switchOff : texts.switchOn,
-    placement: "topRight"
-  }, /*#__PURE__*/React.createElement(Switch, {
+    placement: "topRight",
+    disabled: item.readOnly
+  }, /*#__PURE__*/React.createElement(RawSwitch, {
+    disabled: item.readOnly,
     checked: item.visible,
-    label: "",
     onChange: function onChange() {
-      return switchAction(item.id, item.visible);
+      return switchAction(item.id, !item.visible);
     }
   }))));
 };
-export default withTheme(ColumnManagerItem);
+export default ColumnManagerItem;

package/dist/ColumnManagerItem/ColumnManagerItem.styles.d.ts

@@ -5,6 +5,8 @@ export declare const Icons: import("styled-components").StyledComponent<"div", a
 export declare const ItemPart: import("styled-components").StyledComponent<"div", any, {
     align: string;
 }, never>;
-export declare const ColumnManagerItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ColumnManagerItem: import("styled-components").StyledComponent<"div", any, {
+    isDragged?: boolean | undefined;
+}, never>;
 export declare const ColumnManagerItemName: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const FixedMenu: import("styled-components").StyledComponent<typeof Menu, any, {}, never>;

package/dist/ColumnManagerItem/ColumnManagerItem.styles.js

@@ -4,7 +4,7 @@ import Menu from '@synerise/ds-menu';
 export var DragHandler = styled(Icon).withConfig({
   displayName: "ColumnManagerItemstyles__DragHandler",
   componentId: "sc-12ob8aa-0"
-})(["position:absolute;top:16px;left:-24px;opacity:0;"]);
+})(["position:absolute;top:16px;left:-24px;opacity:0;cursor:pointer;"]);
 export var Icons = styled.div.withConfig({
   displayName: "ColumnManagerItemstyles__Icons",
   componentId: "sc-12ob8aa-1"
@@ -22,8 +22,12 @@ export var ItemPart = styled.div.withConfig({
 export var ColumnManagerItem = styled.div.withConfig({
   displayName: "ColumnManagerItemstyles__ColumnManagerItem",
   componentId: "sc-12ob8aa-3"
-})(["display:flex;flex-direction:row;align-items:center;height:56px;justify-content:space-between;width:100%;padding:13px 24px;position:relative;border-bottom:1px solid ", ";&:hover{background-color:", ";&:before{width:2px;position:absolute;top:0;left:0;height:100%;background-color:", ";content:'';}", "{opacity:1;}", "{display:none;}&&{.ds-button{visibility:visible;opacity:1;}}}&&{.ds-button{position:absolute;right:36px;top:12px;display:flex;visibility:hidden;opacity:0;transition:all 0s;}}"], function (props) {
+})(["display:flex;flex-direction:row;align-items:center;height:56px;justify-content:space-between;width:100%;padding:13px 24px;position:relative;background:", ";border-bottom:1px solid ", ";", " &:hover{background-color:", ";&:before{width:2px;position:absolute;top:0;left:0;height:100%;background-color:", ";content:'';}", "{opacity:1;}", "{display:none;}&&{.ds-button{visibility:visible;opacity:1;}}}&&{.ds-button{position:absolute;right:36px;top:12px;display:flex;visibility:hidden;opacity:0;transition:all 0s;}}"], function (props) {
+  return props.theme.palette.white;
+}, function (props) {
   return props.theme.palette['grey-200'];
+}, function (props) {
+  return props.isDragged && "\n      opacity: 0;\n    ";
 }, function (props) {
   return props.theme.palette['grey-050'];
 }, function (props) {

package/dist/ColumnManagerList/ColumnManager.style.d.ts

@@ -1,2 +1,7 @@
+import { FixedSizeList } from 'react-window';
 export declare const ColumnManagerList: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ListHeadline: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const List: import("styled-components").StyledComponent<typeof FixedSizeList, any, {
+    maxHeight?: number | undefined;
+    isDragging?: boolean | undefined;
+}, never>;

package/dist/ColumnManagerList/ColumnManager.style.js

@@ -1,14 +1,9 @@
 import styled from 'styled-components';
+import { FixedSizeList } from 'react-window';
 export var ColumnManagerList = styled.div.withConfig({
   displayName: "ColumnManagerstyle__ColumnManagerList",
   componentId: "sc-8vnyk-0"
-})(["display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;width:100%;& > .sortable-list{width:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;}.sortable-chosen{cursor:grabbing;background-color:", ";opacity:1;}.sortable-drag{opacity:1 !important;box-shadow:0 16px 32px 0 rgba(35,41,54,0.1);}.sortable-list-ghost-element{background-color:", ";&:hover{background-color:", ";}opacity:1;cursor:grabbing;*{visibility:hidden;}}"], function (props) {
-  return props.theme.palette.white;
-}, function (props) {
-  return props.theme.palette['blue-050'];
-}, function (props) {
-  return props.theme.palette['blue-050'];
-});
+})(["display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;width:100%;height:100%;"]);
 export var ListHeadline = styled.span.withConfig({
   displayName: "ColumnManagerstyle__ListHeadline",
   componentId: "sc-8vnyk-1"
@@ -16,4 +11,16 @@ export var ListHeadline = styled.span.withConfig({
   return props.theme.palette['grey-200'];
 }, function (props) {
   return props.theme.palette['grey-800'];
+});
+export var List = styled(FixedSizeList).withConfig({
+  displayName: "ColumnManagerstyle__List",
+  componentId: "sc-8vnyk-2"
+})(["overflow-x:unset;overflow-y:unset;height:auto !important;background:", ";box-shadow:2px 0 0 0 ", " inset;", " ", ""], function (props) {
+  return props.theme.palette['blue-050'];
+}, function (props) {
+  return props.theme.palette['blue-600'];
+}, function (props) {
+  return props.maxHeight !== undefined && "max-height: " + props.maxHeight + "px;";
+}, function (props) {
+  return props.isDragging && "user-select: none;";
 });

package/dist/ColumnManagerList/ColumnManagerList.d.ts

@@ -1,4 +1,6 @@
-import React from 'react';
-import { Props } from './ColumnManagerList.types';
-declare const ColumnManagerList: React.FC<Props>;
+import React, { CSSProperties } from 'react';
+import { ColumnManagerListProps } from './ColumnManagerList.types';
+import type { Column } from '../ColumnManagerItem/ColumManagerItem.types';
+export declare const LIST_STYLE: CSSProperties;
+declare const ColumnManagerList: <ColumnType extends Column>({ searchQuery, columns, draggable, handleOrderChange, toggleColumn, texts, }: ColumnManagerListProps<ColumnType>) => React.JSX.Element;
 export default ColumnManagerList;