@synerise/ds-column-manager 1.2.47 → 1.2.48

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 (37) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/dist/ColumnManager.d.ts +2 -2
  3. package/dist/ColumnManager.js +59 -101
  4. package/dist/ColumnManager.styles.d.ts +4 -4
  5. package/dist/ColumnManager.styles.js +12 -7
  6. package/dist/ColumnManager.types.d.ts +1 -1
  7. package/dist/ColumnManager.types.js +1 -1
  8. package/dist/ColumnManagerActions/ColumnManagerActions.d.ts +2 -2
  9. package/dist/ColumnManagerActions/ColumnManagerActions.js +16 -19
  10. package/dist/ColumnManagerActions/ColumnManagerActions.styles.d.ts +2 -2
  11. package/dist/ColumnManagerActions/ColumnManagerActions.styles.js +9 -7
  12. package/dist/ColumnManagerActions/ColumnManagerActions.types.d.ts +1 -1
  13. package/dist/ColumnManagerActions/ColumnManagerActions.types.js +1 -1
  14. package/dist/ColumnManagerItem/ColumManagerItem.types.d.ts +2 -2
  15. package/dist/ColumnManagerItem/ColumManagerItem.types.js +1 -1
  16. package/dist/ColumnManagerItem/ColumnManagerItem.const.js +16 -11
  17. package/dist/ColumnManagerItem/ColumnManagerItem.d.ts +3 -3
  18. package/dist/ColumnManagerItem/ColumnManagerItem.js +41 -57
  19. package/dist/ColumnManagerItem/ColumnManagerItem.styles.d.ts +7 -7
  20. package/dist/ColumnManagerItem/ColumnManagerItem.styles.js +23 -33
  21. package/dist/ColumnManagerList/ColumnManager.style.d.ts +4 -4
  22. package/dist/ColumnManagerList/ColumnManager.style.js +12 -19
  23. package/dist/ColumnManagerList/ColumnManagerList.d.ts +3 -3
  24. package/dist/ColumnManagerList/ColumnManagerList.js +57 -84
  25. package/dist/ColumnManagerList/ColumnManagerList.types.d.ts +2 -2
  26. package/dist/ColumnManagerList/ColumnManagerList.types.js +1 -1
  27. package/dist/ColumnManagerSortableItem/ColumnManagerSortableItem.d.ts +3 -3
  28. package/dist/ColumnManagerSortableItem/ColumnManagerSortableItem.js +35 -34
  29. package/dist/ColumnManagerSortableItem/ColumnManagerSortableItem.types.d.ts +3 -3
  30. package/dist/ColumnManagerSortableItem/ColumnManagerSortableItem.types.js +1 -1
  31. package/dist/hooks/useTranslations.d.ts +1 -1
  32. package/dist/hooks/useTranslations.js +29 -26
  33. package/dist/index.js +4 -2
  34. package/dist/modules.d.js +1 -1
  35. package/dist/modules.d.ts +0 -0
  36. package/dist/utils/matchesSearchQuery.js +5 -2
  37. package/package.json +17 -17
