@synerise/ds-card-tabs 0.11.6 → 0.13.1

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 (11) hide show
  1. package/CHANGELOG.md +58 -0
  2. package/README.md +1 -0
  3. package/dist/CardTab/CardTab.d.ts +1 -1
  4. package/dist/CardTab/CardTab.js +38 -16
  5. package/dist/CardTab/CardTab.styles.d.ts +1 -0
  6. package/dist/CardTab/CardTab.styles.js +1 -1
  7. package/dist/CardTab/CardTab.types.d.ts +1 -0
  8. package/dist/CardTab/CardTabActions/CardTabActions.js +2 -2
  9. package/dist/CardTab/CardTabActions/CardTabActions.types.d.ts +3 -2
  10. package/dist/CardTabs.styles.js +1 -1
  11. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,64 @@
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.13.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@0.13.0...@synerise/ds-card-tabs@0.13.1) (2022-06-15)
7
+
8
+ **Note:** Version bump only for package @synerise/ds-card-tabs
9
+
10
+
11
+
12
+
13
+
14
+ # [0.13.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@0.12.2...@synerise/ds-card-tabs@0.13.0) (2022-04-29)
15
+
16
+
17
+ ### Features
18
+
19
+ * **card-tabs:** adds itemData prop for addional item data ([08b0cfa](https://github.com/Synerise/synerise-design/commit/08b0cfa53e2ae25d76947d79327b52a94434940f))
20
+
21
+
22
+
23
+
24
+
25
+ ## [0.12.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@0.12.1...@synerise/ds-card-tabs@0.12.2) (2022-04-12)
26
+
27
+
28
+ ### Bug Fixes
29
+
30
+ * **condition:** rules-of-hooks dependencies ([10e573e](https://github.com/Synerise/synerise-design/commit/10e573e018ca7e2f69f3f317f35d51eace89ded8))
31
+
32
+
33
+
34
+
35
+
36
+ ## [0.12.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@0.12.0...@synerise/ds-card-tabs@0.12.1) (2022-04-12)
37
+
38
+
39
+ ### Bug Fixes
40
+
41
+ * fix filter dropdowns ([eaab107](https://github.com/Synerise/synerise-design/commit/eaab107b6dca7401a17c2e36806febd11edc677b))
42
+
43
+
44
+
45
+
46
+
47
+ # [0.12.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@0.11.6...@synerise/ds-card-tabs@0.12.0) (2022-04-08)
48
+
49
+
50
+ ### Bug Fixes
51
+
52
+ * **step-card:** hide top duplicate and delete action buttons ([9c7bd51](https://github.com/Synerise/synerise-design/commit/9c7bd51c687ebad7c0474b25cb07e6a5ea478783))
53
+
54
+
55
+ ### Features
56
+
57
+ * **card-tabs:** disable duplication when limit exceeded (cardTab) ([e83cedb](https://github.com/Synerise/synerise-design/commit/e83cedb0f8a975fce5dd7c181d3811715ac66a9f))
58
+ * **card-tabs:** onDuplicate, onRemove accept undefined; stories, tests ([6cfd41d](https://github.com/Synerise/synerise-design/commit/6cfd41dd6db00a81428d92d024a060cc37c32239))
59
+
60
+
61
+
62
+
63
+
6
64
  ## [0.11.6](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@0.11.5...@synerise/ds-card-tabs@0.11.6) (2022-04-05)
7
65
 
8
66
  **Note:** Version bump only for package @synerise/ds-card-tabs
package/README.md CHANGED
@@ -101,6 +101,7 @@ import CardTabs from '@synerise/ds-card-tabs'
101
101
  | texts | Translations of CrudButtons tooltips | CardTabTexts | - |
102
102
  | color | Color of CardTab | `red`/ `green`/ `grey`/ `yellow`/ `blue`/ `pink`/ `mars`/ `orange`/ `fern`/ `cyan`/ `purple`/ `violet` | `yellow` |
103
103
  | colorDot | single color dot | React.ReactNode | - |
104
+ | itemData | Additional item data | any | - |
104
105
 
105
106
  #### CardTabTexts
106
107
 
package/dist/CardTab/CardTab.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import { CardTabProps } from './CardTab.types';
3
- declare const _default: React.ForwardRefExoticComponent<Pick<CardTabProps, "color" | "id" | "name" | "draggable" | "prefix" | "disabled" | "invalidName" | "active" | "invalid" | "greyBackground" | "tag" | "prefixIcon" | "colorDot" | "onDuplicateTab" | "onRemoveTab" | "texts" | "suffixIcon" | "onChangeName" | "onSelectTab"> & {
3
+ declare const _default: React.ForwardRefExoticComponent<Pick<CardTabProps, "color" | "id" | "name" | "draggable" | "prefix" | "disabled" | "invalidName" | "active" | "invalid" | "greyBackground" | "itemData" | "tag" | "prefixIcon" | "colorDot" | "onChangeName" | "onDuplicateTab" | "onRemoveTab" | "texts" | "suffixIcon" | "onSelectTab"> & {
4
4
  forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
5
5
  } & React.RefAttributes<any>> & {
6
6
  WrappedComponent: React.ComponentType<CardTabProps>;
package/dist/CardTab/CardTab.js CHANGED
@@ -34,7 +34,8 @@ var CardTab = function CardTab(_ref) {
34
34
  texts = _ref.texts,
35
35
  _ref$color = _ref.color,
36
36
  color = _ref$color === void 0 ? 'yellow' : _ref$color,
37
- colorDot = _ref.colorDot;
37
+ colorDot = _ref.colorDot,
38
+ itemData = _ref.itemData;
38
39
 
39
40
  var _React$useState = React.useState(false),
40
41
  edited = _React$useState[0],
@@ -65,23 +66,42 @@ var CardTab = function CardTab(_ref) {
65
66
  !!event && event.stopPropagation();
66
67
  setEdited(true);
67
68
  }, [setEdited]);
68
- var handleChangeName = React.useCallback(function (event) {
69
- if (event) {
70
- var value = event.target.value;
71
- setEditedName(value);
69
+ var handleChangeName = React.useMemo(function () {
70
+ if (onChangeName === undefined) {
71
+ return undefined;
72
72
  }
73
- }, [setEditedName]);
73
+
74
+ return function (event) {
75
+ if (event) {
76
+ var nameValue = event.target.value;
77
+ setEditedName(nameValue);
78
+ onChangeName && onChangeName(id, nameValue);
79
+ }
80
+ };
81
+ }, [setEditedName, onChangeName, id]);
74
82
  var handleEditNameBlur = React.useCallback(function () {
75
83
  setEdited(false);
76
84
  onChangeName && onChangeName(id, editedName);
77
85
  }, [onChangeName, id, editedName]);
78
- var handleDuplicate = React.useCallback(function (event) {
79
- !!event && event.stopPropagation();
80
- onDuplicateTab && onDuplicateTab(id);
86
+ var handleDuplicate = React.useMemo(function () {
87
+ if (onDuplicateTab === undefined) {
88
+ return undefined;
89
+ }
90
+
91
+ return function (event) {
92
+ event && event.stopPropagation();
93
+ onDuplicateTab && onDuplicateTab(id);
94
+ };
81
95
  }, [id, onDuplicateTab]);
82
- var handleRemove = React.useCallback(function (event) {
83
- !!event && event.stopPropagation();
84
- onRemoveTab && onRemoveTab(id);
96
+ var handleRemove = React.useMemo(function () {
97
+ if (onRemoveTab === undefined) {
98
+ return undefined;
99
+ }
100
+
101
+ return function (event) {
102
+ event && event.stopPropagation();
103
+ onRemoveTab && onRemoveTab(id);
104
+ };
85
105
  }, [id, onRemoveTab]);
86
106
  var handleSelect = React.useCallback(function (event) {
87
107
  !!event && event.stopPropagation();
@@ -111,7 +131,8 @@ var CardTab = function CardTab(_ref) {
111
131
  },
112
132
  greyBackground: !!greyBackground,
113
133
  "data-id": id,
114
- "data-testid": "card-tab-container"
134
+ "data-testid": "card-tab-container",
135
+ itemData: itemData
115
136
  }, /*#__PURE__*/React.createElement(CardTabPrefix, {
116
137
  colorDot: colorDot,
117
138
  draggable: draggable,
@@ -130,7 +151,9 @@ var CardTab = function CardTab(_ref) {
130
151
  value: editedName,
131
152
  name: "ds-card-tab-input-" + id,
132
153
  onBlur: handleEditNameBlur,
133
- onChange: handleChangeName
154
+ onChange: handleChangeName || function () {
155
+ return undefined;
156
+ }
134
157
  },
135
158
  "data-testid": "card-tab-edit-input"
136
159
  }) : /*#__PURE__*/React.createElement(Tooltip, {
@@ -138,8 +161,7 @@ var CardTab = function CardTab(_ref) {
138
161
  }, /*#__PURE__*/React.createElement(S.CardTabName, {
139
162
  "data-testid": "card-tab-name"
140
163
  }, name))), showCardActions() && /*#__PURE__*/React.createElement(CardTabActions, {
141
- enterEditNameMode: handleEditName,
142
- changeNameAvailable: Boolean(onChangeName),
164
+ onChangeName: handleEditName,
143
165
  onDuplicateTab: handleDuplicate,
144
166
  onRemoveTab: handleRemove,
145
167
  texts: getTexts
package/dist/CardTab/CardTab.styles.d.ts CHANGED
@@ -7,6 +7,7 @@ declare type CardTabContainerProps = {
7
7
  disabled: boolean;
8
8
  edited: boolean;
9
9
  draggable?: boolean;
10
+ itemData?: unknown;
10
11
  };
11
12
  export declare const CardTabSuffix: import("styled-components").StyledComponent<"div", any, {}, never>;
12
13
  export declare const CardTabName: import("styled-components").StyledComponent<"span", any, {}, never>;
package/dist/CardTab/CardTab.styles.js CHANGED
@@ -66,7 +66,7 @@ export var CardDot = styled.div.withConfig({
66
66
  export var CardTabPrefix = styled.div.withConfig({
67
67
  displayName: "CardTabstyles__CardTabPrefix",
68
68
  componentId: "sc-1n86s98-7"
69
- })(["display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:12px;"]);
69
+ })(["display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:16px;"]);
70
70
  export var CardDragPrefix = styled.div.withConfig({
71
71
  displayName: "CardTabstyles__CardDragPrefix",
72
72
  componentId: "sc-1n86s98-8"
package/dist/CardTab/CardTab.types.d.ts CHANGED
@@ -32,4 +32,5 @@ export interface CardTabProps {
32
32
  onDuplicateTab?: (id: number) => void;
33
33
  onRemoveTab?: (id: number) => void;
34
34
  texts?: CardTabTexts;
35
+ itemData?: unknown;
35
36
  }
package/dist/CardTab/CardTabActions/CardTabActions.js CHANGED
@@ -3,7 +3,7 @@ import Cruds from '@synerise/ds-cruds';
3
3
  import * as S from '../CardTab.styles';
4
4
 
5
5
  var CardTabActions = function CardTabActions(_ref) {
6
- var changeNameAvailable = _ref.changeNameAvailable,
6
+ var onChangeName = _ref.onChangeName,
7
7
  enterEditNameMode = _ref.enterEditNameMode,
8
8
  onDuplicateTab = _ref.onDuplicateTab,
9
9
  onRemoveTab = _ref.onRemoveTab,
@@ -11,7 +11,7 @@ var CardTabActions = function CardTabActions(_ref) {
11
11
  return /*#__PURE__*/React.createElement(S.CardTabSuffix, {
12
12
  "data-testid": "card-tab-suffix"
13
13
  }, /*#__PURE__*/React.createElement(Cruds, {
14
- onEdit: changeNameAvailable ? enterEditNameMode : undefined,
14
+ onEdit: onChangeName != null ? onChangeName : enterEditNameMode,
15
15
  editTooltip: texts == null ? void 0 : texts.changeNameTooltip,
16
16
  onDuplicate: onDuplicateTab,
17
17
  duplicateTooltip: texts == null ? void 0 : texts.duplicateTooltip,
package/dist/CardTab/CardTabActions/CardTabActions.types.d.ts CHANGED
@@ -1,8 +1,9 @@
1
1
  import * as React from 'react';
2
2
  import { CardTabTexts } from '../CardTab.types';
3
3
  export interface Props {
4
- changeNameAvailable: boolean;
5
- enterEditNameMode: (event?: React.MouseEvent<HTMLElement>) => void;
4
+ onChangeName?: (event?: React.MouseEvent<HTMLElement>) => void;
5
+ /** @deprecated */
6
+ enterEditNameMode?: (event?: React.MouseEvent<HTMLElement>) => void;
6
7
  onDuplicateTab?: (event?: React.MouseEvent<HTMLElement>) => void;
7
8
  onRemoveTab?: (event?: React.MouseEvent<HTMLElement>) => void;
8
9
  texts?: CardTabTexts;
package/dist/CardTabs.styles.js CHANGED
@@ -4,7 +4,7 @@ import { CardTabContainer } from './CardTab/CardTab.styles'; // eslint-disable-n
4
4
  export var CardTabsContainer = styled.div.withConfig({
5
5
  displayName: "CardTabsstyles__CardTabsContainer",
6
6
  componentId: "sc-1uu9dja-0"
7
- })(["display:flex;flex-direction:row;algin-items:flex-start;justify-content:flex-start;width:100%;", "{margin-right:12px;}.ds-card-tags-sortable{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:wrap;}.sortable-chosen{cursor:grabbing;background-color:", ";opacity:1;}.sortable-drag{opacity:1 !important;box-shadow:0 16px 32px 0 rgba(35,41,54,0.1);}.sortable-card-ghost-element{background-color:", ";&:hover{background-color:", ";}opacity:1;cursor:grabbing;*{visibility:hidden;}}"], CardTabContainer, function (props) {
7
+ })(["display:flex;flex-direction:row;algin-items:flex-start;justify-content:flex-start;width:100%;", "{margin-right:12px;margin-bottom:16px;}.ds-card-tags-sortable{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:wrap;}.sortable-chosen{cursor:grabbing;background-color:", ";opacity:1;}.sortable-drag{opacity:1 !important;box-shadow:0 16px 32px 0 rgba(35,41,54,0.1);}.sortable-card-ghost-element{background-color:", ";&:hover{background-color:", ";}opacity:1;cursor:grabbing;*{visibility:hidden;}}"], CardTabContainer, function (props) {
8
8
  return props.theme.palette.white;
9
9
  }, function (props) {
10
10
  return props.theme.palette['blue-300'];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-card-tabs",
3
- "version": "0.11.6",
3
+ "version": "0.13.1",
4
4
  "description": "CardTabs UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -35,7 +35,7 @@
35
35
  "@synerise/ds-button": "^0.17.2",
36
36
  "@synerise/ds-cruds": "^0.3.9",
37
37
  "@synerise/ds-icon": "^0.49.0",
38
- "@synerise/ds-inline-edit": "^0.6.10",
38
+ "@synerise/ds-inline-edit": "^0.6.13",
39
39
  "@synerise/ds-typography": "^0.12.2",
40
40
  "react-sortablejs-typescript": "2.0.3",
41
41
  "sortablejs": "^1.10.1"
@@ -48,5 +48,5 @@
48
48
  "devDependencies": {
49
49
  "@types/lodash": "4.14.149"
50
50
  },
51
- "gitHead": "5793ce09feb88b36cc8ca1923ddfcb272b889cb0"
51
+ "gitHead": "d787395998e479858cb58f6d56555e4c51fe45d5"
52
52
  }