@synerise/ds-manageable-list 0.23.47 → 0.24.0

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 (10) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/README.md +23 -24
  3. package/dist/Item/Item.js +1 -0
  4. package/dist/Item/SimpleItem/SimpleItem.js +5 -2
  5. package/dist/Item/SimpleItem/SimpleItem.styles.d.ts +3 -1
  6. package/dist/Item/SimpleItem/SimpleItem.styles.js +19 -9
  7. package/dist/Item/SimpleItem/SimpleItem.types.d.ts +1 -0
  8. package/dist/ManageableList.js +4 -2
  9. package/dist/ManageableList.types.d.ts +1 -0
  10. package/package.json +7 -7
package/CHANGELOG.md CHANGED
@@ -3,6 +3,32 @@
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
+ # [0.24.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-manageable-list@0.23.48...@synerise/ds-manageable-list@0.24.0) (2023-02-23)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **manageable-list:** fixes typo in SimpleItem.styles ([e2762d7](https://github.com/Synerise/synerise-design/commit/e2762d7caf7f8129168745740cf7c4e9e2bbbbdd))
12
+
13
+
14
+ ### Features
15
+
16
+ * **manageable-list:** adds style property for ManageableListWrapper ([3ed2199](https://github.com/Synerise/synerise-design/commit/3ed2199f37646a844109a80bb4b547766fb4a510))
17
+ * **manageable-list:** adds styles for selected item ([6dd222f](https://github.com/Synerise/synerise-design/commit/6dd222f0bc8485da3bbbcfe31100c0cbcb7f4252))
18
+ * **manageable-list:** renames selected to isSelected ([54ad6a6](https://github.com/Synerise/synerise-design/commit/54ad6a69d72ddc914bebbdabc78d68afdf610e04))
19
+
20
+
21
+
22
+
23
+
24
+ ## [0.23.48](https://github.com/Synerise/synerise-design/compare/@synerise/ds-manageable-list@0.23.47...@synerise/ds-manageable-list@0.23.48) (2023-02-16)
25
+
26
+ **Note:** Version bump only for package @synerise/ds-manageable-list
27
+
28
+
29
+
30
+
31
+
6
32
  ## [0.23.47](https://github.com/Synerise/synerise-design/compare/@synerise/ds-manageable-list@0.23.46...@synerise/ds-manageable-list@0.23.47) (2023-02-14)
7
33
 
8
34
  **Note:** Version bump only for package @synerise/ds-manageable-list
package/README.md CHANGED
@@ -32,24 +32,25 @@ ManageableList UI Component
32
32
 
33
33
  ## API
34
34
 
35
- | Property | Description | Type | Default |
36
- | ------------------- | -------------------------------------------------------------------------------- | -------------------------------------- | --------- |
37
- | maxToShowItems | Shows x first items, rest are hidden under `show more` button | number | 5 |
38
- | onItemAdd | Callback triggered when user hits `enter` key in the new item input field. | ({ name: string }) => void | - |
39
- | onItemRemove | Callback triggered when user clicks on the remove item button. | ({ id: string }) => void | - |
40
- | onItemEdit | Callback triggered then user hits `enter` key in the edit item name input field. | ({ id: string; name: string }) => void | - |
41
- | onItemSelect | Callback triggered when user clicks on list item. | ({ id: string }) => void | - |
42
- | onChangeOrder | Callback triggered when user changes order of items | (Item[]) => void | - |
43
- | changeOrderByButtons | Allows to change order of items by dedicated buttons in item suffix, requires onChangeOrder property | boolean | - |
44
- | items | Array of list items | Item[] | - |
45
- | loading | Loading state | boolean | - |
46
- | type | Type of list | `default` / `content` / `filter` | `default` |
47
- | addButtonDisabled | Disable add item button | boolean | `false` |
48
- | changeOrderDisabled | Disable change of order | boolean | `false` |
49
- | greyBackground | Change background color of list and list items | boolean | `false` |
50
- | texts | Texts on buttons, confirms and popups | Texts | - |
35
+ | Property | Description | Type | Default |
36
+ | -------------------- | ---------------------------------------------------------------------------------------------------- | -------------------------------------- | --------- |
37
+ | maxToShowItems | Shows x first items, rest are hidden under `show more` button | number | 5 |
38
+ | onItemAdd | Callback triggered when user hits `enter` key in the new item input field. | ({ name: string }) => void | - |
39
+ | onItemRemove | Callback triggered when user clicks on the remove item button. | ({ id: string }) => void | - |
40
+ | onItemEdit | Callback triggered then user hits `enter` key in the edit item name input field. | ({ id: string; name: string }) => void | - |
41
+ | onItemSelect | Callback triggered when user clicks on list item. | ({ id: string }) => void | - |
42
+ | onChangeOrder | Callback triggered when user changes order of items | (Item[]) => void | - |
43
+ | changeOrderByButtons | Allows to change order of items by dedicated buttons in item suffix, requires onChangeOrder property | boolean | - |
44
+ | items | Array of list items | Item[] | - |
45
+ | loading | Loading state | boolean | - |
46
+ | type | Type of list | `default` / `content` / `filter` | `default` |
47
+ | addButtonDisabled | Disable add item button | boolean | `false` |
48
+ | changeOrderDisabled | Disable change of order | boolean | `false` |
49
+ | greyBackground | Change background color of list and list items | boolean | `false` |
50
+ | texts | Texts on buttons, confirms and popups | Texts | - |
51
51
  | searchQuery | Search query used to highlight list item name | string | - |
52
52
  | additionalActions | Additional actions for single list item | AdditionalAction[] | - |
53
+ | styles | Additional styles for ManageableList wrapper | React.CSSProperties | - |
53
54
 
54
55
  ### Texts
55
56
 
@@ -84,13 +85,11 @@ ManageableList UI Component
84
85
  | icon | Icon (ds-icon) | Icon | - |
85
86
  | content | Content rendered in content type list | React.ReactNode | - |
86
87
 
87
-
88
88
  #### AdditionalAction
89
89
 
90
- | Property | Description | Type | Default |
91
- | ------------ | --------------------------------------------------- | --------------- | ------- |
92
- | tooltip | Name of action visible on tooltip | string | - |
93
- | icon | ds-icon component visible on item | React.ReactNode | - |
94
- | onClick | Callback triggered when user clicks on icon | (item: ItemProps) => void | - |
95
- | color | color of icon | string | grey-500 |
96
-
90
+ | Property | Description | Type | Default |
91
+ | -------- | ------------------------------------------- | ------------------------- | -------- |
92
+ | tooltip | Name of action visible on tooltip | string | - |
93
+ | icon | ds-icon component visible on item | React.ReactNode | - |
94
+ | onClick | Callback triggered when user clicks on icon | (item: ItemProps) => void | - |
95
+ | color | color of icon | string | grey-500 |
package/dist/Item/Item.js CHANGED
@@ -69,6 +69,7 @@ var Item = function Item(_ref) {
69
69
  onUpdate: onUpdate,
70
70
  onRemove: onRemove,
71
71
  texts: texts,
72
+ selected: selected,
72
73
  additionalActions: additionalActions
73
74
  });
74
75
  }
package/dist/Item/SimpleItem/SimpleItem.js CHANGED
@@ -11,7 +11,8 @@ var SimpleItem = function SimpleItem(_ref) {
11
11
  onSelect = _ref.onSelect,
12
12
  onUpdate = _ref.onUpdate,
13
13
  texts = _ref.texts,
14
- additionalActions = _ref.additionalActions;
14
+ additionalActions = _ref.additionalActions,
15
+ selected = _ref.selected;
15
16
 
16
17
  var _React$useState = React.useState(false),
17
18
  editMode = _React$useState[0],
@@ -29,7 +30,9 @@ var SimpleItem = function SimpleItem(_ref) {
29
30
  var enterEditMode = React.useCallback(function () {
30
31
  setEditMode(true);
31
32
  }, []);
32
- return /*#__PURE__*/React.createElement(S.ItemContainer, null, /*#__PURE__*/React.createElement(List.Item, {
33
+ return /*#__PURE__*/React.createElement(S.ItemContainer, {
34
+ isSelected: !!selected
35
+ }, /*#__PURE__*/React.createElement(List.Item, {
33
36
  icon: /*#__PURE__*/React.createElement(Icon, {
34
37
  className: "ds-manageable-list-item-icon",
35
38
  component: item.icon,
package/dist/Item/SimpleItem/SimpleItem.styles.d.ts CHANGED
@@ -1,6 +1,8 @@
1
1
  /// <reference types="react" />
2
2
  export declare const ItemLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
3
3
  export declare const ItemLabelWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
4
- export declare const ItemContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
4
+ export declare const ItemContainer: import("styled-components").StyledComponent<"div", any, {
5
+ isSelected: boolean;
6
+ }, never>;
5
7
  export declare const DescriptionIcon: import("styled-components").StyledComponent<import("react").FC<import("@synerise/ds-icon").IconProps>, any, {}, never>;
6
8
  export declare const ItemLabelWithIcon: import("styled-components").StyledComponent<"span", any, {}, never>;
package/dist/Item/SimpleItem/SimpleItem.styles.js CHANGED
@@ -18,17 +18,27 @@ export var ItemLabelWrapper = styled.div.withConfig({
18
18
  export var ItemContainer = styled.div.withConfig({
19
19
  displayName: "SimpleItemstyles__ItemContainer",
20
20
  componentId: "sc-1eyeaqw-2"
21
- })(["width:100%;display:flex;flex-direction:row;align-items:center;justify-content:stretch;li{width:100%;& > div{height:24px;&:nth-child(2){overflow:hidden;}}}.ds-manageable-list-item-icon{svg{color:", ";fill:", ";}}&:hover{", "{display:flex;}.ds-manageable-list-item-icon{svg{color:", ";fill:", ";}}}"], function (_ref2) {
22
- var theme = _ref2.theme;
23
- return theme.palette['grey-600'];
21
+ })(["width:100%;display:flex;flex-direction:row;align-items:center;justify-content:stretch;background-color:", ";li{width:100%;.title{color:", ";}& > div{height:24px;&:nth-child(2){overflow:hidden;}}}.ds-manageable-list-item-icon{svg{color:", ";fill:", ";}}&:hover{", "{display:flex;}.ds-manageable-list-item-icon{svg{color:", ";fill:", ";}}}"], function (_ref2) {
22
+ var theme = _ref2.theme,
23
+ isSelected = _ref2.isSelected;
24
+ return isSelected ? theme.palette['blue-050'] : theme.palette.white;
24
25
  }, function (_ref3) {
25
- var theme = _ref3.theme;
26
- return theme.palette['grey-600'];
27
- }, ItemActionsWrapper, function (_ref4) {
28
- var theme = _ref4.theme;
29
- return theme.palette['blue-600'];
26
+ var theme = _ref3.theme,
27
+ isSelected = _ref3.isSelected;
28
+ return isSelected ? theme.palette['blue-600'] : theme.palette['grey-600'];
29
+ }, function (_ref4) {
30
+ var theme = _ref4.theme,
31
+ isSelected = _ref4.isSelected;
32
+ return isSelected ? theme.palette['blue-600'] : theme.palette['grey-600'];
30
33
  }, function (_ref5) {
31
- var theme = _ref5.theme;
34
+ var theme = _ref5.theme,
35
+ isSelected = _ref5.isSelected;
36
+ return isSelected ? theme.palette['blue-600'] : theme.palette['grey-600'];
37
+ }, ItemActionsWrapper, function (_ref6) {
38
+ var theme = _ref6.theme;
39
+ return theme.palette['blue-600'];
40
+ }, function (_ref7) {
41
+ var theme = _ref7.theme;
32
42
  return theme.palette['blue-600'];
33
43
  });
34
44
  export var DescriptionIcon = styled(Icon).withConfig({
package/dist/Item/SimpleItem/SimpleItem.types.d.ts CHANGED
@@ -17,4 +17,5 @@ export declare type Props = {
17
17
  [k: string]: string | React.ReactNode;
18
18
  };
19
19
  additionalActions?: AdditionalAction[];
20
+ selected?: boolean;
20
21
  };
package/dist/ManageableList.js CHANGED
@@ -53,7 +53,8 @@ var ManageableList = function ManageableList(_ref) {
53
53
  texts = _ref.texts,
54
54
  _ref$changeOrderByBut = _ref.changeOrderByButtons,
55
55
  changeOrderByButtons = _ref$changeOrderByBut === void 0 ? false : _ref$changeOrderByBut,
56
- additionalActions = _ref.additionalActions;
56
+ additionalActions = _ref.additionalActions,
57
+ style = _ref.style;
57
58
 
58
59
  var _React$useState = React.useState(expandedIds),
59
60
  stateExpandedIds = _React$useState[0],
@@ -237,7 +238,8 @@ var ManageableList = function ManageableList(_ref) {
237
238
  return /*#__PURE__*/React.createElement(S.ManageableListContainer, {
238
239
  className: "ds-manageable-list " + (className || ''),
239
240
  listType: type,
240
- greyBackground: greyBackground
241
+ greyBackground: greyBackground,
242
+ style: style
241
243
  }, type === ListType.DEFAULT && Boolean(onItemAdd) && /*#__PURE__*/React.createElement(AddItemWithName, {
242
244
  addItemLabel: itemTexts.addItemLabel,
243
245
  onItemAdd: onItemAdd,
package/dist/ManageableList.types.d.ts CHANGED
@@ -52,6 +52,7 @@ export interface ManageableListProps<T extends object> {
52
52
  expandedIds?: React.ReactText[];
53
53
  changeOrderByButtons?: boolean;
54
54
  additionalActions?: AdditionalAction[];
55
+ style?: React.CSSProperties;
55
56
  }
56
57
  export declare type Texts = {
57
58
  addItemLabel?: string | React.ReactNode;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-manageable-list",
3
- "version": "0.23.47",
3
+ "version": "0.24.0",
4
4
  "description": "ManageableList UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -32,18 +32,18 @@
32
32
  ],
33
33
  "types": "dist/index.d.ts",
34
34
  "dependencies": {
35
- "@synerise/ds-avatar": "^0.14.48",
35
+ "@synerise/ds-avatar": "^0.14.49",
36
36
  "@synerise/ds-button": "^0.17.11",
37
- "@synerise/ds-dropdown": "^0.17.47",
37
+ "@synerise/ds-dropdown": "^0.17.48",
38
38
  "@synerise/ds-icon": "^0.53.0",
39
- "@synerise/ds-inline-edit": "^0.6.44",
40
- "@synerise/ds-input": "^0.18.30",
39
+ "@synerise/ds-inline-edit": "^0.6.45",
40
+ "@synerise/ds-input": "^0.18.31",
41
41
  "@synerise/ds-list": "^0.6.27",
42
42
  "@synerise/ds-menu": "^0.17.3",
43
43
  "@synerise/ds-modal": "^0.16.9",
44
44
  "@synerise/ds-popconfirm": "^0.10.2",
45
45
  "@synerise/ds-result": "^0.6.18",
46
- "@synerise/ds-tags": "^0.7.4",
46
+ "@synerise/ds-tags": "^0.7.5",
47
47
  "@synerise/ds-tooltip": "^0.12.0",
48
48
  "@synerise/ds-typography": "^0.12.7",
49
49
  "@synerise/ds-utils": "^0.19.0",
@@ -58,5 +58,5 @@
58
58
  "react": ">=16.9.0 < 17.0.0",
59
59
  "styled-components": "^4.4.0"
60
60
  },
61
- "gitHead": "dcd2dfdd97402a7333564d0efb50898e7b97ac0b"
61
+ "gitHead": "d962ad261dadffcbc4397d23b5e77b7a4450c877"
62
62
  }