package/CHANGELOG.md CHANGED
@@ -3,6 +3,10 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [1.2.48](https://github.com/Synerise/synerise-design/compare/@synerise/ds-column-manager@1.2.47...@synerise/ds-column-manager@1.2.48) (2026-03-24)
7
+
8
+ **Note:** Version bump only for package @synerise/ds-column-manager
9
+
6
10
  ## [1.2.47](https://github.com/Synerise/synerise-design/compare/@synerise/ds-column-manager@1.2.46...@synerise/ds-column-manager@1.2.47) (2026-03-20)
7
11
 
8
12
  **Note:** Version bump only for package @synerise/ds-column-manager
@@ -1,4 +1,4 @@
1
- import React from 'react';
2
- import type { Column, ColumnManagerProps } from './ColumnManager.types';
1
+ import { default as React } from 'react';
2
+ import { Column, ColumnManagerProps } from './ColumnManager.types';
3
3
  declare const ColumnManager: <ColumnType extends Column>({ columns, texts: customTexts, onApply, visible, hide, draggable, }: ColumnManagerProps<ColumnType>) => React.JSX.Element;
4
4
  export default ColumnManager;
@@ -1,118 +1,76 @@
1
- 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); }
2
- import React, { useEffect, useMemo, useState } from 'react';
3
- import Button from '@synerise/ds-button';
4
- import { useTheme } from '@synerise/ds-core';
5
- import Drawer from '@synerise/ds-drawer';
6
- import Icon, { CloseM, SearchM } from '@synerise/ds-icon';
7
- import { Title } from '@synerise/ds-typography';
8
- import * as S from './ColumnManager.styles';
9
- import { ColumnManagerActions } from './ColumnManagerActions/ColumnManagerActions';
10
- import ColumnManagerList from './ColumnManagerList/ColumnManagerList';
11
- import { useTranslations } from './hooks/useTranslations';
12
- import { matchesSearchQuery } from './utils/matchesSearchQuery';
13
- var ColumnManager = function ColumnManager(_ref) {
14
- var columns = _ref.columns,
15
- customTexts = _ref.texts,
16
- onApply = _ref.onApply,
17
- visible = _ref.visible,
18
- hide = _ref.hide,
19
- _ref$draggable = _ref.draggable,
20
- draggable = _ref$draggable === void 0 ? true : _ref$draggable;
21
- var _useState = useState(''),
22
- searchQuery = _useState[0],
23
- setSearchQuery = _useState[1];
24
- var _useState2 = useState(columns),
25
- currentColumns = _useState2[0],
26
- setCurrentColumns = _useState2[1];
27
- var texts = useTranslations(customTexts);
28
- var theme = useTheme();
29
- useEffect(function () {
1
+ import { jsxs, jsx } from "react/jsx-runtime";
2
+ import { useState, useEffect, useMemo } from "react";
3
+ import Button from "@synerise/ds-button";
4
+ import { useTheme } from "@synerise/ds-core";
5
+ import Drawer from "@synerise/ds-drawer";
6
+ import Icon, { CloseM, SearchM } from "@synerise/ds-icon";
7
+ import { Title } from "@synerise/ds-typography";
8
+ import { ColumnManager as ColumnManager$1, SearchBar, ColumnManagerListWrapper } from "./ColumnManager.styles.js";
9
+ import { ColumnManagerActions } from "./ColumnManagerActions/ColumnManagerActions.js";
10
+ import ColumnManagerList from "./ColumnManagerList/ColumnManagerList.js";
11
+ import { useTranslations } from "./hooks/useTranslations.js";
12
+ import { matchesSearchQuery } from "./utils/matchesSearchQuery.js";
13
+ const ColumnManager = ({
14
+ columns,
15
+ texts: customTexts,
16
+ onApply,
17
+ visible,
18
+ hide,
19
+ draggable = true
20
+ }) => {
21
+ const [searchQuery, setSearchQuery] = useState("");
22
+ const [currentColumns, setCurrentColumns] = useState(columns);
23
+ const texts = useTranslations(customTexts);
24
+ const theme = useTheme();
25
+ useEffect(() => {
30
26
  setCurrentColumns(columns);
31
27
  }, [columns]);
32
- useEffect(function () {
28
+ useEffect(() => {
33
29
  if (!visible) {
34
30
  setCurrentColumns(columns);
35
31
  }
36
- // eslint-disable-next-line react-hooks/exhaustive-deps
37
32
  }, [visible]);
38
- var handleApply = function handleApply() {
33
+ const handleApply = () => {
39
34
  onApply(currentColumns);
40
35
  };
41
- var handleCancel = function handleCancel() {
36
+ const handleCancel = () => {
42
37
  hide();
43
38
  };
44
- var handleToggleColumn = function handleToggleColumn(id, updatedVisible) {
45
- setCurrentColumns(currentColumns.map(function (column) {
46
- return column.id === id ? _extends({}, column, {
47
- visible: updatedVisible
48
- }) : column;
49
- }));
39
+ const handleToggleColumn = (id, updatedVisible) => {
40
+ setCurrentColumns(currentColumns.map((column) => column.id === id ? {
41
+ ...column,
42
+ visible: updatedVisible
43
+ } : column));
50
44
  };
51
- var handleOrderChange = function handleOrderChange(newOrder) {
52
- var idOrder = newOrder.map(function (item) {
53
- return item.id;
54
- });
55
- var updatedColumns = [].concat(currentColumns).sort(function (a, b) {
56
- return idOrder.indexOf(a.id) - idOrder.indexOf(b.id);
57
- });
45
+ const handleOrderChange = (newOrder) => {
46
+ const idOrder = newOrder.map((item) => item.id);
47
+ const updatedColumns = [...currentColumns].sort((a, b) => idOrder.indexOf(a.id) - idOrder.indexOf(b.id));
58
48
  setCurrentColumns(updatedColumns);
59
49
  };
60
- var handleSearchChange = function handleSearchChange(query) {
50
+ const handleSearchChange = (query) => {
61
51
  setSearchQuery(query);
62
52
  };
63
- var filteredColumns = useMemo(function () {
64
- return searchQuery ? currentColumns.filter(function (column) {
65
- return matchesSearchQuery(column.name, searchQuery);
66
- }) : currentColumns;
53
+ const filteredColumns = useMemo(() => {
54
+ return searchQuery ? currentColumns.filter((column) => matchesSearchQuery(column.name, searchQuery)) : currentColumns;
67
55
  }, [currentColumns, searchQuery]);
68
- return /*#__PURE__*/React.createElement(S.ColumnManager, {
69
- visible: visible,
70
- width: 338,
71
- onClose: hide
72
- }, /*#__PURE__*/React.createElement(Drawer.DrawerHeader, null, /*#__PURE__*/React.createElement(Drawer.DrawerHeaderBar, null, /*#__PURE__*/React.createElement(Title, {
73
- style: {
74
- flex: 1,
75
- margin: 0
76
- },
77
- level: 4
78
- }, texts.title), /*#__PURE__*/React.createElement(Button, {
79
- "data-testid": "ds-column-manager-close",
80
- style: {
81
- marginLeft: '8px'
82
- },
83
- mode: "single-icon",
84
- type: "ghost",
85
- onClick: hide
86
- }, /*#__PURE__*/React.createElement(Icon, {
87
- component: /*#__PURE__*/React.createElement(CloseM, null)
88
- })))), /*#__PURE__*/React.createElement(S.SearchBar, {
89
- onSearchChange: handleSearchChange,
90
- placeholder: texts.searchPlaceholder,
91
- value: searchQuery,
92
- onClearInput: function onClearInput() {
93
- return handleSearchChange('');
94
- },
95
- iconLeft: /*#__PURE__*/React.createElement(Icon, {
96
- component: /*#__PURE__*/React.createElement(SearchM, null),
97
- color: theme.palette['grey-600']
98
- }),
99
- clearTooltip: texts.searchClearTooltip || ''
100
- }), /*#__PURE__*/React.createElement(S.ColumnManagerListWrapper, null, /*#__PURE__*/React.createElement(Drawer.DrawerContent, {
101
- style: {
102
- padding: '0',
103
- height: '100%'
104
- }
105
- }, /*#__PURE__*/React.createElement(ColumnManagerList, {
106
- texts: texts,
107
- draggable: draggable,
108
- handleOrderChange: handleOrderChange,
109
- searchQuery: searchQuery,
110
- columns: filteredColumns,
111
- toggleColumn: handleToggleColumn
112
- }))), /*#__PURE__*/React.createElement(ColumnManagerActions, {
113
- onApply: handleApply,
114
- onCancel: handleCancel,
115
- texts: texts
116
- }));
56
+ return /* @__PURE__ */ jsxs(ColumnManager$1, { visible, width: 338, onClose: hide, children: [
57
+ /* @__PURE__ */ jsx(Drawer.DrawerHeader, { children: /* @__PURE__ */ jsxs(Drawer.DrawerHeaderBar, { children: [
58
+ /* @__PURE__ */ jsx(Title, { style: {
59
+ flex: 1,
60
+ margin: 0
61
+ }, level: 4, children: texts.title }),
62
+ /* @__PURE__ */ jsx(Button, { "data-testid": "ds-column-manager-close", style: {
63
+ marginLeft: "8px"
64
+ }, mode: "single-icon", type: "ghost", onClick: hide, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(CloseM, {}) }) })
65
+ ] }) }),
66
+ /* @__PURE__ */ jsx(SearchBar, { onSearchChange: handleSearchChange, placeholder: texts.searchPlaceholder, value: searchQuery, onClearInput: () => handleSearchChange(""), iconLeft: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(SearchM, {}), color: theme.palette["grey-600"] }), clearTooltip: texts.searchClearTooltip || "" }),
67
+ /* @__PURE__ */ jsx(ColumnManagerListWrapper, { children: /* @__PURE__ */ jsx(Drawer.DrawerContent, { style: {
68
+ padding: "0",
69
+ height: "100%"
70
+ }, children: /* @__PURE__ */ jsx(ColumnManagerList, { texts, draggable, handleOrderChange, searchQuery, columns: filteredColumns, toggleColumn: handleToggleColumn }) }) }),
71
+ /* @__PURE__ */ jsx(ColumnManagerActions, { onApply: handleApply, onCancel: handleCancel, texts })
72
+ ] });
73
+ };
74
+ export {
75
+ ColumnManager as default
117
76
  };
118
- export default ColumnManager;
@@ -1,5 +1,5 @@
1
- import Drawer from '@synerise/ds-drawer';
2
- import { type StyledSearchBar } from '@synerise/ds-search-bar';
3
- export declare const ColumnManager: import("styled-components").StyledComponent<typeof Drawer, any, {}, never>;
1
+ import { default as Drawer } from '@synerise/ds-drawer';
2
+ import { StyledSearchBar } from '@synerise/ds-search-bar';
3
+ export declare const ColumnManager: import('styled-components').StyledComponent<typeof Drawer, any, {}, never>;
4
4
  export declare const SearchBar: StyledSearchBar;
5
- export declare const ColumnManagerListWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
5
+ export declare const ColumnManagerListWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
@@ -1,15 +1,20 @@
1
- import styled from 'styled-components';
2
- import Drawer from '@synerise/ds-drawer';
3
- import SearchBarBase from '@synerise/ds-search-bar';
4
- export var ColumnManager = styled(Drawer).withConfig({
1
+ import styled from "styled-components";
2
+ import Drawer from "@synerise/ds-drawer";
3
+ import SearchBarBase from "@synerise/ds-search-bar";
4
+ const ColumnManager = /* @__PURE__ */ styled(Drawer).withConfig({
5
5
  displayName: "ColumnManagerstyles__ColumnManager",
6
6
  componentId: "sc-4cxi70-0"
7
7
  })([""]);
8
- export var SearchBar = styled(SearchBarBase).withConfig({
8
+ const SearchBar = /* @__PURE__ */ styled(SearchBarBase).withConfig({
9
9
  displayName: "ColumnManagerstyles__SearchBar",
10
10
  componentId: "sc-4cxi70-1"
11
11
  })(["min-height:52px;height:52px;"]);
12
- export var ColumnManagerListWrapper = styled.div.withConfig({
12
+ const ColumnManagerListWrapper = /* @__PURE__ */ styled.div.withConfig({
13
13
  displayName: "ColumnManagerstyles__ColumnManagerListWrapper",
14
14
  componentId: "sc-4cxi70-2"
15
- })(["flex:1 1 auto;min-height:0;"]);
15
+ })(["flex:1 1 auto;min-height:0;"]);
16
+ export {
17
+ ColumnManager,
18
+ ColumnManagerListWrapper,
19
+ SearchBar
20
+ };
@@ -1,4 +1,4 @@
1
- import type { ReactNode } from 'react';
1
+ import { ReactNode } from 'react';
2
2
  export type Column = {
3
3
  id: string;
4
4
  name: string;
@@ -1 +1 @@
1
- export {};
1
+
@@ -1,3 +1,3 @@
1
- import React from 'react';
2
- import { type ColumnManagerActionsProps } from './ColumnManagerActions.types';
1
+ import { default as React } from 'react';
2
+ import { ColumnManagerActionsProps } from './ColumnManagerActions.types';
3
3
  export declare const ColumnManagerActions: ({ texts, onApply, onCancel, }: ColumnManagerActionsProps) => React.JSX.Element;
@@ -1,19 +1,16 @@
1
- import React from 'react';
2
- import Button from '@synerise/ds-button';
3
- import * as S from './ColumnManagerActions.styles';
4
- export var ColumnManagerActions = function ColumnManagerActions(_ref) {
5
- var texts = _ref.texts,
6
- onApply = _ref.onApply,
7
- onCancel = _ref.onCancel;
8
- return /*#__PURE__*/React.createElement(S.ColumnManagerActions, null, /*#__PURE__*/React.createElement(S.RightButtons, null, /*#__PURE__*/React.createElement(Button, {
9
- "data-testid": "ds-column-manager-cancel",
10
- type: "ghost",
11
- mode: "simple",
12
- onClick: onCancel
13
- }, texts.cancel), /*#__PURE__*/React.createElement(Button, {
14
- "data-testid": "ds-column-manager-apply",
15
- type: "primary",
16
- mode: "simple",
17
- onClick: onApply
18
- }, texts.apply)));
19
- };
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
+ import Button from "@synerise/ds-button";
3
+ import { ColumnManagerActions as ColumnManagerActions$1, RightButtons } from "./ColumnManagerActions.styles.js";
4
+ const ColumnManagerActions = ({
5
+ texts,
6
+ onApply,
7
+ onCancel
8
+ }) => {
9
+ return /* @__PURE__ */ jsx(ColumnManagerActions$1, { children: /* @__PURE__ */ jsxs(RightButtons, { children: [
10
+ /* @__PURE__ */ jsx(Button, { "data-testid": "ds-column-manager-cancel", type: "ghost", mode: "simple", onClick: onCancel, children: texts.cancel }),
11
+ /* @__PURE__ */ jsx(Button, { "data-testid": "ds-column-manager-apply", type: "primary", mode: "simple", onClick: onApply, children: texts.apply })
12
+ ] }) });
13
+ };
14
+ export {
15
+ ColumnManagerActions
16
+ };
@@ -1,2 +1,2 @@
1
- export declare const ColumnManagerActions: import("styled-components").StyledComponent<"div", any, {}, never>;
2
- export declare const RightButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
1
+ export declare const ColumnManagerActions: import('styled-components').StyledComponent<"div", any, {}, never>;
2
+ export declare const RightButtons: import('styled-components').StyledComponent<"div", any, {}, never>;
@@ -1,11 +1,13 @@
1
- import styled from 'styled-components';
2
- export var ColumnManagerActions = styled.div.withConfig({
1
+ import styled from "styled-components";
2
+ const ColumnManagerActions = /* @__PURE__ */ styled.div.withConfig({
3
3
  displayName: "ColumnManagerActionsstyles__ColumnManagerActions",
4
4
  componentId: "sc-1vmwevx-0"
5
- })(["display:flex;flex:0 0 80px;flex-direction:row;align-items:center;justify-content:flex-end;background-color:", ";padding:24px;"], function (props) {
6
- return props.theme.palette['grey-050'];
7
- });
8
- export var RightButtons = styled.div.withConfig({
5
+ })(["display:flex;flex:0 0 80px;flex-direction:row;align-items:center;justify-content:flex-end;background-color:", ";padding:24px;"], (props) => props.theme.palette["grey-050"]);
6
+ const RightButtons = /* @__PURE__ */ styled.div.withConfig({
9
7
  displayName: "ColumnManagerActionsstyles__RightButtons",
10
8
  componentId: "sc-1vmwevx-1"
11
- })(["display:flex;flex-direction:row;align-items:center;justify-content:flex-end;button{margin-left:8px;}"]);
9
+ })(["display:flex;flex-direction:row;align-items:center;justify-content:flex-end;button{margin-left:8px;}"]);
10
+ export {
11
+ ColumnManagerActions,
12
+ RightButtons
13
+ };
@@ -1,4 +1,4 @@
1
- import { type ColumnManagerTexts } from '../ColumnManager.types';
1
+ import { ColumnManagerTexts } from '../ColumnManager.types';
2
2
  export type ColumnManagerActionsProps = {
3
3
  onApply: () => void;
4
4
  onCancel: () => void;
@@ -1 +1 @@
1
- export {};
1
+
@@ -1,5 +1,5 @@
1
- import type { DraggableAttributes, DraggableSyntheticListeners } from '@synerise/ds-sortable';
2
- import type { Column, ColumnManagerTexts } from '../ColumnManager.types';
1
+ import { DraggableAttributes, DraggableSyntheticListeners } from '@synerise/ds-sortable';
2
+ import { Column, ColumnManagerTexts } from '../ColumnManager.types';
3
3
  export type ColumnManagerItemProps<ColumnType extends Column> = {
4
4
  draggable?: boolean;
5
5
  isDragged?: boolean;
@@ -1 +1 @@
1
- export {};
1
+
@@ -1,11 +1,16 @@
1
- import React from 'react';
2
- import { VarTypeBooleanM, VarTypeDateM, VarTypeListM, VarTypeNumberM, VarTypeStringM } from '@synerise/ds-icon';
3
- export var DEFAULT_ITEM_TYPE = 'text';
4
- export var TYPES_WITH_ICONS = ['text', 'number', 'date', 'boolean', 'list'];
5
- export var ICON_MAP = {
6
- text: /*#__PURE__*/React.createElement(VarTypeStringM, null),
7
- number: /*#__PURE__*/React.createElement(VarTypeNumberM, null),
8
- date: /*#__PURE__*/React.createElement(VarTypeDateM, null),
9
- "boolean": /*#__PURE__*/React.createElement(VarTypeBooleanM, null),
10
- list: /*#__PURE__*/React.createElement(VarTypeListM, null)
11
- };
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { VarTypeListM, VarTypeBooleanM, VarTypeDateM, VarTypeNumberM, VarTypeStringM } from "@synerise/ds-icon";
3
+ const DEFAULT_ITEM_TYPE = "text";
4
+ const TYPES_WITH_ICONS = ["text", "number", "date", "boolean", "list"];
5
+ const ICON_MAP = {
6
+ text: /* @__PURE__ */ jsx(VarTypeStringM, {}),
7
+ number: /* @__PURE__ */ jsx(VarTypeNumberM, {}),
8
+ date: /* @__PURE__ */ jsx(VarTypeDateM, {}),
9
+ boolean: /* @__PURE__ */ jsx(VarTypeBooleanM, {}),
10
+ list: /* @__PURE__ */ jsx(VarTypeListM, {})
11
+ };
12
+ export {
13
+ DEFAULT_ITEM_TYPE,
14
+ ICON_MAP,
15
+ TYPES_WITH_ICONS
16
+ };
@@ -1,5 +1,5 @@
1
- import React from 'react';
2
- import { type Column } from '../ColumnManager.types';
3
- import { type ColumnManagerItemProps } from './ColumManagerItem.types';
1
+ import { default as React } from 'react';
2
+ import { Column } from '../ColumnManager.types';
3
+ import { ColumnManagerItemProps } from './ColumManagerItem.types';
4
4
  export declare const ColumnManagerItem: <ColumnType extends Column>({ item, switchAction, draggable, searchQuery, texts, dragHandleProps, id, isDragged, ...rest }: ColumnManagerItemProps<ColumnType>) => React.JSX.Element;
5
5
  export default ColumnManagerItem;
@@ -1,62 +1,46 @@
1
- var _excluded = ["item", "switchAction", "draggable", "searchQuery", "texts", "dragHandleProps", "id", "isDragged"];
2
- 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); }
3
- 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; }
4
- import React, { useMemo } from 'react';
5
- import { useTheme } from '@synerise/ds-core';
6
- import Icon, { DragHandleM } from '@synerise/ds-icon';
7
- import { RawSwitch } from '@synerise/ds-switch';
8
- import Tooltip from '@synerise/ds-tooltip';
9
- import { escapeRegEx } from '@synerise/ds-utils';
10
- import { DEFAULT_ITEM_TYPE, ICON_MAP, TYPES_WITH_ICONS } from './ColumnManagerItem.const';
11
- import * as S from './ColumnManagerItem.styles';
12
- export var ColumnManagerItem = function ColumnManagerItem(_ref) {
13
- var item = _ref.item,
14
- switchAction = _ref.switchAction,
15
- draggable = _ref.draggable,
16
- searchQuery = _ref.searchQuery,
17
- texts = _ref.texts,
18
- dragHandleProps = _ref.dragHandleProps,
19
- id = _ref.id,
20
- isDragged = _ref.isDragged,
21
- rest = _objectWithoutPropertiesLoose(_ref, _excluded);
22
- var theme = useTheme();
23
- var iconComponent = ICON_MAP[item.type && TYPES_WITH_ICONS.includes(item.type) ? item.type : DEFAULT_ITEM_TYPE];
24
- var columnName = useMemo(function () {
1
+ import { jsxs, jsx } from "react/jsx-runtime";
2
+ import { useMemo } from "react";
3
+ import { useTheme } from "@synerise/ds-core";
4
+ import Icon, { DragHandleM } from "@synerise/ds-icon";
5
+ import { RawSwitch } from "@synerise/ds-switch";
6
+ import Tooltip from "@synerise/ds-tooltip";
7
+ import { escapeRegEx } from "@synerise/ds-utils";
8
+ import { ICON_MAP, TYPES_WITH_ICONS, DEFAULT_ITEM_TYPE } from "./ColumnManagerItem.const.js";
9
+ import { ColumnManagerItem as ColumnManagerItem$1, ItemPart, DragHandler, ColumnManagerItemName } from "./ColumnManagerItem.styles.js";
10
+ const ColumnManagerItem = ({
11
+ item,
12
+ switchAction,
13
+ draggable,
14
+ searchQuery,
15
+ texts,
16
+ dragHandleProps,
17
+ id,
18
+ isDragged,
19
+ ...rest
20
+ }) => {
21
+ const theme = useTheme();
22
+ const iconComponent = ICON_MAP[item.type && TYPES_WITH_ICONS.includes(item.type) ? item.type : DEFAULT_ITEM_TYPE];
23
+ const columnName = useMemo(() => {
25
24
  if (searchQuery) {
26
- var escapedQuery = escapeRegEx(searchQuery);
27
- var startOfQuery = item.name.toLowerCase().search(escapedQuery.toLowerCase());
28
- var result = item.name.substr(startOfQuery, searchQuery.length);
29
- return item.name.replace(result, "<span class=\"search-highlight\">" + result + "</span>");
25
+ const escapedQuery = escapeRegEx(searchQuery);
26
+ const startOfQuery = item.name.toLowerCase().search(escapedQuery.toLowerCase());
27
+ const result = item.name.substr(startOfQuery, searchQuery.length);
28
+ return item.name.replace(result, `<span class="search-highlight">${result}</span>`);
30
29
  }
31
30
  return item.name;
32
31
  }, [item.name, searchQuery]);
33
- return /*#__PURE__*/React.createElement(S.ColumnManagerItem, _extends({
34
- "data-testid": "ds-column-manager-item",
35
- isDragged: isDragged
36
- }, rest), /*#__PURE__*/React.createElement(S.ItemPart, {
37
- align: "left"
38
- }, draggable && /*#__PURE__*/React.createElement(S.DragHandler, _extends({
39
- component: /*#__PURE__*/React.createElement(DragHandleM, null),
40
- color: theme.palette['grey-400']
41
- }, dragHandleProps == null ? void 0 : dragHandleProps.attributes, dragHandleProps == null ? void 0 : dragHandleProps.listeners)), /*#__PURE__*/React.createElement(Icon, {
42
- component: iconComponent,
43
- color: theme.palette['grey-600']
44
- }), /*#__PURE__*/React.createElement(S.ColumnManagerItemName, {
45
- dangerouslySetInnerHTML: {
46
- __html: columnName
47
- }
48
- })), /*#__PURE__*/React.createElement(S.ItemPart, {
49
- align: "right"
50
- }, /*#__PURE__*/React.createElement(Tooltip, {
51
- title: item.visible ? texts.switchOff : texts.switchOn,
52
- placement: "topRight",
53
- disabled: item.readOnly
54
- }, /*#__PURE__*/React.createElement(RawSwitch, {
55
- disabled: item.readOnly,
56
- checked: item.visible,
57
- onChange: function onChange() {
58
- return switchAction(item.id, !item.visible);
59
- }
60
- }))));
32
+ return /* @__PURE__ */ jsxs(ColumnManagerItem$1, { "data-testid": "ds-column-manager-item", isDragged, ...rest, children: [
33
+ /* @__PURE__ */ jsxs(ItemPart, { align: "left", children: [
34
+ draggable && /* @__PURE__ */ jsx(DragHandler, { component: /* @__PURE__ */ jsx(DragHandleM, {}), color: theme.palette["grey-400"], ...dragHandleProps?.attributes, ...dragHandleProps?.listeners }),
35
+ /* @__PURE__ */ jsx(Icon, { component: iconComponent, color: theme.palette["grey-600"] }),
36
+ /* @__PURE__ */ jsx(ColumnManagerItemName, { dangerouslySetInnerHTML: {
37
+ __html: columnName
38
+ } })
39
+ ] }),
40
+ /* @__PURE__ */ jsx(ItemPart, { align: "right", children: /* @__PURE__ */ jsx(Tooltip, { title: item.visible ? texts.switchOff : texts.switchOn, placement: "topRight", disabled: item.readOnly, children: /* @__PURE__ */ jsx(RawSwitch, { disabled: item.readOnly, checked: item.visible, onChange: () => switchAction(item.id, !item.visible) }) }) })
41
+ ] });
42
+ };
43
+ export {
44
+ ColumnManagerItem,
45
+ ColumnManagerItem as default
61
46
  };
62
- export default ColumnManagerItem;
@@ -1,11 +1,11 @@
1
- import Menu from '@synerise/ds-menu';
2
- export declare const DragHandler: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@synerise/ds-icon").BaseIconProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, keyof import("@synerise/ds-icon").BaseIconProps> & import("@synerise/ds-utils").DataAttributes & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
3
- export declare const Icons: import("styled-components").StyledComponent<"div", any, {}, never>;
4
- export declare const ItemPart: import("styled-components").StyledComponent<"div", any, {
1
+ import { default as Menu } from '@synerise/ds-menu';
2
+ export declare const DragHandler: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<import('@synerise/ds-icon').BaseIconProps & Omit<import('react').HTMLAttributes<HTMLDivElement>, keyof import('@synerise/ds-icon').BaseIconProps> & import('@synerise/ds-utils').DataAttributes & import('react').RefAttributes<HTMLDivElement>>, any, {}, never>;
3
+ export declare const Icons: import('styled-components').StyledComponent<"div", any, {}, never>;
4
+ export declare const ItemPart: import('styled-components').StyledComponent<"div", any, {
5
5
  align: string;
6
6
  }, never>;
7
- export declare const ColumnManagerItem: import("styled-components").StyledComponent<"div", any, {
7
+ export declare const ColumnManagerItem: import('styled-components').StyledComponent<"div", any, {
8
8
  isDragged?: boolean;
9
9
  }, never>;
10
- export declare const ColumnManagerItemName: import("styled-components").StyledComponent<"span", any, {}, never>;
11
- export declare const FixedMenu: import("styled-components").StyledComponent<typeof Menu, any, {}, never>;
10
+ export declare const ColumnManagerItemName: import('styled-components').StyledComponent<"span", any, {}, never>;
11
+ export declare const FixedMenu: import('styled-components').StyledComponent<typeof Menu, any, {}, never>;
@@ -1,47 +1,37 @@
1
- import styled from 'styled-components';
2
- import Icon, { IconContainer } from '@synerise/ds-icon';
3
- import Menu from '@synerise/ds-menu';
4
- export var DragHandler = styled(Icon).withConfig({
1
+ import styled from "styled-components";
2
+ import Icon, { IconContainer } from "@synerise/ds-icon";
3
+ import Menu from "@synerise/ds-menu";
4
+ const DragHandler = /* @__PURE__ */ styled(Icon).withConfig({
5
5
  displayName: "ColumnManagerItemstyles__DragHandler",
6
6
  componentId: "sc-12ob8aa-0"
7
7
  })(["position:absolute;top:16px;left:-24px;opacity:0;cursor:pointer;"]);
8
- export var Icons = styled.div.withConfig({
8
+ const Icons = /* @__PURE__ */ styled.div.withConfig({
9
9
  displayName: "ColumnManagerItemstyles__Icons",
10
10
  componentId: "sc-12ob8aa-1"
11
11
  })(["display:flex;align-items:center;justify-content:center;", "{margin-left:8px;}"], IconContainer);
12
- export var ItemPart = styled.div.withConfig({
12
+ const ItemPart = /* @__PURE__ */ styled.div.withConfig({
13
13
  displayName: "ColumnManagerItemstyles__ItemPart",
14
14
  componentId: "sc-12ob8aa-2"
15
- })(["display:flex;flex-direction:row;align-items:center;position:relative;height:56px;justify-content:", ";flex:", ";max-width:", ";.switch-texts{margin:0;}.ds-switch{margin-left:8px;}"], function (props) {
16
- return props.align === 'left' ? 'flex-start' : 'flex-end';
17
- }, function (props) {
18
- return props.align === 'left' ? '1' : 'auto';
19
- }, function (props) {
20
- return props.align === 'left' ? 'calc(100% - 80px)' : '68px';
21
- });
22
- export var ColumnManagerItem = styled.div.withConfig({
15
+ })(["display:flex;flex-direction:row;align-items:center;position:relative;height:56px;justify-content:", ";flex:", ";max-width:", ";.switch-texts{margin:0;}.ds-switch{margin-left:8px;}"], (props) => props.align === "left" ? "flex-start" : "flex-end", (props) => props.align === "left" ? "1" : "auto", (props) => props.align === "left" ? "calc(100% - 80px)" : "68px");
16
+ const ColumnManagerItem = /* @__PURE__ */ styled.div.withConfig({
23
17
  displayName: "ColumnManagerItemstyles__ColumnManagerItem",
24
18
  componentId: "sc-12ob8aa-3"
25
- })(["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) {
26
- return props.theme.palette.white;
27
- }, function (props) {
28
- return props.theme.palette['grey-200'];
29
- }, function (props) {
30
- return props.isDragged && "\n opacity: 0;\n ";
31
- }, function (props) {
32
- return props.theme.palette['grey-050'];
33
- }, function (props) {
34
- return props.theme.palette['blue-600'];
35
- }, DragHandler, Icons);
36
- export var ColumnManagerItemName = styled.span.withConfig({
19
+ })(["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;}}"], (props) => props.theme.palette.white, (props) => props.theme.palette["grey-200"], (props) => props.isDragged && `
20
+ opacity: 0;
21
+ `, (props) => props.theme.palette["grey-050"], (props) => props.theme.palette["blue-600"], DragHandler, Icons);
22
+ const ColumnManagerItemName = /* @__PURE__ */ styled.span.withConfig({
37
23
  displayName: "ColumnManagerItemstyles__ColumnManagerItemName",
38
24
  componentId: "sc-12ob8aa-4"
39
- })(["font-size:13px;line-height:1.38;color:", ";margin-left:8px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex:1;.search-highlight{font-weight:500;color:", ";}"], function (props) {
40
- return props.theme.palette['grey-600'];
41
- }, function (props) {
42
- return props.theme.palette['grey-800'];
43
- });
44
- export var FixedMenu = styled(Menu).withConfig({
25
+ })(["font-size:13px;line-height:1.38;color:", ";margin-left:8px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex:1;.search-highlight{font-weight:500;color:", ";}"], (props) => props.theme.palette["grey-600"], (props) => props.theme.palette["grey-800"]);
26
+ const FixedMenu = /* @__PURE__ */ styled(Menu).withConfig({
45
27
  displayName: "ColumnManagerItemstyles__FixedMenu",
46
28
  componentId: "sc-12ob8aa-5"
47
- })(["padding:8px;.ant-dropdown-menu-item{padding:0 8px !important;}"]);
29
+ })(["padding:8px;.ant-dropdown-menu-item{padding:0 8px !important;}"]);
30
+ export {
31
+ ColumnManagerItem,
32
+ ColumnManagerItemName,
33
+ DragHandler,
34
+ FixedMenu,
35
+ Icons,
36
+ ItemPart
37
+ };
@@ -1,7 +1,7 @@
1
- import { FixedSizeList } from 'react-window';
2
- export declare const ColumnManagerList: import("styled-components").StyledComponent<"div", any, {}, never>;
3
- export declare const ListHeadline: import("styled-components").StyledComponent<"span", any, {}, never>;
4
- export declare const List: import("styled-components").StyledComponent<typeof FixedSizeList, any, {
1
+ import { FixedSizeList } from '../../../../../config/vitest/__mocks__/reactWindowMock.js';
2
+ export declare const ColumnManagerList: import('styled-components').StyledComponent<"div", any, {}, never>;
3
+ export declare const ListHeadline: import('styled-components').StyledComponent<"span", any, {}, never>;
4
+ export declare const List: import('styled-components').StyledComponent<typeof FixedSizeList, any, {
5
5
  maxHeight?: number;
6
6
  isDragging?: boolean;
7
7
  }, never>;
@@ -1,26 +1,19 @@
1
- import { FixedSizeList } from 'react-window';
2
- import styled from 'styled-components';
3
- export var ColumnManagerList = styled.div.withConfig({
1
+ import { FixedSizeList } from "react-window";
2
+ import styled from "styled-components";
3
+ const ColumnManagerList = /* @__PURE__ */ styled.div.withConfig({
4
4
  displayName: "ColumnManagerstyle__ColumnManagerList",
5
5
  componentId: "sc-8vnyk-0"
6
6
  })(["display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;width:100%;height:100%;"]);
7
- export var ListHeadline = styled.span.withConfig({
7
+ const ListHeadline = /* @__PURE__ */ styled.span.withConfig({
8
8
  displayName: "ColumnManagerstyle__ListHeadline",
9
9
  componentId: "sc-8vnyk-1"
10
- })(["display:flex;width:100%;font-size:14px;line-height:1.42;font-weight:500;padding:24px 24px 12px;border-bottom:1px solid ", ";color:", ";"], function (props) {
11
- return props.theme.palette['grey-200'];
12
- }, function (props) {
13
- return props.theme.palette['grey-800'];
14
- });
15
- export var List = styled(FixedSizeList).withConfig({
10
+ })(["display:flex;width:100%;font-size:14px;line-height:1.42;font-weight:500;padding:24px 24px 12px;border-bottom:1px solid ", ";color:", ";"], (props) => props.theme.palette["grey-200"], (props) => props.theme.palette["grey-800"]);
11
+ const List = /* @__PURE__ */ styled(FixedSizeList).withConfig({
16
12
  displayName: "ColumnManagerstyle__List",
17
13
  componentId: "sc-8vnyk-2"
18
- })(["overflow-x:unset;overflow-y:unset;height:auto !important;background:", ";box-shadow:2px 0 0 0 ", " inset;", " ", ""], function (props) {
19
- return props.theme.palette['blue-050'];
20
- }, function (props) {
21
- return props.theme.palette['blue-600'];
22
- }, function (props) {
23
- return props.maxHeight !== undefined && "max-height: " + props.maxHeight + "px;";
24
- }, function (props) {
25
- return props.isDragging && "user-select: none;";
26
- });
14
+ })(["overflow-x:unset;overflow-y:unset;height:auto !important;background:", ";box-shadow:2px 0 0 0 ", " inset;", " ", ""], (props) => props.theme.palette["blue-050"], (props) => props.theme.palette["blue-600"], (props) => props.maxHeight !== void 0 && `max-height: ${props.maxHeight}px;`, (props) => props.isDragging && `user-select: none;`);
15
+ export {
16
+ ColumnManagerList,
17
+ List,
18
+ ListHeadline
19
+ };
@@ -1,6 +1,6 @@
1
- import React, { type CSSProperties } from 'react';
2
- import { type Column } from '../ColumnManager.types';
3
- import { type ColumnManagerListProps } from './ColumnManagerList.types';
1
+ import { default as React, CSSProperties } from 'react';
2
+ import { Column } from '../ColumnManager.types';
3
+ import { ColumnManagerListProps } from './ColumnManagerList.types';
4
4
  export declare const LIST_STYLE: CSSProperties;
5
5
  declare const ColumnManagerList: <ColumnType extends Column>({ searchQuery, columns, draggable, handleOrderChange, toggleColumn, texts, }: ColumnManagerListProps<ColumnType>) => React.JSX.Element;
6
6
  export default ColumnManagerList;
@@ -1,93 +1,66 @@
1
- import React, { useMemo, useRef, useState } from 'react';
2
- import Result from '@synerise/ds-result';
3
- import Scrollbar from '@synerise/ds-scrollbar';
4
- import { DragOverlay, SortableContainer } from '@synerise/ds-sortable';
5
- import { useResizeObserver } from '@synerise/ds-utils';
6
- import { ColumnManagerItem } from '../ColumnManagerItem/ColumnManagerItem';
7
- import { ColumnManagerSortableItem } from '../ColumnManagerSortableItem/ColumnManagerSortableItem';
8
- import * as S from './ColumnManager.style';
9
- export var LIST_STYLE = {
10
- overflowX: 'unset',
11
- overflowY: 'unset'
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
+ import { useState, useRef, useMemo } from "react";
3
+ import Result from "@synerise/ds-result";
4
+ import Scrollbar from "@synerise/ds-scrollbar";
5
+ import { SortableContainer, DragOverlay } from "@synerise/ds-sortable";
6
+ import { useResizeObserver } from "@synerise/ds-utils";
7
+ import { ColumnManagerItem } from "../ColumnManagerItem/ColumnManagerItem.js";
8
+ import { ColumnManagerSortableItem } from "../ColumnManagerSortableItem/ColumnManagerSortableItem.js";
9
+ import { ColumnManagerList as ColumnManagerList$1, List } from "./ColumnManager.style.js";
10
+ const LIST_STYLE = {
11
+ overflowX: "unset",
12
+ overflowY: "unset"
12
13
  };
13
- var ColumnManagerList = function ColumnManagerList(_ref) {
14
- var searchQuery = _ref.searchQuery,
15
- columns = _ref.columns,
16
- draggable = _ref.draggable,
17
- handleOrderChange = _ref.handleOrderChange,
18
- toggleColumn = _ref.toggleColumn,
19
- texts = _ref.texts;
20
- var _useState = useState(),
21
- activeItem = _useState[0],
22
- setActiveItem = _useState[1];
23
- var _useState2 = useState(0),
24
- containerHeight = _useState2[0],
25
- setContainerHeight = _useState2[1];
26
- var listRef = useRef(null);
27
- var containerRef = useRef(null);
28
- var isItemDraggable = draggable && !searchQuery;
29
- var items = useMemo(function () {
30
- return columns.map(function (column) {
31
- return {
32
- key: column.id,
33
- id: column.id,
34
- item: column,
35
- isDragged: activeItem && (activeItem == null ? void 0 : activeItem.id) === column.id,
36
- switchAction: toggleColumn,
37
- draggable: isItemDraggable,
38
- texts: texts
39
- };
40
- });
14
+ const ColumnManagerList = ({
15
+ searchQuery,
16
+ columns,
17
+ draggable,
18
+ handleOrderChange,
19
+ toggleColumn,
20
+ texts
21
+ }) => {
22
+ const [activeItem, setActiveItem] = useState();
23
+ const [containerHeight, setContainerHeight] = useState(0);
24
+ const listRef = useRef(null);
25
+ const containerRef = useRef(null);
26
+ const isItemDraggable = draggable && !searchQuery;
27
+ const items = useMemo(() => {
28
+ return columns.map((column) => ({
29
+ key: column.id,
30
+ id: column.id,
31
+ item: column,
32
+ isDragged: activeItem && activeItem?.id === column.id,
33
+ switchAction: toggleColumn,
34
+ draggable: isItemDraggable,
35
+ texts
36
+ }));
41
37
  }, [columns, toggleColumn, texts, activeItem, isItemDraggable]);
42
- var handleScroll = function handleScroll(_ref2) {
43
- var currentTarget = _ref2.currentTarget;
44
- var scrollTop = currentTarget.scrollTop;
38
+ const handleScroll = ({
39
+ currentTarget
40
+ }) => {
41
+ const {
42
+ scrollTop
43
+ } = currentTarget;
45
44
  if (listRef.current) {
46
45
  listRef.current.scrollTo(scrollTop);
47
46
  }
48
47
  };
49
- useResizeObserver(containerRef, function (dimensions) {
48
+ useResizeObserver(containerRef, (dimensions) => {
50
49
  setContainerHeight(dimensions.height);
51
50
  });
52
- return /*#__PURE__*/React.createElement(S.ColumnManagerList, {
53
- ref: containerRef,
54
- "data-testid": "ds-column-manager-list"
55
- }, !items.length && searchQuery ? /*#__PURE__*/React.createElement(Result, {
56
- description: texts.noResults,
57
- type: "no-results"
58
- }) : /*#__PURE__*/React.createElement(SortableContainer, {
59
- onDragStart: function onDragStart(_ref3) {
60
- var active = _ref3.active;
61
- var column = items.find(function (item) {
62
- return item.id === active.id;
63
- });
64
- setActiveItem(column);
65
- },
66
- onDragEnd: function onDragEnd() {
67
- setActiveItem(undefined);
68
- },
69
- onDragCancel: function onDragCancel() {
70
- return setActiveItem(undefined);
71
- },
72
- onOrderChange: handleOrderChange,
73
- items: items,
74
- axis: "y"
75
- }, /*#__PURE__*/React.createElement(Scrollbar, {
76
- absolute: true,
77
- withDnd: true,
78
- onScroll: handleScroll,
79
- maxHeight: containerHeight
80
- }, /*#__PURE__*/React.createElement(S.List, {
81
- isDragging: !!activeItem,
82
- height: containerHeight,
83
- itemCount: items.length,
84
- itemSize: 56,
85
- itemData: items,
86
- width: "100%",
87
- ref: listRef,
88
- style: LIST_STYLE
89
- }, function (props) {
90
- return /*#__PURE__*/React.createElement(ColumnManagerSortableItem, props);
91
- })), /*#__PURE__*/React.createElement(DragOverlay, null, activeItem && /*#__PURE__*/React.createElement(ColumnManagerItem, activeItem))));
51
+ return /* @__PURE__ */ jsx(ColumnManagerList$1, { ref: containerRef, "data-testid": "ds-column-manager-list", children: !items.length && searchQuery ? /* @__PURE__ */ jsx(Result, { description: texts.noResults, type: "no-results" }) : /* @__PURE__ */ jsxs(SortableContainer, { onDragStart: ({
52
+ active
53
+ }) => {
54
+ const column = items.find((item) => item.id === active.id);
55
+ setActiveItem(column);
56
+ }, onDragEnd: () => {
57
+ setActiveItem(void 0);
58
+ }, onDragCancel: () => setActiveItem(void 0), onOrderChange: handleOrderChange, items, axis: "y", children: [
59
+ /* @__PURE__ */ jsx(Scrollbar, { absolute: true, withDnd: true, onScroll: handleScroll, maxHeight: containerHeight, children: /* @__PURE__ */ jsx(List, { isDragging: !!activeItem, height: containerHeight, itemCount: items.length, itemSize: 56, itemData: items, width: "100%", ref: listRef, style: LIST_STYLE, children: (props) => /* @__PURE__ */ jsx(ColumnManagerSortableItem, { ...props }) }) }),
60
+ /* @__PURE__ */ jsx(DragOverlay, { children: activeItem && /* @__PURE__ */ jsx(ColumnManagerItem, { ...activeItem }) })
61
+ ] }) });
62
+ };
63
+ export {
64
+ LIST_STYLE,
65
+ ColumnManagerList as default
92
66
  };
93
- export default ColumnManagerList;
@@ -1,5 +1,5 @@
1
- import type { Column, ColumnManagerTexts } from '../ColumnManager.types';
2
- import type { ColumnManagerItemProps } from '../ColumnManagerItem/ColumManagerItem.types';
1
+ import { Column, ColumnManagerTexts } from '../ColumnManager.types';
2
+ import { ColumnManagerItemProps } from '../ColumnManagerItem/ColumManagerItem.types';
3
3
  export type ColumnManagerListProps<ColumnType extends Column> = {
4
4
  searchQuery: string;
5
5
  columns: ColumnType[];
@@ -1 +1 @@
1
- export {};
1
+
@@ -1,4 +1,4 @@
1
- import React from 'react';
2
- import { type Column } from '../ColumnManager.types';
3
- import { type ColumnManagerSortableItemProps } from './ColumnManagerSortableItem.types';
1
+ import { default as React } from 'react';
2
+ import { Column } from '../ColumnManager.types';
3
+ import { ColumnManagerSortableItemProps } from './ColumnManagerSortableItem.types';
4
4
  export declare const ColumnManagerSortableItem: <ColumnType extends Column>(props: ColumnManagerSortableItemProps<ColumnType>) => React.JSX.Element;
@@ -1,35 +1,36 @@
1
- var _excluded = ["index", "style", "data"];
2
- 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); }
3
- 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; }
4
- import React from 'react';
5
- import { CSS, useSortable } from '@synerise/ds-sortable';
6
- import { ColumnManagerItem } from '../ColumnManagerItem/ColumnManagerItem';
7
- export var ColumnManagerSortableItem = function ColumnManagerSortableItem(props) {
8
- var index = props.index,
9
- styleProp = props.style,
10
- data = props.data,
11
- rest = _objectWithoutPropertiesLoose(props, _excluded);
12
- var id = data[index].id;
13
- var _useSortable = useSortable({
14
- id: id
15
- }),
16
- attributes = _useSortable.attributes,
17
- listeners = _useSortable.listeners,
18
- setNodeRef = _useSortable.setNodeRef,
19
- transform = _useSortable.transform,
20
- transition = _useSortable.transition;
21
- var style = _extends({}, styleProp, {
22
- transform: CSS.Transform.toString(transform),
23
- transition: transition
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { createElement } from "react";
3
+ import { useSortable, CSS } from "@synerise/ds-sortable";
4
+ import { ColumnManagerItem } from "../ColumnManagerItem/ColumnManagerItem.js";
5
+ const ColumnManagerSortableItem = (props) => {
6
+ const {
7
+ index,
8
+ style: styleProp,
9
+ data,
10
+ ...rest
11
+ } = props;
12
+ const {
13
+ id
14
+ } = data[index];
15
+ const {
16
+ attributes,
17
+ listeners,
18
+ setNodeRef,
19
+ transform,
20
+ transition
21
+ } = useSortable({
22
+ id
24
23
  });
25
- return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
26
- key: "column-manager-item-" + id,
27
- style: style,
28
- ref: setNodeRef
29
- }), /*#__PURE__*/React.createElement(ColumnManagerItem, _extends({}, data[index], {
30
- dragHandleProps: {
31
- attributes: attributes,
32
- listeners: listeners
33
- }
34
- })));
35
- };
24
+ const style = {
25
+ ...styleProp,
26
+ transform: CSS.Transform.toString(transform),
27
+ transition
28
+ };
29
+ return /* @__PURE__ */ createElement("div", { ...rest, key: `column-manager-item-${id}`, style, ref: setNodeRef }, /* @__PURE__ */ jsx(ColumnManagerItem, { ...data[index], dragHandleProps: {
30
+ attributes,
31
+ listeners
32
+ } }));
33
+ };
34
+ export {
35
+ ColumnManagerSortableItem
36
+ };
@@ -1,4 +1,4 @@
1
- import type { ListChildComponentProps } from 'react-window';
2
- import type { Column } from '../ColumnManager.types';
3
- import type { ColumnManagerItemProps } from '../ColumnManagerItem/ColumManagerItem.types';
1
+ import { ListChildComponentProps } from '../../../../../config/vitest/__mocks__/reactWindowMock.js';
2
+ import { Column } from '../ColumnManager.types';
3
+ import { ColumnManagerItemProps } from '../ColumnManagerItem/ColumManagerItem.types';
4
4
  export type ColumnManagerSortableItemProps<ColumnType extends Column> = ListChildComponentProps<ColumnManagerItemProps<ColumnType>[]>;
@@ -1,2 +1,2 @@
1
- import type { ColumnManagerTexts } from '../ColumnManager.types';
1
+ import { ColumnManagerTexts } from '../ColumnManager.types';
2
2
  export declare const useTranslations: (texts?: Partial<ColumnManagerTexts>) => ColumnManagerTexts;
@@ -1,43 +1,46 @@
1
- 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); }
2
- import { useIntl } from 'react-intl';
3
- export var useTranslations = function useTranslations(texts) {
4
- var intl = useIntl();
5
- return _extends({
1
+ import { useIntl } from "react-intl";
2
+ const useTranslations = (texts) => {
3
+ const intl = useIntl();
4
+ return {
6
5
  title: intl.formatMessage({
7
- id: 'DS.COLUMN-MANAGER.TITLE',
8
- defaultMessage: 'Manage columns'
6
+ id: "DS.COLUMN-MANAGER.TITLE",
7
+ defaultMessage: "Manage columns"
9
8
  }),
10
9
  searchPlaceholder: intl.formatMessage({
11
- id: 'DS.COLUMN-MANAGER.SEARCH-PLACEHOLDER',
12
- defaultMessage: 'Search columns'
10
+ id: "DS.COLUMN-MANAGER.SEARCH-PLACEHOLDER",
11
+ defaultMessage: "Search columns"
13
12
  }),
14
13
  searchClearTooltip: intl.formatMessage({
15
- id: 'DS.ITEM-FILTER.SEARCH-CLEAR',
16
- defaultMessage: 'Clear'
14
+ id: "DS.ITEM-FILTER.SEARCH-CLEAR",
15
+ defaultMessage: "Clear"
17
16
  }),
18
17
  noResults: intl.formatMessage({
19
- id: 'DS.COLUMN-MANAGER.NO-RESULTS',
20
- defaultMessage: 'No results'
18
+ id: "DS.COLUMN-MANAGER.NO-RESULTS",
19
+ defaultMessage: "No results"
21
20
  }),
22
21
  cancel: intl.formatMessage({
23
- id: 'DS.COLUMN-MANAGER.CANCEL',
24
- defaultMessage: 'Cancel'
22
+ id: "DS.COLUMN-MANAGER.CANCEL",
23
+ defaultMessage: "Cancel"
25
24
  }),
26
25
  apply: intl.formatMessage({
27
- id: 'DS.COLUMN-MANAGER.APPLY',
28
- defaultMessage: 'Apply'
26
+ id: "DS.COLUMN-MANAGER.APPLY",
27
+ defaultMessage: "Apply"
29
28
  }),
30
29
  clear: intl.formatMessage({
31
- id: 'DS.COLUMN-MANAGER.CLEAR',
32
- defaultMessage: 'Clear'
30
+ id: "DS.COLUMN-MANAGER.CLEAR",
31
+ defaultMessage: "Clear"
33
32
  }),
34
33
  switchOn: intl.formatMessage({
35
- id: 'DS.COLUMN-MANAGER.SWITCH-ON',
36
- defaultMessage: 'Hide column'
34
+ id: "DS.COLUMN-MANAGER.SWITCH-ON",
35
+ defaultMessage: "Hide column"
37
36
  }),
38
37
  switchOff: intl.formatMessage({
39
- id: 'DS.COLUMN-MANAGER.SWITCH-OFF',
40
- defaultMessage: 'Show column'
41
- })
42
- }, texts || {});
43
- };
38
+ id: "DS.COLUMN-MANAGER.SWITCH-OFF",
39
+ defaultMessage: "Show column"
40
+ }),
41
+ ...texts || {}
42
+ };
43
+ };
44
+ export {
45
+ useTranslations
46
+ };
package/dist/index.js CHANGED
@@ -1,2 +1,4 @@
1
- export { default } from './ColumnManager';
2
- export * from './ColumnManager.types';
1
+ import { default as default2 } from "./ColumnManager.js";
2
+ export {
3
+ default2 as default
4
+ };
package/dist/modules.d.js CHANGED
@@ -1 +1 @@
1
- import '@testing-library/jest-dom';
1
+ import "@testing-library/jest-dom";
File without changes
@@ -1,3 +1,6 @@
1
- export var matchesSearchQuery = function matchesSearchQuery(text, searchQuery) {
1
+ const matchesSearchQuery = (text, searchQuery) => {
2
2
  return text.toLowerCase().includes(searchQuery.toLowerCase());
3
- };
3
+ };
4
+ export {
5
+ matchesSearchQuery
6
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-column-manager",
3
- "version": "1.2.47",
3
+ "version": "1.2.48",
4
4
  "description": "ColumnManager UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -16,10 +16,10 @@
16
16
  "access": "public"
17
17
  },
18
18
  "scripts": {
19
- "build": "pnpm run build:js && pnpm run build:css && pnpm run defs",
19
+ "build": "vite build",
20
20
  "build:css": "node ../../../scripts/style/less.js",
21
21
  "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
22
- "build:watch": "pnpm run build:js -- --watch",
22
+ "build:watch": "vite build --watch",
23
23
  "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
24
24
  "pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
25
25
  "prepublish": "pnpm run build",
@@ -32,22 +32,22 @@
32
32
  "sideEffects": false,
33
33
  "types": "dist/index.d.ts",
34
34
  "dependencies": {
35
- "@synerise/ds-button": "^1.5.17",
36
- "@synerise/ds-drawer": "^1.1.1",
37
- "@synerise/ds-icon": "^1.15.0",
38
- "@synerise/ds-menu": "^1.4.12",
39
- "@synerise/ds-result": "^1.0.48",
40
- "@synerise/ds-scrollbar": "^1.2.16",
41
- "@synerise/ds-search-bar": "^1.4.19",
42
- "@synerise/ds-sortable": "^1.3.13",
43
- "@synerise/ds-switch": "^1.2.19",
44
- "@synerise/ds-tooltip": "^1.4.9",
45
- "@synerise/ds-typography": "^1.1.12",
46
- "@synerise/ds-utils": "^1.7.0",
35
+ "@synerise/ds-button": "^1.5.18",
36
+ "@synerise/ds-drawer": "^1.1.2",
37
+ "@synerise/ds-icon": "^1.15.1",
38
+ "@synerise/ds-menu": "^1.4.13",
39
+ "@synerise/ds-result": "^1.0.49",
40
+ "@synerise/ds-scrollbar": "^1.2.17",
41
+ "@synerise/ds-search-bar": "^1.4.20",
42
+ "@synerise/ds-sortable": "^1.3.14",
43
+ "@synerise/ds-switch": "^1.2.20",
44
+ "@synerise/ds-tooltip": "^1.4.10",
45
+ "@synerise/ds-typography": "^1.1.13",
46
+ "@synerise/ds-utils": "^1.7.1",
47
47
  "react-window": "1.8.11"
48
48
  },
49
49
  "devDependencies": {
50
- "@synerise/ds-input": "^1.6.9",
50
+ "@synerise/ds-input": "^1.6.10",
51
51
  "vitest": "4"
52
52
  },
53
53
  "peerDependencies": {
@@ -57,5 +57,5 @@
57
57
  "react-intl": ">=3.12.0 <= 6.8",
58
58
  "styled-components": "^5.3.3"
59
59
  },
60
- "gitHead": "8efc031fa688c0b87c7b3915bae93546bb63bcac"
60
+ "gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
61
61
  }