@synerise/ds-items-roll 1.5.11 → 1.5.13
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.
- package/CHANGELOG.md +8 -0
- package/dist/Extras/Extras.d.ts +3 -3
- package/dist/Extras/Extras.js +13 -21
- package/dist/Extras/index.js +4 -1
- package/dist/ItemsRoll.d.ts +2 -2
- package/dist/ItemsRoll.js +71 -101
- package/dist/ItemsRoll.styles.d.ts +14 -14
- package/dist/ItemsRoll.styles.js +78 -77
- package/dist/ItemsRoll.types.d.ts +5 -5
- package/dist/ItemsRoll.types.js +1 -1
- package/dist/ItemsRollComponents/Footer.d.ts +2 -2
- package/dist/ItemsRollComponents/Footer.js +60 -92
- package/dist/ItemsRollComponents/Footer.types.d.ts +2 -2
- package/dist/ItemsRollComponents/Footer.types.js +1 -1
- package/dist/ItemsRollComponents/Header.d.ts +2 -2
- package/dist/ItemsRollComponents/Header.js +41 -47
- package/dist/ItemsRollComponents/Header.types.d.ts +4 -4
- package/dist/ItemsRollComponents/Header.types.js +1 -1
- package/dist/ItemsRollComponents/ItemRemoveIcon.d.ts +2 -2
- package/dist/ItemsRollComponents/ItemRemoveIcon.js +17 -25
- package/dist/ItemsRollComponents/ItemRemoveIcon.styles.d.ts +1 -1
- package/dist/ItemsRollComponents/ItemRemoveIcon.styles.js +6 -3
- package/dist/ItemsRollComponents/ItemRemoveIcon.types.d.ts +2 -2
- package/dist/ItemsRollComponents/ItemRemoveIcon.types.js +1 -1
- package/dist/ItemsRollComponents/List.d.ts +3 -3
- package/dist/ItemsRollComponents/List.js +32 -53
- package/dist/ItemsRollComponents/List.types.d.ts +2 -2
- package/dist/ItemsRollComponents/List.types.js +1 -1
- package/dist/ItemsRollComponents/ListItem.d.ts +2 -2
- package/dist/ItemsRollComponents/ListItem.js +21 -31
- package/dist/ItemsRollComponents/ListItem.styles.d.ts +2 -2
- package/dist/ItemsRollComponents/ListItem.styles.js +10 -6
- package/dist/ItemsRollComponents/ListItem.types.d.ts +2 -2
- package/dist/ItemsRollComponents/ListItem.types.js +1 -1
- package/dist/ItemsRollComponents/index.js +8 -3
- package/dist/index.js +4 -1
- package/dist/modules.d.js +1 -1
- package/dist/modules.d.ts +0 -0
- package/package.json +16 -15
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.5.13](https://github.com/Synerise/synerise-design/compare/@synerise/ds-items-roll@1.5.12...@synerise/ds-items-roll@1.5.13) (2026-04-01)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-items-roll
|
|
9
|
+
|
|
10
|
+
## [1.5.12](https://github.com/Synerise/synerise-design/compare/@synerise/ds-items-roll@1.5.11...@synerise/ds-items-roll@1.5.12) (2026-03-24)
|
|
11
|
+
|
|
12
|
+
**Note:** Version bump only for package @synerise/ds-items-roll
|
|
13
|
+
|
|
6
14
|
## [1.5.11](https://github.com/Synerise/synerise-design/compare/@synerise/ds-items-roll@1.5.10...@synerise/ds-items-roll@1.5.11) (2026-03-20)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @synerise/ds-items-roll
|
package/dist/Extras/Extras.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { ListItemProps } from '@synerise/ds-list-item';
|
|
3
|
+
import { ItemRollElement } from '../ItemsRoll.types';
|
|
4
4
|
export type ExtrasProps = {
|
|
5
5
|
actions: ItemRollElement<ListItemProps>[];
|
|
6
6
|
};
|
package/dist/Extras/Extras.js
CHANGED
|
@@ -1,22 +1,14 @@
|
|
|
1
|
-
import
|
|
2
|
-
import Button from
|
|
3
|
-
import { DropdownMenu } from
|
|
4
|
-
import Icon, { OptionHorizontalM } from
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
asChild: true
|
|
15
|
-
}, /*#__PURE__*/React.createElement(Button, {
|
|
16
|
-
type: "ghost",
|
|
17
|
-
mode: "single-icon"
|
|
18
|
-
}, /*#__PURE__*/React.createElement(Icon, {
|
|
19
|
-
component: /*#__PURE__*/React.createElement(OptionHorizontalM, null)
|
|
20
|
-
})));
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import Button from "@synerise/ds-button";
|
|
3
|
+
import { DropdownMenu } from "@synerise/ds-dropdown";
|
|
4
|
+
import Icon, { OptionHorizontalM } from "@synerise/ds-icon";
|
|
5
|
+
const Extras = ({
|
|
6
|
+
actions
|
|
7
|
+
}) => {
|
|
8
|
+
return /* @__PURE__ */ jsx(DropdownMenu, { dataSource: actions, trigger: ["click"], placement: "bottomRight", popoverProps: {
|
|
9
|
+
testId: "items-roll-actions"
|
|
10
|
+
}, asChild: true, children: /* @__PURE__ */ jsx(Button, { type: "ghost", mode: "single-icon", children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(OptionHorizontalM, {}) }) }) });
|
|
11
|
+
};
|
|
12
|
+
export {
|
|
13
|
+
Extras as default
|
|
21
14
|
};
|
|
22
|
-
export default Extras;
|
package/dist/Extras/index.js
CHANGED
package/dist/ItemsRoll.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { ItemsRollProps } from './ItemsRoll.types';
|
|
3
3
|
export declare const ItemsRoll: ({ actions, changeSelectionIcon, changeSelectionDropdownProps, className, customSidebarActions, groups, hideSearch, isDisabled, items, maxToShowItems, onClearAll, onChangeSelection, onItemClick, onItemRemove, onSearchClear, onSearch, renderCount, searchValue, searchPlaceholder, showMoreStep, style, texts, useFooter, }: ItemsRollProps) => React.JSX.Element;
|
|
4
4
|
export default ItemsRoll;
|
package/dist/ItemsRoll.js
CHANGED
|
@@ -1,137 +1,107 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import { useIntl } from
|
|
4
|
-
import Panel from
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
1
|
+
import { jsxs, Fragment, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useState, useEffect, useCallback, useMemo } from "react";
|
|
3
|
+
import { useIntl } from "react-intl";
|
|
4
|
+
import Panel from "@synerise/ds-panel";
|
|
5
|
+
import { Bold, Divider } from "./ItemsRoll.styles.js";
|
|
6
|
+
import Footer from "./ItemsRollComponents/Footer.js";
|
|
7
|
+
import Header from "./ItemsRollComponents/Header.js";
|
|
8
|
+
import List from "./ItemsRollComponents/List.js";
|
|
9
|
+
const ItemsRoll = ({
|
|
10
|
+
actions,
|
|
11
|
+
changeSelectionIcon,
|
|
12
|
+
changeSelectionDropdownProps,
|
|
13
|
+
className,
|
|
14
|
+
customSidebarActions,
|
|
15
|
+
groups,
|
|
16
|
+
hideSearch,
|
|
17
|
+
isDisabled,
|
|
18
|
+
items,
|
|
19
|
+
maxToShowItems = 10,
|
|
20
|
+
onClearAll,
|
|
21
|
+
onChangeSelection,
|
|
22
|
+
onItemClick,
|
|
23
|
+
onItemRemove,
|
|
24
|
+
onSearchClear,
|
|
25
|
+
onSearch,
|
|
26
|
+
renderCount,
|
|
27
|
+
searchValue,
|
|
28
|
+
searchPlaceholder,
|
|
29
|
+
showMoreStep = 10,
|
|
30
|
+
style,
|
|
31
|
+
texts,
|
|
32
|
+
useFooter
|
|
33
|
+
}) => {
|
|
34
|
+
const intl = useIntl();
|
|
35
|
+
const defaultTexts = {
|
|
35
36
|
changeSelectionLabel: intl.formatMessage({
|
|
36
|
-
id:
|
|
37
|
+
id: "DS.ITEMS-ROLL.CHANGE-SELECTION"
|
|
37
38
|
}),
|
|
38
39
|
clearAllLabel: intl.formatMessage({
|
|
39
|
-
id:
|
|
40
|
+
id: "DS.ITEMS-ROLL.CLEAR-ALL"
|
|
40
41
|
}),
|
|
41
42
|
searchClearTooltipLabel: intl.formatMessage({
|
|
42
|
-
id:
|
|
43
|
+
id: "DS.ITEMS-ROLL.CLEAR-TOOLTIP"
|
|
43
44
|
}),
|
|
44
45
|
itemsLabel: intl.formatMessage({
|
|
45
|
-
id:
|
|
46
|
+
id: "DS.ITEMS-ROLL.ITEMS"
|
|
46
47
|
}),
|
|
47
48
|
moreLabel: intl.formatMessage({
|
|
48
|
-
id:
|
|
49
|
+
id: "DS.ITEMS-ROLL.MORE"
|
|
49
50
|
}),
|
|
50
51
|
noResultsLabel: intl.formatMessage({
|
|
51
|
-
id:
|
|
52
|
+
id: "DS.ITEMS-ROLL.NO-RESULTS"
|
|
52
53
|
}),
|
|
53
54
|
popconfirmNoLabel: intl.formatMessage({
|
|
54
|
-
id:
|
|
55
|
+
id: "DS.ITEMS-ROLL.CONFIRM-NO"
|
|
55
56
|
}),
|
|
56
57
|
popconfirmTitleLabel: intl.formatMessage({
|
|
57
|
-
id:
|
|
58
|
+
id: "DS.ITEMS-ROLL.CONFIRM-TITLE"
|
|
58
59
|
}),
|
|
59
60
|
popconfirmYesLabel: intl.formatMessage({
|
|
60
|
-
id:
|
|
61
|
+
id: "DS.ITEMS-ROLL.CONFIRM-YES"
|
|
61
62
|
}),
|
|
62
63
|
removeTooltipLabel: intl.formatMessage({
|
|
63
|
-
id:
|
|
64
|
+
id: "DS.ITEMS-ROLL.REMOVE-TOOLTIP"
|
|
64
65
|
}),
|
|
65
66
|
showLabel: intl.formatMessage({
|
|
66
|
-
id:
|
|
67
|
+
id: "DS.ITEMS-ROLL.SHOW"
|
|
67
68
|
}),
|
|
68
69
|
showLessLabel: intl.formatMessage({
|
|
69
|
-
id:
|
|
70
|
+
id: "DS.ITEMS-ROLL.SHOW-LESS"
|
|
70
71
|
})
|
|
71
72
|
};
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
73
|
+
const allTexts = texts ? {
|
|
74
|
+
...defaultTexts,
|
|
75
|
+
...texts
|
|
76
|
+
} : defaultTexts;
|
|
77
|
+
const [visibleItemsAmount, setVisibleItemsAmount] = useState(maxToShowItems);
|
|
78
|
+
useEffect(() => {
|
|
77
79
|
setVisibleItemsAmount(maxToShowItems);
|
|
78
80
|
}, [maxToShowItems]);
|
|
79
|
-
|
|
81
|
+
const showAdditionalItems = useCallback(() => {
|
|
80
82
|
if (visibleItemsAmount + showMoreStep < items.length) {
|
|
81
83
|
setVisibleItemsAmount(visibleItemsAmount + showMoreStep);
|
|
82
84
|
} else {
|
|
83
85
|
setVisibleItemsAmount(items.length);
|
|
84
86
|
}
|
|
85
87
|
}, [items.length, visibleItemsAmount, showMoreStep]);
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
}, [items, visibleItemsAmount]);
|
|
89
|
-
var showDefaultItemsAmount = useCallback(function () {
|
|
88
|
+
const visibleItems = useMemo(() => visibleItemsAmount === items.length ? items : items.slice(0, visibleItemsAmount), [items, visibleItemsAmount]);
|
|
89
|
+
const showDefaultItemsAmount = useCallback(() => {
|
|
90
90
|
setVisibleItemsAmount(maxToShowItems);
|
|
91
91
|
}, [maxToShowItems]);
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
hideSearch: hideSearch,
|
|
108
|
-
itemsCount: itemsCount,
|
|
109
|
-
onChangeSelection: onChangeSelection,
|
|
110
|
-
onSearch: onSearch,
|
|
111
|
-
onSearchClear: onSearchClear,
|
|
112
|
-
searchValue: searchValue,
|
|
113
|
-
searchPlaceholder: searchPlaceholder
|
|
114
|
-
}), /*#__PURE__*/React.createElement(S.Divider, {
|
|
115
|
-
dashed: true
|
|
116
|
-
}), /*#__PURE__*/React.createElement(List, {
|
|
117
|
-
groups: groups,
|
|
118
|
-
items: items,
|
|
119
|
-
onItemClick: onItemClick,
|
|
120
|
-
onItemRemove: !isDisabled ? onItemRemove : undefined,
|
|
121
|
-
noResultsLabel: allTexts.noResultsLabel,
|
|
122
|
-
removeTooltipLabel: allTexts.removeTooltipLabel,
|
|
123
|
-
searchValue: searchValue,
|
|
124
|
-
visibleItems: visibleItems
|
|
125
|
-
}), useFooter && /*#__PURE__*/React.createElement(Footer, {
|
|
126
|
-
searchMode: Boolean(searchValue),
|
|
127
|
-
allTexts: allTexts,
|
|
128
|
-
itemsCount: items.length,
|
|
129
|
-
maxToShowItems: maxToShowItems,
|
|
130
|
-
onClearAll: !isDisabled ? onClearAll : undefined,
|
|
131
|
-
showAdditionalItems: showAdditionalItems,
|
|
132
|
-
showDefaultItemsAmount: showDefaultItemsAmount,
|
|
133
|
-
showMoreStep: showMoreStep,
|
|
134
|
-
visibleItemsCount: visibleItems.length
|
|
135
|
-
}));
|
|
92
|
+
const itemsCount = useMemo(() => renderCount ? renderCount(items.length) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
93
|
+
allTexts.itemsLabel,
|
|
94
|
+
": ",
|
|
95
|
+
/* @__PURE__ */ jsx(Bold, { children: items.length })
|
|
96
|
+
] }), [allTexts.itemsLabel, items.length, renderCount]);
|
|
97
|
+
return /* @__PURE__ */ jsxs(Panel, { style: style || {}, className: className || "", "data-testid": "ds-items-roll", radius: 3, p: 12, children: [
|
|
98
|
+
/* @__PURE__ */ jsx(Header, { actions, allTexts, changeSelectionIcon, changeSelectionDropdownProps, customSidebarActions, hideSearch, itemsCount, onChangeSelection, onSearch, onSearchClear, searchValue, searchPlaceholder }),
|
|
99
|
+
/* @__PURE__ */ jsx(Divider, { dashed: true }),
|
|
100
|
+
/* @__PURE__ */ jsx(List, { groups, items, onItemClick, onItemRemove: !isDisabled ? onItemRemove : void 0, noResultsLabel: allTexts.noResultsLabel, removeTooltipLabel: allTexts.removeTooltipLabel, searchValue, visibleItems }),
|
|
101
|
+
useFooter && /* @__PURE__ */ jsx(Footer, { searchMode: Boolean(searchValue), allTexts, itemsCount: items.length, maxToShowItems, onClearAll: !isDisabled ? onClearAll : void 0, showAdditionalItems, showDefaultItemsAmount, showMoreStep, visibleItemsCount: visibleItems.length })
|
|
102
|
+
] });
|
|
103
|
+
};
|
|
104
|
+
export {
|
|
105
|
+
ItemsRoll,
|
|
106
|
+
ItemsRoll as default
|
|
136
107
|
};
|
|
137
|
-
export default ItemsRoll;
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare const ContainerSpaceBetween: import(
|
|
3
|
-
export declare const HeaderRight: import(
|
|
4
|
-
export declare const HeaderLeft: import(
|
|
5
|
-
export declare const ShowButtonsWrapper: import(
|
|
6
|
-
export declare const ListWrapper: import(
|
|
7
|
-
export declare const Bold: import(
|
|
1
|
+
import { StyledButton } from '@synerise/ds-button';
|
|
2
|
+
export declare const ContainerSpaceBetween: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
3
|
+
export declare const HeaderRight: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
4
|
+
export declare const HeaderLeft: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
5
|
+
export declare const ShowButtonsWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
6
|
+
export declare const ListWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
7
|
+
export declare const Bold: import('styled-components').StyledComponent<"span", any, {}, never>;
|
|
8
8
|
export declare const ChangeSelection: StyledButton;
|
|
9
|
-
export declare const SearchWrapper: import(
|
|
9
|
+
export declare const SearchWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
10
10
|
export declare const ShowButton: StyledButton;
|
|
11
|
-
export declare const ShowButtonLabel: import(
|
|
11
|
+
export declare const ShowButtonLabel: import('styled-components').StyledComponent<"span", any, {}, never>;
|
|
12
12
|
export declare const ClearButton: StyledButton;
|
|
13
|
-
export declare const ArrowIcon: import(
|
|
14
|
-
export declare const NoResults: import(
|
|
15
|
-
export declare const NoResultIconWrapper: import(
|
|
16
|
-
export declare const Divider: import(
|
|
13
|
+
export declare const ArrowIcon: 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>;
|
|
14
|
+
export declare const NoResults: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
15
|
+
export declare const NoResultIconWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
16
|
+
export declare const Divider: import('styled-components').StyledComponent<(props: import('@synerise/ds-divider').DividerProps) => React.JSX.Element, any, {
|
|
17
17
|
footer?: boolean;
|
|
18
18
|
}, never>;
|
|
19
|
-
export declare const WarningIcon: import(
|
|
19
|
+
export declare const WarningIcon: 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>;
|
package/dist/ItemsRoll.styles.js
CHANGED
|
@@ -1,115 +1,116 @@
|
|
|
1
|
-
import styled from
|
|
2
|
-
import Button from
|
|
3
|
-
import DividerBase from
|
|
4
|
-
import Icon from
|
|
5
|
-
|
|
1
|
+
import styled from "styled-components";
|
|
2
|
+
import Button from "@synerise/ds-button";
|
|
3
|
+
import DividerBase from "@synerise/ds-divider";
|
|
4
|
+
import Icon from "@synerise/ds-icon";
|
|
5
|
+
const ContainerSpaceBetween = /* @__PURE__ */ styled.div.withConfig({
|
|
6
6
|
displayName: "ItemsRollstyles__ContainerSpaceBetween",
|
|
7
7
|
componentId: "sc-579u47-0"
|
|
8
8
|
})(["display:flex;align-items:center;justify-content:space-between;"]);
|
|
9
|
-
|
|
9
|
+
const HeaderRight = /* @__PURE__ */ styled.div.withConfig({
|
|
10
10
|
displayName: "ItemsRollstyles__HeaderRight",
|
|
11
11
|
componentId: "sc-579u47-1"
|
|
12
12
|
})(["display:flex;align-items:center;justify-content:flex-end;"]);
|
|
13
|
-
|
|
13
|
+
const HeaderLeft = /* @__PURE__ */ styled.div.withConfig({
|
|
14
14
|
displayName: "ItemsRollstyles__HeaderLeft",
|
|
15
15
|
componentId: "sc-579u47-2"
|
|
16
|
-
})(["color:", ";margin-left:12px;height:34px;display:flex;align-items:center;"],
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
export var ShowButtonsWrapper = styled.div.withConfig({
|
|
16
|
+
})(["color:", ";margin-left:12px;height:34px;display:flex;align-items:center;"], ({
|
|
17
|
+
theme
|
|
18
|
+
}) => theme.palette["grey-800"]);
|
|
19
|
+
const ShowButtonsWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
21
20
|
displayName: "ItemsRollstyles__ShowButtonsWrapper",
|
|
22
21
|
componentId: "sc-579u47-3"
|
|
23
22
|
})(["display:flex;align-items:center;justify-content:flex-start;"]);
|
|
24
|
-
|
|
23
|
+
const ListWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
25
24
|
displayName: "ItemsRollstyles__ListWrapper",
|
|
26
25
|
componentId: "sc-579u47-4"
|
|
27
|
-
})(["&&&{.ant-menu-inline,.-inline{border:none;}.ant-menu{.items-roll-list-item{padding-left:12px !important;:hover{svg{fill:", ";}.element-remove-icon{svg{fill:", " !important;:hover{fill:", " !important;}}}}:focus{box-shadow:none !important;background:transparent;}:focus:hover{background-color:", ";}}.ant-menu-item-group-list,.-item-group-list{margin-left:-12px;}.ant-menu-item-group-title,.-item-group-title{font-size:10px;text-transform:uppercase;color:", ";font-weight:500;padding-left:0;padding-right:0;margin-left:-12px;}.ant-menu-item-group:not(:first-child):before,.-item-group:not(:first-child):before{content:'';width:calc(100% + 12px);height:1px;display:block;border-bottom:1px dashed ", ";margin:12px 0px 12px -12px;}}}"],
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
},
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
return theme.palette['grey-500'];
|
|
42
|
-
}, function (_ref7) {
|
|
43
|
-
var theme = _ref7.theme;
|
|
44
|
-
return theme.palette['grey-300'];
|
|
45
|
-
});
|
|
46
|
-
export var Bold = styled.span.withConfig({
|
|
26
|
+
})(["&&&{.ant-menu-inline,.-inline{border:none;}.ant-menu{.items-roll-list-item{padding-left:12px !important;:hover{svg{fill:", ";}.element-remove-icon{svg{fill:", " !important;:hover{fill:", " !important;}}}}:focus{box-shadow:none !important;background:transparent;}:focus:hover{background-color:", ";}}.ant-menu-item-group-list,.-item-group-list{margin-left:-12px;}.ant-menu-item-group-title,.-item-group-title{font-size:10px;text-transform:uppercase;color:", ";font-weight:500;padding-left:0;padding-right:0;margin-left:-12px;}.ant-menu-item-group:not(:first-child):before,.-item-group:not(:first-child):before{content:'';width:calc(100% + 12px);height:1px;display:block;border-bottom:1px dashed ", ";margin:12px 0px 12px -12px;}}}"], ({
|
|
27
|
+
theme
|
|
28
|
+
}) => theme.palette["blue-600"], ({
|
|
29
|
+
theme
|
|
30
|
+
}) => theme.palette["red-600"], ({
|
|
31
|
+
theme
|
|
32
|
+
}) => theme.palette["red-600"], ({
|
|
33
|
+
theme
|
|
34
|
+
}) => theme.palette["grey-050"], ({
|
|
35
|
+
theme
|
|
36
|
+
}) => theme.palette["grey-500"], ({
|
|
37
|
+
theme
|
|
38
|
+
}) => theme.palette["grey-300"]);
|
|
39
|
+
const Bold = /* @__PURE__ */ styled.span.withConfig({
|
|
47
40
|
displayName: "ItemsRollstyles__Bold",
|
|
48
41
|
componentId: "sc-579u47-5"
|
|
49
|
-
})(["color:", ";font-weight:500;margin-left:2px;"],
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
export var ChangeSelection = styled(Button).withConfig({
|
|
42
|
+
})(["color:", ";font-weight:500;margin-left:2px;"], ({
|
|
43
|
+
theme
|
|
44
|
+
}) => theme.palette["grey-800"]);
|
|
45
|
+
const ChangeSelection = /* @__PURE__ */ styled(Button).withConfig({
|
|
54
46
|
displayName: "ItemsRollstyles__ChangeSelection",
|
|
55
47
|
componentId: "sc-579u47-6"
|
|
56
|
-
})(["width:157px;display:flex;align-items:center;padding:4px 9px;font-weight:500;&&&{color:", ";.ds-icon{margin-right:4px;svg{fill:", ";}}}"],
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
});
|
|
63
|
-
export var SearchWrapper = styled.div.withConfig({
|
|
48
|
+
})(["width:157px;display:flex;align-items:center;padding:4px 9px;font-weight:500;&&&{color:", ";.ds-icon{margin-right:4px;svg{fill:", ";}}}"], ({
|
|
49
|
+
theme
|
|
50
|
+
}) => theme.palette["blue-600"], ({
|
|
51
|
+
theme
|
|
52
|
+
}) => theme.palette["blue-600"]);
|
|
53
|
+
const SearchWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
64
54
|
displayName: "ItemsRollstyles__SearchWrapper",
|
|
65
55
|
componentId: "sc-579u47-7"
|
|
66
56
|
})(["margin:0 8px;min-width:32px;flex:1 1 auto;"]);
|
|
67
|
-
|
|
57
|
+
const ShowButton = /* @__PURE__ */ styled(Button).withConfig({
|
|
68
58
|
displayName: "ItemsRollstyles__ShowButton",
|
|
69
59
|
componentId: "sc-579u47-8"
|
|
70
|
-
})(["margin-right:8px;span{font-weight:400;color:", ";}.bold-label{font-weight:500;}"],
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
export var ShowButtonLabel = styled.span.withConfig({
|
|
60
|
+
})(["margin-right:8px;span{font-weight:400;color:", ";}.bold-label{font-weight:500;}"], ({
|
|
61
|
+
theme
|
|
62
|
+
}) => theme.palette["grey-700"]);
|
|
63
|
+
const ShowButtonLabel = /* @__PURE__ */ styled.span.withConfig({
|
|
75
64
|
displayName: "ItemsRollstyles__ShowButtonLabel",
|
|
76
65
|
componentId: "sc-579u47-9"
|
|
77
66
|
})(["font-weight:400;"]);
|
|
78
|
-
|
|
67
|
+
const ClearButton = /* @__PURE__ */ styled(Button).withConfig({
|
|
79
68
|
displayName: "ItemsRollstyles__ClearButton",
|
|
80
69
|
componentId: "sc-579u47-10"
|
|
81
70
|
})(["margin-left:auto;&&&{.ds-icon{margin-top:1px;}}"]);
|
|
82
|
-
|
|
71
|
+
const ArrowIcon = /* @__PURE__ */ styled(Icon).withConfig({
|
|
83
72
|
displayName: "ItemsRollstyles__ArrowIcon",
|
|
84
73
|
componentId: "sc-579u47-11"
|
|
85
|
-
})(["svg{fill:", ";}"],
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
export var NoResults = styled.div.withConfig({
|
|
74
|
+
})(["svg{fill:", ";}"], ({
|
|
75
|
+
theme
|
|
76
|
+
}) => theme.palette["grey-600"]);
|
|
77
|
+
const NoResults = /* @__PURE__ */ styled.div.withConfig({
|
|
90
78
|
displayName: "ItemsRollstyles__NoResults",
|
|
91
79
|
componentId: "sc-579u47-12"
|
|
92
|
-
})(["display:flex;flex-direction:column;align-items:center;justify-content:center;height:144px;color:", ";"],
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
export var NoResultIconWrapper = styled.div.withConfig({
|
|
80
|
+
})(["display:flex;flex-direction:column;align-items:center;justify-content:center;height:144px;color:", ";"], ({
|
|
81
|
+
theme
|
|
82
|
+
}) => theme.palette["grey-600"]);
|
|
83
|
+
const NoResultIconWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
97
84
|
displayName: "ItemsRollstyles__NoResultIconWrapper",
|
|
98
85
|
componentId: "sc-579u47-13"
|
|
99
|
-
})(["width:40px;height:40px;border-radius:50%;margin-bottom:16px;display:flex;align-items:center;justify-content:center;.ds-icon{svg{fill:", ";}}"],
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
export var Divider = styled(DividerBase).withConfig({
|
|
86
|
+
})(["width:40px;height:40px;border-radius:50%;margin-bottom:16px;display:flex;align-items:center;justify-content:center;.ds-icon{svg{fill:", ";}}"], ({
|
|
87
|
+
theme
|
|
88
|
+
}) => theme.palette["grey-600"]);
|
|
89
|
+
const Divider = /* @__PURE__ */ styled(DividerBase).withConfig({
|
|
104
90
|
displayName: "ItemsRollstyles__Divider",
|
|
105
91
|
componentId: "sc-579u47-14"
|
|
106
|
-
})(["&&{margin:", ";}"],
|
|
107
|
-
|
|
108
|
-
});
|
|
109
|
-
export var WarningIcon = styled(Icon).withConfig({
|
|
92
|
+
})(["&&{margin:", ";}"], (props) => props.footer ? "8px 0 12px" : "12px 0 8px");
|
|
93
|
+
const WarningIcon = /* @__PURE__ */ styled(Icon).withConfig({
|
|
110
94
|
displayName: "ItemsRollstyles__WarningIcon",
|
|
111
95
|
componentId: "sc-579u47-15"
|
|
112
|
-
})(["svg{fill:", ";}"],
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
96
|
+
})(["svg{fill:", ";}"], ({
|
|
97
|
+
theme
|
|
98
|
+
}) => theme.palette["yellow-500"]);
|
|
99
|
+
export {
|
|
100
|
+
ArrowIcon,
|
|
101
|
+
Bold,
|
|
102
|
+
ChangeSelection,
|
|
103
|
+
ClearButton,
|
|
104
|
+
ContainerSpaceBetween,
|
|
105
|
+
Divider,
|
|
106
|
+
HeaderLeft,
|
|
107
|
+
HeaderRight,
|
|
108
|
+
ListWrapper,
|
|
109
|
+
NoResultIconWrapper,
|
|
110
|
+
NoResults,
|
|
111
|
+
SearchWrapper,
|
|
112
|
+
ShowButton,
|
|
113
|
+
ShowButtonLabel,
|
|
114
|
+
ShowButtonsWrapper,
|
|
115
|
+
WarningIcon
|
|
116
|
+
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
1
|
+
import { CSSProperties, ReactNode, SVGProps } from 'react';
|
|
2
|
+
import { IntlShape } from 'react-intl';
|
|
3
|
+
import { DropdownProps } from '@synerise/ds-dropdown';
|
|
4
|
+
import { ListItemProps } from '@synerise/ds-list-item';
|
|
5
|
+
import { MenuItemProps } from '@synerise/ds-menu';
|
|
6
6
|
export type ItemRollElement<BaseType extends ListItemProps | MenuItemProps = ListItemProps> = BaseType & {
|
|
7
7
|
id: string;
|
|
8
8
|
group?: string;
|
package/dist/ItemsRoll.types.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { FooterProps } from './Footer.types';
|
|
3
3
|
declare const Footer: ({ allTexts, itemsCount, maxToShowItems, onClearAll, showAdditionalItems, showDefaultItemsAmount, showMoreStep, visibleItemsCount, searchMode, }: FooterProps) => React.JSX.Element | null;
|
|
4
4
|
export default Footer;
|