@synerise/ds-item-filter 1.0.68 → 1.0.70

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 (12) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/README.md +23 -20
  3. package/dist/ItemFIlter.styles.d.ts +2 -2
  4. package/dist/ItemFIlter.styles.js +10 -8
  5. package/dist/ItemFilter.d.ts +8 -8
  6. package/dist/ItemFilter.js +142 -197
  7. package/dist/ItemFilter.types.d.ts +2 -2
  8. package/dist/ItemFilter.types.js +1 -1
  9. package/dist/index.js +4 -2
  10. package/dist/modules.d.js +1 -1
  11. package/dist/modules.d.ts +0 -0
  12. package/package.json +13 -13
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
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.0.70](https://github.com/Synerise/synerise-design/compare/@synerise/ds-item-filter@1.0.69...@synerise/ds-item-filter@1.0.70) (2026-03-24)
7
+
8
+ **Note:** Version bump only for package @synerise/ds-item-filter
9
+
10
+ ## [1.0.69](https://github.com/Synerise/synerise-design/compare/@synerise/ds-item-filter@1.0.68...@synerise/ds-item-filter@1.0.69) (2026-03-20)
11
+
12
+ **Note:** Version bump only for package @synerise/ds-item-filter
13
+
6
14
  ## [1.0.68](https://github.com/Synerise/synerise-design/compare/@synerise/ds-item-filter@1.0.67...@synerise/ds-item-filter@1.0.68) (2026-03-09)
7
15
 
8
16
  **Note:** Version bump only for package @synerise/ds-item-filter
package/README.md CHANGED
@@ -28,7 +28,7 @@ import ItemFilter from '@synerise/ds-item-filter'
28
28
  duplicateItem={(props) => {}}
29
29
  selectedItemId="0001"
30
30
  categories={CATEGORIES}
31
- items={ITEMS}
31
+ fetchData={(category) => {}}
32
32
  />
33
33
 
34
34
  ```
@@ -45,15 +45,17 @@ import ItemFilter from '@synerise/ds-item-filter'
45
45
  | -------------- | ------------------------------------------------------------------------------- | ---------------------------------------- | --------- |
46
46
  | visible | Whether the ItemFilter is visible or not. | boolean | `false` |
47
47
  | hide | Specify a callback that will be called when a user clicks mask or close button. | () => void | - |
48
- | removeItem | Specify a callback that will be called when a user removes list item | (`{ id: string }`) =>void | - |
49
- | editItem | Specify a callback that will be called when a user change name of list item | (`{ id: string, name: string }`) => void | - |
50
- | duplicateItem | Specify a callback that will be called when a user duplicates list item | (`{ id: string }`) => void | - |
51
- | selectItem | Specify a callback that will be called when a user select list item | (`{ id: string }`) => void | - |
48
+ | removeItem | Specify a callback that will be called when a user removes list item | (`{ id: ReactText }`) => void | - |
49
+ | editItem | Specify a callback that will be called when a user change name of list item | (`{ id: ReactText, name: string }`) => void | - |
50
+ | duplicateItem | Specify a callback that will be called when a user duplicates list item | (`{ id: ReactText }`) => void | - |
51
+ | selectItem | Specify a callback that will be called when a user select list item | (`{ id: ReactText }`) => void | - |
52
52
  | categories | Array of categories | Category[] | [] |
53
- | selectedItemId | Id of selected item | string | undefined |
53
+ | selectedItemId | Id of selected item | `string \| undefined` | undefined |
54
54
  | texts | Object contains texts for buttons, title, confirms etc. | Texts | - |
55
- | maxToShowItems | Shows x first items, rest are hidden under `show more` button | number | 200 |
56
- | search | Whether the search input is availabla | number | 200 |
55
+ | maxToShowItems | Accepted in type but not implemented — has no effect | `number` | - |
56
+ | search | Optional search config; renders a SearchBar when provided | `{ onChange: (value: string) => void; onClear: () => void; value: string }` | - |
57
+ | fetchData | Callback invoked by infinite-scroll when more items are needed | `(category: Category) => void` | - |
58
+ | loading | Whether the list is in a loading state | `boolean` | - |
57
59
 
58
60
  #### Search
59
61
 
@@ -75,23 +77,24 @@ import ItemFilter from '@synerise/ds-item-filter'
75
77
 
76
78
  | Property | Description | Type | Default |
77
79
  | ------------- | --------------------------------------- | ------- | ------- |
78
- | id | Id of item | string | - |
79
- | canUpdate? | Whether the item can be edited | boolean | `false` |
80
- | canDelete? | Whether the item can be deleted | boolean | `false` |
81
- | canDuplicate? | Whether the item can be duplicated | boolean | `false` |
82
- | name | Name of item | string | - |
83
- | description? | Description of item | string | - |
84
- | user | Object contains informations about user | User | - |
85
- | created | Item creation timestamp | string | - |
80
+ | id | Id of item | `string \| number` (`ReactText`) | - |
81
+ | canUpdate? | Whether the item can be edited | `boolean` | - |
82
+ | canDelete? | Whether the item can be deleted | `boolean` | - |
83
+ | canDuplicate? | Whether the item can be duplicated | `boolean` | - |
84
+ | name | Name of item | `string` | - |
85
+ | description? | Description of item | `string` | - |
86
+ | user? | Object contains information about user | `User` | - |
87
+ | created? | Item creation timestamp | `string` | - |
88
+ | categories | Category labels the item belongs to | `string[]` | - |
86
89
 
87
90
  #### User
88
91
 
89
92
  | Property | Description | Type | Default |
90
93
  | ---------- | ----------- | ------ | ------- |
91
- | avatar_url | Link avatar | string | - |
92
- | firstname | First name | string | - |
93
- | lastname | Last name | string | - |
94
- | email | Email | string | - |
94
+ | avatar_url? | Link to avatar image | `string` | - |
95
+ | firstname? | First name | `string` | - |
96
+ | lastname? | Last name | `string` | - |
97
+ | email? | Email address | `string` | - |
95
98
 
96
99
  #### Texts
97
100
 
package/dist/ItemFIlter.styles.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export declare const FiltersList: import("styled-components").StyledComponent<"div", any, {}, never>;
2
- export declare const ItemFilterHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
1
+ export declare const FiltersList: import('styled-components').StyledComponent<"div", any, {}, never>;
2
+ export declare const ItemFilterHeader: import('styled-components').StyledComponent<"div", any, {}, never>;
package/dist/ItemFIlter.styles.js CHANGED
@@ -1,12 +1,14 @@
1
- import styled from 'styled-components';
2
- import { ItemContainer } from '@synerise/ds-manageable-list/dist/Item/ContentItem/ContentItem.styles';
3
- export var FiltersList = styled.div.withConfig({
1
+ import styled from "styled-components";
2
+ import { ItemContainer } from "@synerise/ds-manageable-list/dist/Item/ContentItem/ContentItem.styles";
3
+ const FiltersList = /* @__PURE__ */ styled.div.withConfig({
4
4
  displayName: "ItemFIlterstyles__FiltersList",
5
5
  componentId: "sc-1pbog0m-0"
6
- })(["height:100%;", "{max-height:48px;box-shadow:none;background:", ";}.ds-result{margin-top:24px;}"], ItemContainer, function (props) {
7
- return props.theme.palette['grey-050'];
8
- });
9
- export var ItemFilterHeader = styled.div.withConfig({
6
+ })(["height:100%;", "{max-height:48px;box-shadow:none;background:", ";}.ds-result{margin-top:24px;}"], ItemContainer, (props) => props.theme.palette["grey-050"]);
7
+ const ItemFilterHeader = /* @__PURE__ */ styled.div.withConfig({
10
8
  displayName: "ItemFIlterstyles__ItemFilterHeader",
11
9
  componentId: "sc-1pbog0m-1"
12
- })(["display:flex;justify-content:space-between;align-items:center;padding-bottom:24px;"]);
10
+ })(["display:flex;justify-content:space-between;align-items:center;padding-bottom:24px;"]);
11
+ export {
12
+ FiltersList,
13
+ ItemFilterHeader
14
+ };
package/dist/ItemFilter.d.ts CHANGED
@@ -1,12 +1,12 @@
1
- import React from 'react';
2
- declare const _default: React.FC<import("react-intl").WithIntlProps<{
1
+ import { default as React } from 'react';
2
+ declare const _default: React.FC<import('react-intl').WithIntlProps<{
3
3
  search?: {
4
4
  onChange: (value: string) => void;
5
5
  onClear: () => void;
6
6
  value: string;
7
7
  } | undefined;
8
8
  loading?: boolean | undefined;
9
- intl: import("react-intl").IntlShape;
9
+ intl: import('react-intl').IntlShape;
10
10
  visible: boolean;
11
11
  hide: () => void;
12
12
  removeItem?: ((removeParams: {
@@ -26,8 +26,8 @@ declare const _default: React.FC<import("react-intl").WithIntlProps<{
26
26
  texts?: {
27
27
  [k: string]: string | React.ReactNode;
28
28
  } | undefined;
29
- categories: import("./ItemFilter.types").Category[];
30
- fetchData: (category: import("./ItemFilter.types").Category) => void;
29
+ categories: import('./ItemFilter.types').Category[];
30
+ fetchData: (category: import('./ItemFilter.types').Category) => void;
31
31
  maxToShowItems?: number | undefined;
32
32
  } & {
33
33
  theme?: any;
@@ -39,7 +39,7 @@ declare const _default: React.FC<import("react-intl").WithIntlProps<{
39
39
  value: string;
40
40
  } | undefined;
41
41
  loading?: boolean | undefined;
42
- intl: import("react-intl").IntlShape;
42
+ intl: import('react-intl').IntlShape;
43
43
  visible: boolean;
44
44
  hide: () => void;
45
45
  removeItem?: ((removeParams: {
@@ -59,8 +59,8 @@ declare const _default: React.FC<import("react-intl").WithIntlProps<{
59
59
  texts?: {
60
60
  [k: string]: string | React.ReactNode;
61
61
  } | undefined;
62
- categories: import("./ItemFilter.types").Category[];
63
- fetchData: (category: import("./ItemFilter.types").Category) => void;
62
+ categories: import('./ItemFilter.types').Category[];
63
+ fetchData: (category: import('./ItemFilter.types').Category) => void;
64
64
  maxToShowItems?: number | undefined;
65
65
  } & {
66
66
  theme?: any;
package/dist/ItemFilter.js CHANGED
@@ -1,111 +1,102 @@
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 from 'react';
3
- import { injectIntl } from 'react-intl';
4
- import { FixedSizeList as List } from 'react-window';
5
- import { withTheme } from 'styled-components';
6
- import Button from '@synerise/ds-button';
7
- import { useTheme } from '@synerise/ds-core';
8
- import Drawer from '@synerise/ds-drawer';
9
- import Icon, { CloseM, SearchM } from '@synerise/ds-icon';
10
- import { FilterItem } from '@synerise/ds-manageable-list';
11
- import Result from '@synerise/ds-result';
12
- import Scrollbar from '@synerise/ds-scrollbar';
13
- import SearchBar from '@synerise/ds-search-bar';
14
- import Tabs from '@synerise/ds-tabs';
15
- import Typography from '@synerise/ds-typography';
16
- import * as S from './ItemFIlter.styles';
17
- var DRAWER_WIDTH = 676;
18
- var FILTER_ITEM_HEIGHT = 48;
19
- var FILTER_ITEM_MARGIN_BOTTOM = 16;
20
- var FILTER_LIST_PADDING = 24;
21
-
22
- /**
23
- *
24
- * @deprecated - this component will not receive any more updates
25
- *
26
- */
27
- var ItemFilter = function ItemFilter(_ref) {
28
- var visible = _ref.visible,
29
- hide = _ref.hide,
30
- removeItem = _ref.removeItem,
31
- editItem = _ref.editItem,
32
- duplicateItem = _ref.duplicateItem,
33
- selectItem = _ref.selectItem,
34
- selectedItemId = _ref.selectedItemId,
35
- intl = _ref.intl,
36
- _ref$texts = _ref.texts,
37
- texts = _ref$texts === void 0 ? {
38
- activateItemTitle: intl.formatMessage({
39
- id: 'DS.ITEM-FILTER.ACTIVATE-ITEM-TITLE'
40
- }),
41
- activate: intl.formatMessage({
42
- id: 'DS.ITEM-FILTER.ACTIVATE'
43
- }),
44
- cancel: intl.formatMessage({
45
- id: 'DS.ITEM-FILTER.CANCEL'
46
- }),
47
- deleteConfirmationTitle: intl.formatMessage({
48
- id: 'DS.ITEM-FILTER.DELETE-CONFIRMATION-TITLE'
49
- }),
50
- deleteConfirmationDescription: intl.formatMessage({
51
- id: 'DS.ITEM-FILTER.DELETE-CONFIRMATION-DESCRIPTION'
52
- }),
53
- deleteConfirmationNo: intl.formatMessage({
54
- id: 'DS.ITEM-FILTER.DELETE-CONFIRMATION-NO',
55
- defaultMessage: 'No'
56
- }),
57
- deleteConfirmationYes: intl.formatMessage({
58
- id: 'DS.ITEM-FILTER.DELETE-CONFIRMATION-YES',
59
- defaultMessage: 'Yes'
60
- }),
61
- noResults: intl.formatMessage({
62
- id: 'DS.ITEM-FILTER.NO-RESULTS'
63
- }),
64
- searchPlaceholder: intl.formatMessage({
65
- id: 'DS.ITEM-FILTER.SEARCH-PLACEHOLDER'
66
- }),
67
- title: intl.formatMessage({
68
- id: 'DS.ITEM-FILTER.TITLE'
69
- }),
70
- more: intl.formatMessage({
71
- id: 'DS.MANAGABLE-LIST.MORE'
72
- }),
73
- less: intl.formatMessage({
74
- id: 'DS.MANAGABLE-LIST.LESS'
75
- }),
76
- searchClearTooltip: intl.formatMessage({
77
- id: 'DS.ITEM-FILTER.SEARCH-CLEAR'
78
- }),
79
- itemActionRename: intl.formatMessage({
80
- id: 'DS.MANAGABLE-LIST.ITEM-RENAME'
81
- }),
82
- itemActionDuplicate: intl.formatMessage({
83
- id: 'DS.MANAGABLE-LIST.ITEM-DUPLICATE'
84
- }),
85
- itemActionDelete: intl.formatMessage({
86
- id: 'DS.MANAGABLE-LIST.ITEM-DELETE'
87
- })
88
- } : _ref$texts,
89
- categories = _ref.categories,
90
- _fetchData = _ref.fetchData,
91
- loading = _ref.loading,
92
- search = _ref.search;
93
- var listRef = /*#__PURE__*/React.createRef();
94
- var theme = useTheme();
95
- var _React$useState = React.useState(0),
96
- listHeight = _React$useState[0],
97
- setListHeight = _React$useState[1];
98
- var _React$useState2 = React.useState(0),
99
- activeTab = _React$useState2[0],
100
- setActiveTab = _React$useState2[1];
101
- var listStyle = {
102
- overflowX: 'unset',
103
- overflowY: 'unset'
1
+ import { jsxs, jsx } from "react/jsx-runtime";
2
+ import React from "react";
3
+ import { injectIntl } from "react-intl";
4
+ import { FixedSizeList } from "react-window";
5
+ import { withTheme } from "styled-components";
6
+ import Button from "@synerise/ds-button";
7
+ import { useTheme } from "@synerise/ds-core";
8
+ import Drawer from "@synerise/ds-drawer";
9
+ import Icon, { CloseM, SearchM } from "@synerise/ds-icon";
10
+ import { FilterItem } from "@synerise/ds-manageable-list";
11
+ import Result from "@synerise/ds-result";
12
+ import Scrollbar from "@synerise/ds-scrollbar";
13
+ import SearchBar from "@synerise/ds-search-bar";
14
+ import Tabs from "@synerise/ds-tabs";
15
+ import Typography from "@synerise/ds-typography";
16
+ import { ItemFilterHeader, FiltersList } from "./ItemFIlter.styles.js";
17
+ const DRAWER_WIDTH = 676;
18
+ const FILTER_ITEM_HEIGHT = 48;
19
+ const FILTER_ITEM_MARGIN_BOTTOM = 16;
20
+ const FILTER_LIST_PADDING = 24;
21
+ const ItemFilter = ({
22
+ visible,
23
+ hide,
24
+ removeItem,
25
+ editItem,
26
+ duplicateItem,
27
+ selectItem,
28
+ selectedItemId,
29
+ intl,
30
+ texts = {
31
+ activateItemTitle: intl.formatMessage({
32
+ id: "DS.ITEM-FILTER.ACTIVATE-ITEM-TITLE"
33
+ }),
34
+ activate: intl.formatMessage({
35
+ id: "DS.ITEM-FILTER.ACTIVATE"
36
+ }),
37
+ cancel: intl.formatMessage({
38
+ id: "DS.ITEM-FILTER.CANCEL"
39
+ }),
40
+ deleteConfirmationTitle: intl.formatMessage({
41
+ id: "DS.ITEM-FILTER.DELETE-CONFIRMATION-TITLE"
42
+ }),
43
+ deleteConfirmationDescription: intl.formatMessage({
44
+ id: "DS.ITEM-FILTER.DELETE-CONFIRMATION-DESCRIPTION"
45
+ }),
46
+ deleteConfirmationNo: intl.formatMessage({
47
+ id: "DS.ITEM-FILTER.DELETE-CONFIRMATION-NO",
48
+ defaultMessage: "No"
49
+ }),
50
+ deleteConfirmationYes: intl.formatMessage({
51
+ id: "DS.ITEM-FILTER.DELETE-CONFIRMATION-YES",
52
+ defaultMessage: "Yes"
53
+ }),
54
+ noResults: intl.formatMessage({
55
+ id: "DS.ITEM-FILTER.NO-RESULTS"
56
+ }),
57
+ searchPlaceholder: intl.formatMessage({
58
+ id: "DS.ITEM-FILTER.SEARCH-PLACEHOLDER"
59
+ }),
60
+ title: intl.formatMessage({
61
+ id: "DS.ITEM-FILTER.TITLE"
62
+ }),
63
+ more: intl.formatMessage({
64
+ id: "DS.MANAGABLE-LIST.MORE"
65
+ }),
66
+ less: intl.formatMessage({
67
+ id: "DS.MANAGABLE-LIST.LESS"
68
+ }),
69
+ searchClearTooltip: intl.formatMessage({
70
+ id: "DS.ITEM-FILTER.SEARCH-CLEAR"
71
+ }),
72
+ itemActionRename: intl.formatMessage({
73
+ id: "DS.MANAGABLE-LIST.ITEM-RENAME"
74
+ }),
75
+ itemActionDuplicate: intl.formatMessage({
76
+ id: "DS.MANAGABLE-LIST.ITEM-DUPLICATE"
77
+ }),
78
+ itemActionDelete: intl.formatMessage({
79
+ id: "DS.MANAGABLE-LIST.ITEM-DELETE"
80
+ })
81
+ },
82
+ categories,
83
+ fetchData,
84
+ loading,
85
+ search
86
+ }) => {
87
+ const listRef = React.createRef();
88
+ const theme = useTheme();
89
+ const [listHeight, setListHeight] = React.useState(0);
90
+ const [activeTab, setActiveTab] = React.useState(0);
91
+ const listStyle = {
92
+ overflowX: "unset",
93
+ overflowY: "unset"
104
94
  };
105
- var activeCategory = React.useMemo(function () {
106
- var category = categories[activeTab];
107
- return _extends({}, category, {
108
- items: selectedItemId ? [].concat(category.items).sort(function (a, b) {
95
+ const activeCategory = React.useMemo(() => {
96
+ const category = categories[activeTab];
97
+ return {
98
+ ...category,
99
+ items: selectedItemId ? [...category.items].sort((a, b) => {
109
100
  if (a.id === selectedItemId) {
110
101
  return -1;
111
102
  }
@@ -114,103 +105,57 @@ var ItemFilter = function ItemFilter(_ref) {
114
105
  }
115
106
  return 0;
116
107
  }) : category.items || []
117
- });
108
+ };
118
109
  }, [categories, activeTab, selectedItemId]);
119
- var RenderRow = function RenderRow(_ref2) {
120
- var index = _ref2.index,
121
- style = _ref2.style;
122
- var item = activeCategory.items[index];
123
- return /*#__PURE__*/React.createElement(FilterItem, {
124
- texts: texts,
125
- onSelect: selectItem,
126
- onUpdate: editItem,
127
- onRemove: removeItem,
128
- onDuplicate: duplicateItem,
129
- item: item,
130
- selected: item.id === selectedItemId,
131
- searchQuery: search == null ? void 0 : search.value,
132
- style: _extends({}, style, {
133
- height: parseFloat(style.height) - FILTER_ITEM_MARGIN_BOTTOM,
134
- top: parseFloat(style.top) + 24
135
- })
136
- });
110
+ const RenderRow = ({
111
+ index,
112
+ style
113
+ }) => {
114
+ const item = activeCategory.items[index];
115
+ return /* @__PURE__ */ jsx(FilterItem, { texts, onSelect: selectItem, onUpdate: editItem, onRemove: removeItem, onDuplicate: duplicateItem, item, selected: item.id === selectedItemId, searchQuery: search?.value, style: {
116
+ ...style,
117
+ height: parseFloat(style.height) - FILTER_ITEM_MARGIN_BOTTOM,
118
+ top: parseFloat(style.top) + 24
119
+ } });
137
120
  };
138
- var handleScroll = function handleScroll(_ref3) {
139
- var currentTarget = _ref3.currentTarget;
140
- var scrollTop = currentTarget.scrollTop;
121
+ const handleScroll = ({
122
+ currentTarget
123
+ }) => {
124
+ const {
125
+ scrollTop
126
+ } = currentTarget;
141
127
  if (listRef.current !== null) {
142
128
  listRef.current.scrollTo(scrollTop);
143
129
  }
144
130
  };
145
- return /*#__PURE__*/React.createElement(Drawer, {
146
- visible: visible,
147
- placement: "right",
148
- width: DRAWER_WIDTH,
149
- onClose: hide
150
- }, /*#__PURE__*/React.createElement(Drawer.DrawerHeaderWithoutPadding, null, /*#__PURE__*/React.createElement(Drawer.DrawerHeader, null, /*#__PURE__*/React.createElement(S.ItemFilterHeader, null, /*#__PURE__*/React.createElement(Typography.Title, {
151
- style: {
152
- flex: 1,
153
- margin: 0
154
- },
155
- level: 4
156
- }, texts.title), /*#__PURE__*/React.createElement(Button, {
157
- type: "ghost",
158
- mode: "single-icon",
159
- onClick: hide,
160
- "data-testid": "ds-item-filter-close-button"
161
- }, /*#__PURE__*/React.createElement(Icon, {
162
- component: /*#__PURE__*/React.createElement(CloseM, null)
163
- }))), /*#__PURE__*/React.createElement(Tabs, {
164
- activeTab: activeTab,
165
- tabs: categories,
166
- handleTabClick: setActiveTab,
167
- underscore: true
168
- })), search && /*#__PURE__*/React.createElement(SearchBar, {
169
- placeholder: texts.searchPlaceholder,
170
- value: search == null ? void 0 : search.value,
171
- onClearInput: search == null ? void 0 : search.onClear,
172
- onSearchChange: search == null ? void 0 : search.onChange,
173
- clearTooltip: texts.searchClearTooltip,
174
- iconLeft: /*#__PURE__*/React.createElement(Icon, {
175
- component: /*#__PURE__*/React.createElement(SearchM, null),
176
- color: theme.palette['grey-600']
177
- })
178
- })), /*#__PURE__*/React.createElement(Drawer.DrawerBody, {
179
- style: {
180
- overflowY: 'hidden',
131
+ return /* @__PURE__ */ jsxs(Drawer, { visible, placement: "right", width: DRAWER_WIDTH, onClose: hide, children: [
132
+ /* @__PURE__ */ jsxs(Drawer.DrawerHeaderWithoutPadding, { children: [
133
+ /* @__PURE__ */ jsxs(Drawer.DrawerHeader, { children: [
134
+ /* @__PURE__ */ jsxs(ItemFilterHeader, { children: [
135
+ /* @__PURE__ */ jsx(Typography.Title, { style: {
136
+ flex: 1,
137
+ margin: 0
138
+ }, level: 4, children: texts.title }),
139
+ /* @__PURE__ */ jsx(Button, { type: "ghost", mode: "single-icon", onClick: hide, "data-testid": "ds-item-filter-close-button", children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(CloseM, {}) }) })
140
+ ] }),
141
+ /* @__PURE__ */ jsx(Tabs, { activeTab, tabs: categories, handleTabClick: setActiveTab, underscore: true })
142
+ ] }),
143
+ search && /* @__PURE__ */ jsx(SearchBar, { placeholder: texts.searchPlaceholder, value: search?.value, onClearInput: search?.onClear, onSearchChange: search?.onChange, clearTooltip: texts.searchClearTooltip, iconLeft: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(SearchM, {}), color: theme.palette["grey-600"] }) })
144
+ ] }),
145
+ /* @__PURE__ */ jsx(Drawer.DrawerBody, { style: {
146
+ overflowY: "hidden",
181
147
  flex: 1
182
- }
183
- }, /*#__PURE__*/React.createElement(Drawer.DrawerContent, {
184
- style: {
185
- height: '100%',
148
+ }, children: /* @__PURE__ */ jsx(Drawer.DrawerContent, { style: {
149
+ height: "100%",
186
150
  padding: 0
187
- }
188
- }, /*#__PURE__*/React.createElement(S.FiltersList, {
189
- ref: function ref(el) {
151
+ }, children: /* @__PURE__ */ jsx(FiltersList, { ref: (el) => {
190
152
  el && setListHeight(el.offsetHeight);
191
- }
192
- }, activeCategory.items.length ? /*#__PURE__*/React.createElement(Scrollbar, {
193
- absolute: true,
194
- loading: loading,
195
- onScroll: handleScroll,
196
- hasMore: !(search != null && search.value) && activeCategory.hasMore,
197
- fetchData: function fetchData() {
198
- return _fetchData(activeCategory);
199
- },
200
- style: {
201
- padding: '0px 24px'
202
- }
203
- }, /*#__PURE__*/React.createElement(List, {
204
- width: DRAWER_WIDTH - 2 * FILTER_LIST_PADDING,
205
- height: listHeight,
206
- itemCount: activeCategory.items.length,
207
- itemSize: FILTER_ITEM_HEIGHT + FILTER_ITEM_MARGIN_BOTTOM,
208
- style: listStyle,
209
- ref: listRef
210
- }, RenderRow)) : /*#__PURE__*/React.createElement(Result, {
211
- type: "no-results",
212
- noSearchResults: true,
213
- description: texts.noResults
214
- })))));
153
+ }, children: activeCategory.items.length ? /* @__PURE__ */ jsx(Scrollbar, { absolute: true, loading, onScroll: handleScroll, hasMore: !search?.value && activeCategory.hasMore, fetchData: () => fetchData(activeCategory), style: {
154
+ padding: "0px 24px"
155
+ }, children: /* @__PURE__ */ jsx(FixedSizeList, { width: DRAWER_WIDTH - 2 * FILTER_LIST_PADDING, height: listHeight, itemCount: activeCategory.items.length, itemSize: FILTER_ITEM_HEIGHT + FILTER_ITEM_MARGIN_BOTTOM, style: listStyle, ref: listRef, children: RenderRow }) }) : /* @__PURE__ */ jsx(Result, { type: "no-results", noSearchResults: true, description: texts.noResults }) }) }) })
156
+ ] });
157
+ };
158
+ const ItemFilter_default = injectIntl(withTheme(ItemFilter));
159
+ export {
160
+ ItemFilter_default as default
215
161
  };
216
- export default injectIntl(withTheme(ItemFilter));
package/dist/ItemFilter.types.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import type React from 'react';
2
- import { type ItemProps } from '@synerise/ds-manageable-list';
1
+ import { default as React } from 'react';
2
+ import { ItemProps } from '@synerise/ds-manageable-list';
3
3
  export type Category = {
4
4
  label: string;
5
5
  items: Item[];
package/dist/ItemFilter.types.js CHANGED
@@ -1 +1 @@
1
- export {};
1
+
package/dist/index.js CHANGED
@@ -1,2 +1,4 @@
1
- export { default } from './ItemFilter';
2
- export * from './ItemFilter.types';
1
+ import { default as default2 } from "./ItemFilter.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";
package/dist/modules.d.ts ADDED
File without changes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-item-filter",
3
- "version": "1.0.68",
3
+ "version": "1.0.70",
4
4
  "description": "ItemFilter 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",
@@ -35,15 +35,15 @@
35
35
  ],
36
36
  "types": "dist/index.d.ts",
37
37
  "dependencies": {
38
- "@synerise/ds-button": "^1.5.16",
39
- "@synerise/ds-drawer": "^1.1.0",
40
- "@synerise/ds-icon": "^1.14.1",
41
- "@synerise/ds-manageable-list": "^1.7.10",
42
- "@synerise/ds-result": "^1.0.47",
43
- "@synerise/ds-scrollbar": "^1.2.15",
44
- "@synerise/ds-search-bar": "^1.4.18",
45
- "@synerise/ds-tabs": "^1.1.22",
46
- "@synerise/ds-typography": "^1.1.11",
38
+ "@synerise/ds-button": "^1.5.18",
39
+ "@synerise/ds-drawer": "^1.1.2",
40
+ "@synerise/ds-icon": "^1.15.1",
41
+ "@synerise/ds-manageable-list": "^1.7.12",
42
+ "@synerise/ds-result": "^1.0.49",
43
+ "@synerise/ds-scrollbar": "^1.2.17",
44
+ "@synerise/ds-search-bar": "^1.4.20",
45
+ "@synerise/ds-tabs": "^1.1.24",
46
+ "@synerise/ds-typography": "^1.1.13",
47
47
  "react-window": "^1.8.11"
48
48
  },
49
49
  "peerDependencies": {
@@ -52,5 +52,5 @@
52
52
  "react-intl": ">=3.12.0 <= 6.8",
53
53
  "styled-components": "^5.3.3"
54
54
  },
55
- "gitHead": "8dfafc5d7278f09d430f1e7499782d05c76b47c0"
55
+ "gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
56
56
  }