@synerise/ds-card-tabs 0.13.50 → 0.13.51

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 (21) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/CardTab/CardTab.d.ts +1 -1
  3. package/dist/CardTab/CardTab.js +85 -55
  4. package/dist/CardTab/CardTab.styles.d.ts +1 -4
  5. package/dist/CardTab/CardTab.styles.js +198 -143
  6. package/dist/CardTab/CardTab.types.d.ts +18 -8
  7. package/dist/CardTab/CardTab.types.js +1 -0
  8. package/dist/CardTab/CardTabActions/CardTabActions.d.ts +2 -2
  9. package/dist/CardTab/CardTabActions/CardTabActions.js +2 -1
  10. package/dist/CardTab/CardTabActions/CardTabActions.types.d.ts +5 -5
  11. package/dist/CardTab/CardTabPrefix/CardTabPrefix.d.ts +2 -2
  12. package/dist/CardTab/CardTabPrefix/CardTabPrefix.js +5 -2
  13. package/dist/CardTab/CardTabPrefix/CardTabPrefix.types.d.ts +3 -3
  14. package/dist/CardTabs.d.ts +2 -2
  15. package/dist/CardTabs.js +7 -6
  16. package/dist/CardTabs.styles.js +2 -4
  17. package/dist/index.d.ts +5 -0
  18. package/dist/index.js +4 -1
  19. package/dist/utils.d.ts +2 -0
  20. package/dist/utils.js +17 -0
  21. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -3,6 +3,21 @@
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.51](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@0.13.50...@synerise/ds-card-tabs@0.13.51) (2023-05-23)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **card-tabs:** changes button creator height ([d822687](https://github.com/Synerise/synerise-design/commit/d822687f69b513d5adb4e67ade2650d454909aae))
12
+ * **card-tabs:** dont show edit crud when not needed ([0e5b2e5](https://github.com/Synerise/synerise-design/commit/0e5b2e5b68393f6b522ce28dc9256e077dc7f3ad))
13
+ * **card-tabs:** fixes sortable ghost item ([6cbac12](https://github.com/Synerise/synerise-design/commit/6cbac12a7dc31a9c458106629125acfa5af24c75))
14
+ * **card-tabs:** implements ui feedback ([f20f3ca](https://github.com/Synerise/synerise-design/commit/f20f3ca5124d0b21e31679e648a4cee681ae82b5))
15
+ * **card-tabs:** updates UX and UI to align with desgins ([8bdbcfd](https://github.com/Synerise/synerise-design/commit/8bdbcfd7088830f6cd5cac9d3e13b5c2d4b4a6ae))
16
+
17
+
18
+
19
+
20
+
6
21
  ## [0.13.50](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@0.13.49...@synerise/ds-card-tabs@0.13.50) (2023-05-20)
7
22
 
8
23
  **Note:** Version bump only for package @synerise/ds-card-tabs
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" | "itemData" | "tag" | "prefixIcon" | "colorDot" | "onChangeName" | "onDuplicateTab" | "onRemoveTab" | "texts" | "suffixIcon" | "onSelectTab"> & {
3
+ declare const _default: React.ForwardRefExoticComponent<Pick<CardTabProps, "name" | "color" | "id" | "draggable" | "prefix" | "disabled" | "active" | "invalid" | "greyBackground" | "itemData" | "tag" | "onChangeName" | "onDuplicateTab" | "onRemoveTab" | "onSelectTab" | "colorDot" | "prefixIcon" | "suffixIcon" | "invalidName" | "texts" | "renderSuffix"> & {
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
@@ -5,6 +5,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
5
5
  function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
6
6
 
7
7
  import * as React from 'react';
8
+ import { useState, useMemo, useCallback } from 'react';
8
9
  import Icon from '@synerise/ds-icon';
9
10
  import InlineEdit from '@synerise/ds-inline-edit/dist/InlineEdit';
10
11
  import { injectIntl } from 'react-intl';
@@ -13,43 +14,44 @@ import * as S from './CardTab.styles';
13
14
  import CardTabPrefix from './CardTabPrefix/CardTabPrefix';
14
15
  import CardTabActions from './CardTabActions/CardTabActions';
15
16
 
16
- var CardTab = function CardTab(_ref) {
17
- var intl = _ref.intl,
18
- id = _ref.id,
19
- name = _ref.name,
20
- tag = _ref.tag,
21
- prefix = _ref.prefix,
22
- prefixIcon = _ref.prefixIcon,
23
- suffixIcon = _ref.suffixIcon,
24
- active = _ref.active,
25
- draggable = _ref.draggable,
26
- disabled = _ref.disabled,
27
- invalid = _ref.invalid,
28
- invalidName = _ref.invalidName,
29
- greyBackground = _ref.greyBackground,
30
- onChangeName = _ref.onChangeName,
31
- onSelectTab = _ref.onSelectTab,
32
- onDuplicateTab = _ref.onDuplicateTab,
33
- onRemoveTab = _ref.onRemoveTab,
34
- texts = _ref.texts,
35
- _ref$color = _ref.color,
36
- color = _ref$color === void 0 ? 'yellow' : _ref$color,
37
- colorDot = _ref.colorDot,
38
- itemData = _ref.itemData;
17
+ var CardTab = function CardTab(props) {
18
+ var intl = props.intl,
19
+ id = props.id,
20
+ name = props.name,
21
+ tag = props.tag,
22
+ prefix = props.prefix,
23
+ prefixIcon = props.prefixIcon,
24
+ suffixIcon = props.suffixIcon,
25
+ renderSuffix = props.renderSuffix,
26
+ active = props.active,
27
+ draggable = props.draggable,
28
+ disabled = props.disabled,
29
+ invalid = props.invalid,
30
+ invalidName = props.invalidName,
31
+ greyBackground = props.greyBackground,
32
+ onChangeName = props.onChangeName,
33
+ onSelectTab = props.onSelectTab,
34
+ onDuplicateTab = props.onDuplicateTab,
35
+ onRemoveTab = props.onRemoveTab,
36
+ texts = props.texts,
37
+ _props$color = props.color,
38
+ color = _props$color === void 0 ? 'yellow' : _props$color,
39
+ colorDot = props.colorDot,
40
+ itemData = props.itemData;
39
41
 
40
- var _React$useState = React.useState(false),
41
- edited = _React$useState[0],
42
- setEdited = _React$useState[1];
42
+ var _useState = useState(false),
43
+ edited = _useState[0],
44
+ setEdited = _useState[1];
43
45
 
44
- var _React$useState2 = React.useState(name),
45
- editedName = _React$useState2[0],
46
- setEditedName = _React$useState2[1];
46
+ var _useState2 = useState(name),
47
+ editedName = _useState2[0],
48
+ setEditedName = _useState2[1];
47
49
 
48
- var _React$useState3 = React.useState(false),
49
- pressed = _React$useState3[0],
50
- setPressed = _React$useState3[1];
50
+ var _useState3 = useState(false),
51
+ pressed = _useState3[0],
52
+ setPressed = _useState3[1];
51
53
 
52
- var getTexts = React.useMemo(function () {
54
+ var getTexts = useMemo(function () {
53
55
  return _objectSpread({
54
56
  changeNameTooltip: intl.formatMessage({
55
57
  id: 'DS.CARD-TAB.RENAME'
@@ -59,14 +61,23 @@ var CardTab = function CardTab(_ref) {
59
61
  }),
60
62
  duplicateTooltip: intl.formatMessage({
61
63
  id: 'DS.CARD-TAB.DUPLICATE'
64
+ }),
65
+ changeNameMenuItem: intl.formatMessage({
66
+ id: 'DS.CARD-TAB.RENAME'
67
+ }),
68
+ removeMenuItem: intl.formatMessage({
69
+ id: 'DS.CARD-TAB.REMOVE'
70
+ }),
71
+ duplicateMenuItem: intl.formatMessage({
72
+ id: 'DS.CARD-TAB.DUPLICATE'
62
73
  })
63
74
  }, texts);
64
75
  }, [texts, intl]);
65
- var handleEditName = React.useCallback(function (event) {
76
+ var handleEditName = useCallback(function (event) {
66
77
  !!event && event.stopPropagation();
67
78
  setEdited(true);
68
79
  }, [setEdited]);
69
- var handleChangeName = React.useMemo(function () {
80
+ var handleChangeName = useMemo(function () {
70
81
  if (onChangeName === undefined) {
71
82
  return undefined;
72
83
  }
@@ -79,11 +90,11 @@ var CardTab = function CardTab(_ref) {
79
90
  }
80
91
  };
81
92
  }, [setEditedName, onChangeName, id]);
82
- var handleEditNameBlur = React.useCallback(function () {
93
+ var handleEditNameBlur = useCallback(function () {
83
94
  setEdited(false);
84
95
  onChangeName && onChangeName(id, editedName);
85
96
  }, [onChangeName, id, editedName]);
86
- var handleDuplicate = React.useMemo(function () {
97
+ var handleDuplicate = useMemo(function () {
87
98
  if (onDuplicateTab === undefined) {
88
99
  return undefined;
89
100
  }
@@ -93,7 +104,7 @@ var CardTab = function CardTab(_ref) {
93
104
  onDuplicateTab && onDuplicateTab(id);
94
105
  };
95
106
  }, [id, onDuplicateTab]);
96
- var handleRemove = React.useMemo(function () {
107
+ var handleRemove = useMemo(function () {
97
108
  if (onRemoveTab === undefined) {
98
109
  return undefined;
99
110
  }
@@ -103,19 +114,30 @@ var CardTab = function CardTab(_ref) {
103
114
  onRemoveTab && onRemoveTab(id);
104
115
  };
105
116
  }, [id, onRemoveTab]);
106
- var handleSelect = React.useCallback(function (event) {
117
+ var handleSelect = useCallback(function (event) {
107
118
  !!event && event.stopPropagation();
108
119
  !edited && onSelectTab && onSelectTab(id);
109
120
  }, [edited, id, onSelectTab]);
110
- var showCardActions = React.useCallback(function () {
111
- return (!!onChangeName || !!onDuplicateTab || !!onRemoveTab) && !suffixIcon;
112
- }, [onChangeName, onDuplicateTab, onRemoveTab, suffixIcon]);
121
+ var showCardActions = useCallback(function () {
122
+ return (!!onChangeName || !!onDuplicateTab || !!onRemoveTab) && !suffixIcon && !renderSuffix;
123
+ }, [onChangeName, onDuplicateTab, onRemoveTab, suffixIcon, renderSuffix]);
124
+ var handleSuffixClick = useCallback(function (event) {
125
+ !!event && event.stopPropagation();
126
+ }, []);
127
+
128
+ var suffixProps = _objectSpread({}, props, {
129
+ handleRemove: handleRemove,
130
+ handleDuplicate: handleDuplicate,
131
+ handleEditName: handleEditName,
132
+ texts: getTexts
133
+ });
134
+
135
+ var renderedSuffix = !!renderSuffix && renderSuffix(suffixProps);
113
136
  return /*#__PURE__*/React.createElement(S.CardTabContainer, {
114
137
  className: "" + (pressed ? 'pressed' : ''),
115
138
  edited: edited,
116
139
  active: Boolean(active),
117
- invalid: Boolean(invalid),
118
- invalidName: Boolean(invalidName) && !invalid,
140
+ invalid: Boolean(invalid || invalidName),
119
141
  disabled: !active && Boolean(disabled),
120
142
  draggable: draggable,
121
143
  color: color,
@@ -123,25 +145,28 @@ var CardTab = function CardTab(_ref) {
123
145
  onMouseDown: function onMouseDown() {
124
146
  return setPressed(true);
125
147
  },
126
- onMouseLeave: function onMouseLeave() {
148
+ onMouseLeave: !draggable ? function () {
127
149
  return setPressed(false);
128
- },
150
+ } : undefined,
129
151
  onMouseUp: function onMouseUp() {
130
152
  return setPressed(false);
131
153
  },
154
+ onDragEnd: function onDragEnd() {
155
+ return setPressed(false);
156
+ },
132
157
  greyBackground: !!greyBackground,
133
158
  "data-id": id,
134
159
  "data-testid": "card-tab-container",
135
160
  itemData: itemData
136
- }, /*#__PURE__*/React.createElement(CardTabPrefix, {
161
+ }, !edited && /*#__PURE__*/React.createElement(CardTabPrefix, {
137
162
  colorDot: colorDot,
138
163
  draggable: draggable,
139
164
  prefixIcon: prefixIcon,
140
165
  prefix: prefix,
141
166
  tag: tag
142
167
  }), /*#__PURE__*/React.createElement(S.CardTabLabel, {
143
- "data-testid": "card-tab-label",
144
- invalidName: Boolean(invalidName) && !invalid
168
+ onDoubleClick: handleEditName,
169
+ "data-testid": "card-tab-label"
145
170
  }, edited ? /*#__PURE__*/React.createElement(InlineEdit, {
146
171
  className: "ds-card-tabs__edit-name",
147
172
  size: "small",
@@ -160,15 +185,20 @@ var CardTab = function CardTab(_ref) {
160
185
  title: name
161
186
  }, /*#__PURE__*/React.createElement(S.CardTabName, {
162
187
  "data-testid": "card-tab-name"
163
- }, name))), showCardActions() && /*#__PURE__*/React.createElement(CardTabActions, {
164
- onChangeName: handleEditName,
188
+ }, name))), suffixIcon && /*#__PURE__*/React.createElement(S.CardSuffixWrapper, null, /*#__PURE__*/React.createElement(Icon, {
189
+ className: "ds-card-tabs__suffix-icon",
190
+ component: suffixIcon
191
+ })), !suffixIcon && !!renderSuffix && /*#__PURE__*/React.createElement(S.CardSuffixWrapper, {
192
+ className: "ds-card-tabs__suffix-nodrag",
193
+ onClick: handleSuffixClick,
194
+ onPointerDown: handleSuffixClick,
195
+ "data-testid": "card-tab-suffix"
196
+ }, renderedSuffix), showCardActions() && /*#__PURE__*/React.createElement(CardTabActions, {
197
+ onChangeName: onChangeName ? handleEditName : undefined,
165
198
  onDuplicateTab: handleDuplicate,
166
199
  onRemoveTab: handleRemove,
167
200
  texts: getTexts
168
- }), suffixIcon && /*#__PURE__*/React.createElement(S.CardSuffixWrapper, null, /*#__PURE__*/React.createElement(Icon, {
169
- className: "ds-card-tabs__suffix-icon",
170
- component: suffixIcon
171
- })));
201
+ }));
172
202
  };
173
203
 
174
204
  export default injectIntl(CardTab);
package/dist/CardTab/CardTab.styles.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  declare type CardTabContainerProps = {
2
2
  active: boolean;
3
3
  invalid: boolean;
4
- invalidName: boolean;
5
4
  greyBackground: boolean;
6
5
  color: string;
7
6
  disabled: boolean;
@@ -12,9 +11,7 @@ declare type CardTabContainerProps = {
12
11
  export declare const CardTabSuffix: import("styled-components").StyledComponent<"div", any, {}, never>;
13
12
  export declare const CardTabName: import("styled-components").StyledComponent<"span", any, {}, never>;
14
13
  export declare const CardSuffixWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
15
- export declare const CardTabLabel: import("styled-components").StyledComponent<"span", any, {
16
- invalidName: boolean;
17
- }, never>;
14
+ export declare const CardTabLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
18
15
  export declare const CardTabTag: import("styled-components").StyledComponent<"div", any, {}, never>;
19
16
  export declare const CardDotPrefix: import("styled-components").StyledComponent<"div", any, {}, never>;
20
17
  export declare const CardDot: import("styled-components").StyledComponent<"div", any, {}, never>;
package/dist/CardTab/CardTab.styles.js CHANGED
@@ -1,28 +1,11 @@
1
1
  import styled from 'styled-components';
2
2
  import { macro } from '@synerise/ds-typography';
3
3
  import { InPlaceEditableInputContainer } from '@synerise/ds-inline-edit/dist/InlineEdit.styles';
4
-
5
- var getColor = function getColor(isActive, activeColor, defaultColor) {
6
- if (isActive) return activeColor;
7
- return defaultColor;
8
- };
9
-
4
+ import { getColor, getLighterColor } from '../utils';
10
5
  export var CardTabSuffix = styled.div.withConfig({
11
6
  displayName: "CardTabstyles__CardTabSuffix",
12
7
  componentId: "sc-1n86s98-0"
13
- })(["flex-direction:row;align-items:center;justify-content:flex-end;height:24px;display:none;&&{svg{color:", ";fill:", ";}.remove{svg{color:", ";fill:", ";}}}"], function (_ref) {
14
- var theme = _ref.theme;
15
- return theme.palette['grey-500'];
16
- }, function (_ref2) {
17
- var theme = _ref2.theme;
18
- return theme.palette['grey-500'];
19
- }, function (_ref3) {
20
- var theme = _ref3.theme;
21
- return theme.palette['red-600'];
22
- }, function (_ref4) {
23
- var theme = _ref4.theme;
24
- return theme.palette['red-600'];
25
- });
8
+ })(["flex-direction:row;align-items:center;justify-content:flex-end;height:24px;display:none;"]);
26
9
  export var CardTabName = styled.span.withConfig({
27
10
  displayName: "CardTabstyles__CardTabName",
28
11
  componentId: "sc-1n86s98-1"
@@ -34,29 +17,27 @@ export var CardSuffixWrapper = styled.span.withConfig({
34
17
  export var CardTabLabel = styled.span.withConfig({
35
18
  displayName: "CardTabstyles__CardTabLabel",
36
19
  componentId: "sc-1n86s98-3"
37
- })(["", ";color:", ";line-height:20px;position:relative;font-size:13px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex:1;display:flex;align-items:center;justify-content:flex-start;&&&{", "{background-color:transparent;background-position:bottom left;background-size:5px 1px;background-repeat:repeat-x;background-image:", ";}}", "{input{font-weight:500;font-size:14px;line-height:20px;color:", ";background-image:linear-gradient( to right,", " 0%,", " 33%,rgba(255,255,255,0) 34%,rgba(255,255,255,0) 100% );}}"], macro.h300, function (props) {
20
+ })(["", ";color:", ";line-height:20px;position:relative;font-size:13px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex:1;display:flex;align-items:center;justify-content:flex-start;", "{input{font-weight:500;font-size:14px;line-height:20px;color:", ";background-image:linear-gradient( to right,", " 0%,", " 33%,rgba(255,255,255,0) 34%,rgba(255,255,255,0) 100% );}}"], macro.h300, function (props) {
38
21
  return props.theme.palette['grey-600'];
39
- }, CardTabName, function (props) {
40
- return props.invalidName ? "linear-gradient(\n to right,\n " + (props.invalidName ? props.theme.palette['red-600'] : props.theme.palette['blue-600']) + " 0%,\n " + (props.invalidName ? props.theme.palette['red-600'] : props.theme.palette['blue-600']) + " 33%,\n rgba(255, 255, 255, 0) 34%,\n rgba(255, 255, 255, 0) 100%\n );" : 'none';
41
22
  }, InPlaceEditableInputContainer, function (props) {
42
- return props.invalidName ? props.theme.palette['red-600'] : props.theme.palette['grey-800'];
23
+ return props.theme.palette['grey-800'];
43
24
  }, function (props) {
44
- return props.invalidName ? props.theme.palette['red-600'] : props.theme.palette['blue-600'];
25
+ return props.theme.palette['blue-600'];
45
26
  }, function (props) {
46
- return props.invalidName ? props.theme.palette['red-600'] : props.theme.palette['blue-600'];
27
+ return props.theme.palette['blue-600'];
47
28
  });
48
29
  export var CardTabTag = styled.div.withConfig({
49
30
  displayName: "CardTabstyles__CardTabTag",
50
31
  componentId: "sc-1n86s98-4"
51
- })(["", " color:", ";display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:3px;"], macro.h200, function (_ref5) {
52
- var theme = _ref5.theme;
32
+ })(["", " color:", ";display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:3px;"], macro.h200, function (_ref) {
33
+ var theme = _ref.theme;
53
34
  return theme.palette.white;
54
35
  });
55
36
  export var CardDotPrefix = styled.div.withConfig({
56
37
  displayName: "CardTabstyles__CardDotPrefix",
57
38
  componentId: "sc-1n86s98-5"
58
- })(["", " color:", ";display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;"], macro.h200, function (_ref6) {
59
- var theme = _ref6.theme;
39
+ })(["", " color:", ";display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;"], macro.h200, function (_ref2) {
40
+ var theme = _ref2.theme;
60
41
  return theme.palette.white;
61
42
  });
62
43
  export var CardDot = styled.div.withConfig({
@@ -66,11 +47,11 @@ export var CardDot = styled.div.withConfig({
66
47
  export var CardTabPrefix = styled.div.withConfig({
67
48
  displayName: "CardTabstyles__CardTabPrefix",
68
49
  componentId: "sc-1n86s98-7"
69
- })(["display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:16px;"]);
50
+ })(["display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:12px;"]);
70
51
  export var CardDragPrefix = styled.div.withConfig({
71
52
  displayName: "CardTabstyles__CardDragPrefix",
72
53
  componentId: "sc-1n86s98-8"
73
- })(["display:none;"]);
54
+ })(["display:none;&.persistent{display:block;}"]);
74
55
  export var CardIconPrefix = styled.div.withConfig({
75
56
  displayName: "CardTabstyles__CardIconPrefix",
76
57
  componentId: "sc-1n86s98-9"
@@ -78,165 +59,239 @@ export var CardIconPrefix = styled.div.withConfig({
78
59
  export var CardTabContainer = styled.div.withConfig({
79
60
  displayName: "CardTabstyles__CardTabContainer",
80
61
  componentId: "sc-1n86s98-10"
81
- })(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;padding:12px;width:180px;@media (max-width:588px){max-width:145px;}height:40px;user-select:none;background-color:", ";box-shadow:", ";border-radius:3px;border-width:1px;border-color:", ";border-style:solid;pointer-events:", ";", "{background-color:", ";color:", ";}", "{background-color:", ";}", "{height:", ";width:", ";border-width:", ";border-color:", ";border-style:solid;}&:hover{cursor:pointer;box-shadow:", ";background-color:", ";", "{display:", ";}", "{display:", ";}", "{color:", ";}", "{background-color:", ";color:", ";display:", ";}", "{svg{color:", ";fill:", ";}}", "{display:flex;svg{color:", ";fill:", " !important;}}", "{display:none;}", "{display:none;svg{color:", ";fill:", ";}}.ds-card-tabs__suffix-icon{svg{color:", ";fill:", ";}}}&.pressed{background-color:", ";}", "{color:", ";opacity:", ";}.ds-card-tabs__suffix-icon{svg{color:", ";fill:", ";}opacity:", ";}", "{opacity:", ";.ds-card-tabs__handle-icon{svg{color:", ";fill:", ";}}svg{color:", ";fill:", ";}", "{opacity:", ";}}"], function (_ref7) {
82
- var theme = _ref7.theme,
83
- active = _ref7.active,
84
- invalid = _ref7.invalid,
85
- color = _ref7.color,
86
- greyBackground = _ref7.greyBackground,
87
- edited = _ref7.edited;
62
+ })(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;padding:12px;width:180px;@media (max-width:588px){max-width:145px;}height:48px;user-select:none;background-color:", ";box-shadow:", ";border-radius:3px;border-width:", ";border-color:", ";border-style:solid;pointer-events:", ";", "{background-color:", ";color:", ";}", "{background-color:", ";}", "{height:", ";width:", ";border-width:", ";border-color:", ";border-style:solid;}", "{svg{color:", ";fill:", " !important;}}", "{svg{color:", " !important;fill:", " !important;}.remove{svg{color:", " !important;fill:", " !important;}}}&:hover{cursor:pointer;box-shadow:", ";background-color:", ";", "{display:", ";}", "{display:", ";}", "{color:", ";}", "{background-color:", ";color:", ";display:", ";}", "{svg{color:", ";fill:", ";}}", "{display:", ";svg{color:", ";fill:", " !important;}}", "{display:", ";}", "{display:", ";svg{color:", ";fill:", ";}}.ds-card-tabs__suffix-icon{svg{color:", ";fill:", " !important;}}}&.pressed{background-color:", ";}", "{input{color:", ";padding:0 !important;background-image:linear-gradient( to right,", " 0%,", " 33%,rgba(255,255,255,0) 34%,rgba(255,255,255,0) 100% ) !important;}}", "{color:", ";opacity:", ";}.ds-card-tabs__suffix-icon{svg{color:", ";fill:", ";}opacity:", ";}", "{opacity:", ";.ds-card-tabs__handle-icon{svg{color:", ";fill:", ";}}svg{color:", ";fill:", ";}", "{opacity:", ";}}"], function (_ref3) {
63
+ var theme = _ref3.theme,
64
+ active = _ref3.active,
65
+ invalid = _ref3.invalid,
66
+ color = _ref3.color,
67
+ greyBackground = _ref3.greyBackground;
88
68
  if (invalid && active) return theme.palette['red-600'];
89
- if (active && !edited) return theme.palette["" + color];
69
+ if (active) return theme.palette["" + color];
90
70
  if (greyBackground) return theme.palette.white;
91
71
  return theme.palette['grey-050'];
92
- }, function (_ref8) {
93
- var greyBackground = _ref8.greyBackground;
72
+ }, function (_ref4) {
73
+ var greyBackground = _ref4.greyBackground;
94
74
  return greyBackground ? '0 4px 12px 0 rgba(35, 41, 54, 0.04)' : '0';
75
+ }, function (_ref5) {
76
+ var greyBackground = _ref5.greyBackground;
77
+ return greyBackground ? '0' : '1px';
78
+ }, function (_ref6) {
79
+ var theme = _ref6.theme,
80
+ active = _ref6.active,
81
+ invalid = _ref6.invalid,
82
+ color = _ref6.color;
83
+ if (invalid) return theme.palette['red-600'];
84
+ return getColor(active, theme.palette["" + color], theme.palette['grey-300']);
85
+ }, function (_ref7) {
86
+ var disabled = _ref7.disabled;
87
+ return disabled ? 'none' : 'all';
88
+ }, CardTabTag, function (_ref8) {
89
+ var theme = _ref8.theme,
90
+ active = _ref8.active,
91
+ color = _ref8.color;
92
+ return getColor(active, theme.palette.white, theme.palette["" + color]);
95
93
  }, function (_ref9) {
96
94
  var theme = _ref9.theme,
97
95
  active = _ref9.active,
98
- invalid = _ref9.invalid,
99
- color = _ref9.color,
100
- edited = _ref9.edited;
101
- if (invalid) return theme.palette['red-600'];
102
- if (edited) return theme.palette['blue-600'];
103
- return getColor(active && !edited, theme.palette["" + color], theme.palette['grey-300']);
104
- }, function (_ref10) {
105
- var disabled = _ref10.disabled;
106
- return disabled ? 'none' : 'all';
107
- }, CardTabTag, function (_ref11) {
108
- var theme = _ref11.theme,
109
- active = _ref11.active,
110
- color = _ref11.color,
96
+ color = _ref9.color;
97
+ return getColor(active, theme.palette["" + color], theme.palette.white);
98
+ }, CardDot, function (_ref10) {
99
+ var theme = _ref10.theme,
100
+ active = _ref10.active,
101
+ color = _ref10.color,
102
+ invalid = _ref10.invalid;
103
+ if (active && invalid) return theme.palette["" + color];
104
+ return getColor(active, 'transparent', theme.palette["" + color]);
105
+ }, CardDotPrefix, function (_ref11) {
106
+ var active = _ref11.active,
111
107
  edited = _ref11.edited;
112
- return getColor(active && !edited, theme.palette.white, theme.palette["" + color]);
108
+ return active && !edited ? '12px' : '24px';
113
109
  }, function (_ref12) {
114
- var theme = _ref12.theme,
115
- active = _ref12.active,
116
- color = _ref12.color,
110
+ var active = _ref12.active,
117
111
  edited = _ref12.edited;
118
- return getColor(active && !edited, theme.palette["" + color], theme.palette.white);
119
- }, CardDot, function (_ref13) {
120
- var theme = _ref13.theme,
121
- active = _ref13.active,
122
- color = _ref13.color,
123
- edited = _ref13.edited,
124
- invalid = _ref13.invalid;
125
- if (active && invalid) return theme.palette["" + color];
126
- return getColor(active && !edited, 'transparent', theme.palette["" + color]);
127
- }, CardDotPrefix, function (_ref14) {
128
- var active = _ref14.active,
129
- edited = _ref14.edited;
130
- return active && !edited ? '12px' : '24px';
131
- }, function (_ref15) {
132
- var active = _ref15.active,
133
- edited = _ref15.edited;
134
112
  return active && !edited ? '12px' : '24px';
135
- }, function (_ref16) {
136
- var active = _ref16.active,
137
- edited = _ref16.edited;
113
+ }, function (_ref13) {
114
+ var active = _ref13.active,
115
+ edited = _ref13.edited;
138
116
  return active && !edited ? '2px' : '0px';
139
- }, function (_ref17) {
140
- var theme = _ref17.theme,
141
- active = _ref17.active,
142
- edited = _ref17.edited;
117
+ }, function (_ref14) {
118
+ var theme = _ref14.theme,
119
+ active = _ref14.active,
120
+ edited = _ref14.edited;
143
121
  return active && !edited ? theme.palette.white : 'none';
122
+ }, CardSuffixWrapper, function (_ref15) {
123
+ var theme = _ref15.theme,
124
+ active = _ref15.active;
125
+ if (active) return theme.palette.white;
126
+ return theme.palette['grey-600'];
127
+ }, function (_ref16) {
128
+ var theme = _ref16.theme,
129
+ active = _ref16.active;
130
+ if (active) return theme.palette.white;
131
+ return theme.palette['grey-600'];
132
+ }, CardTabSuffix, function (_ref17) {
133
+ var theme = _ref17.theme,
134
+ active = _ref17.active;
135
+ return active ? theme.palette.white : theme.palette['grey-600'];
144
136
  }, function (_ref18) {
145
- var greyBackground = _ref18.greyBackground,
146
- theme = _ref18.theme;
147
- return greyBackground ? '0px 10px 13px -7px #000000,-25px 20px 19px -16px rgba(0,0,0,0)' : "0px 4px 8px 5px " + theme.palette["grey-050"];
137
+ var theme = _ref18.theme,
138
+ active = _ref18.active;
139
+ return active ? theme.palette.white : theme.palette['grey-600'];
148
140
  }, function (_ref19) {
149
141
  var theme = _ref19.theme,
150
- greyBackground = _ref19.greyBackground;
151
- return greyBackground ? theme.palette.white : theme.palette['grey-050'];
152
- }, CardTabSuffix, function (_ref20) {
153
- var edited = _ref20.edited;
142
+ active = _ref19.active;
143
+ return active ? theme.palette.white : theme.palette['red-600'];
144
+ }, function (_ref20) {
145
+ var theme = _ref20.theme,
146
+ active = _ref20.active;
147
+ return active ? theme.palette.white : theme.palette['red-600'];
148
+ }, function (_ref21) {
149
+ var greyBackground = _ref21.greyBackground;
150
+ return greyBackground ? '0 4px 12px 0 rgba(35, 41, 54, 0.04)' : '';
151
+ }, function (_ref22) {
152
+ var theme = _ref22.theme,
153
+ active = _ref22.active,
154
+ invalid = _ref22.invalid,
155
+ color = _ref22.color,
156
+ greyBackground = _ref22.greyBackground;
157
+ if (invalid && active) return theme.palette["" + getLighterColor('red-600')];
158
+ if (active) return theme.palette["" + getLighterColor(color)];
159
+ if (greyBackground && !active) return theme.palette.white;
160
+ return theme.palette['grey-050'];
161
+ }, CardTabSuffix, function (_ref23) {
162
+ var edited = _ref23.edited;
154
163
  return edited ? 'none' : 'flex';
155
- }, CardSuffixWrapper, function (_ref21) {
156
- var edited = _ref21.edited;
164
+ }, CardSuffixWrapper, function (_ref24) {
165
+ var edited = _ref24.edited;
157
166
  return edited ? 'none' : 'flex';
158
- }, CardTabLabel, function (_ref22) {
159
- var theme = _ref22.theme,
160
- invalidName = _ref22.invalidName;
161
- return invalidName ? theme.palette['red-600'] : theme.palette['grey-800'];
162
- }, CardTabTag, function (_ref23) {
163
- var theme = _ref23.theme,
164
- color = _ref23.color;
167
+ }, CardTabLabel, function (_ref25) {
168
+ var theme = _ref25.theme,
169
+ active = _ref25.active;
170
+ if (active) return theme.palette.white;
171
+ return theme.palette['grey-800'];
172
+ }, CardTabTag, function (_ref26) {
173
+ var theme = _ref26.theme,
174
+ color = _ref26.color,
175
+ active = _ref26.active;
176
+ if (active) return theme.palette.white;
165
177
  return theme.palette["" + color];
166
- }, function (_ref24) {
167
- var theme = _ref24.theme;
178
+ }, function (_ref27) {
179
+ var theme = _ref27.theme,
180
+ active = _ref27.active,
181
+ color = _ref27.color;
182
+ if (active) return theme.palette["" + color];
168
183
  return theme.palette.white;
169
184
  }, function (props) {
170
185
  return props.draggable ? 'none' : 'flex';
171
- }, CardTabPrefix, function (_ref25) {
172
- var theme = _ref25.theme;
173
- return theme.palette['grey-600'];
174
- }, function (_ref26) {
175
- var theme = _ref26.theme;
176
- return theme.palette['grey-600'];
177
- }, CardDragPrefix, function (_ref27) {
178
- var theme = _ref27.theme;
179
- return theme.palette['grey-600'];
180
- }, function (_ref28) {
181
- var theme = _ref28.theme;
182
- return theme.palette['grey-600'];
183
- }, CardDotPrefix, CardIconPrefix, function (_ref29) {
184
- var theme = _ref29.theme;
186
+ }, CardTabPrefix, function (_ref28) {
187
+ var theme = _ref28.theme,
188
+ active = _ref28.active;
189
+ if (active) return theme.palette.white;
185
190
  return theme.palette['grey-600'];
186
- }, function (_ref30) {
187
- var theme = _ref30.theme;
191
+ }, function (_ref29) {
192
+ var theme = _ref29.theme,
193
+ active = _ref29.active;
194
+ if (active) return theme.palette.white;
188
195
  return theme.palette['grey-600'];
196
+ }, CardDragPrefix, function (_ref30) {
197
+ var edited = _ref30.edited;
198
+ return edited ? 'none' : 'flex';
189
199
  }, function (_ref31) {
190
- var theme = _ref31.theme;
200
+ var theme = _ref31.theme,
201
+ active = _ref31.active;
202
+ if (active) return theme.palette.white;
191
203
  return theme.palette['grey-600'];
192
204
  }, function (_ref32) {
193
- var theme = _ref32.theme;
205
+ var theme = _ref32.theme,
206
+ active = _ref32.active;
207
+ if (active) return theme.palette.white;
194
208
  return theme.palette['grey-600'];
209
+ }, CardDotPrefix, function (props) {
210
+ return props.draggable ? 'none' : 'flex';
211
+ }, CardIconPrefix, function (props) {
212
+ return props.draggable ? 'none' : 'flex';
195
213
  }, function (_ref33) {
196
214
  var theme = _ref33.theme,
197
- greyBackground = _ref33.greyBackground;
198
- return !greyBackground ? theme.palette['grey-100'] : theme.palette.white;
199
- }, CardTabLabel, function (_ref34) {
215
+ active = _ref33.active;
216
+ return active ? theme.palette.white : theme.palette['grey-600'];
217
+ }, function (_ref34) {
200
218
  var theme = _ref34.theme,
201
- active = _ref34.active,
202
- invalidName = _ref34.invalidName;
203
- if (invalidName) return theme.palette['red-600'];
219
+ active = _ref34.active;
220
+ return active ? theme.palette.white : theme.palette['grey-600'];
221
+ }, function (_ref35) {
222
+ var theme = _ref35.theme,
223
+ active = _ref35.active;
204
224
  if (active) return theme.palette.white;
205
225
  return theme.palette['grey-600'];
206
- }, function (_ref35) {
207
- var disabled = _ref35.disabled;
208
- return disabled ? 0.4 : 1;
209
226
  }, function (_ref36) {
210
227
  var theme = _ref36.theme,
211
228
  active = _ref36.active;
212
- return getColor(active, theme.palette.white, theme.palette['grey-600']);
229
+ if (active) return theme.palette.white;
230
+ return theme.palette['grey-600'];
213
231
  }, function (_ref37) {
214
232
  var theme = _ref37.theme,
215
- active = _ref37.active;
216
- return getColor(active, theme.palette.white, theme.palette['grey-600']);
217
- }, function (_ref38) {
218
- var disabled = _ref38.disabled;
219
- return disabled ? 0.4 : 1;
220
- }, CardTabPrefix, function (_ref39) {
221
- var disabled = _ref39.disabled;
222
- return disabled ? 0.4 : 1;
233
+ active = _ref37.active,
234
+ invalid = _ref37.invalid,
235
+ color = _ref37.color,
236
+ greyBackground = _ref37.greyBackground;
237
+ if (invalid && active) return theme.palette["" + getLighterColor('red-600')];
238
+ if (active) return theme.palette["" + getLighterColor(color)];
239
+ if (greyBackground && !active) return theme.palette.white;
240
+ return theme.palette['grey-100'];
241
+ }, InPlaceEditableInputContainer, function (_ref38) {
242
+ var theme = _ref38.theme,
243
+ active = _ref38.active;
244
+ if (active) return theme.palette.white;
245
+ return theme.palette['grey-800'];
246
+ }, function (_ref39) {
247
+ var theme = _ref39.theme,
248
+ active = _ref39.active;
249
+ if (active) return theme.palette.white;
250
+ return theme.palette['grey-800'];
223
251
  }, function (_ref40) {
224
252
  var theme = _ref40.theme,
225
253
  active = _ref40.active;
226
- return getColor(active, theme.palette.white, theme.palette['grey-400']);
227
- }, function (_ref41) {
254
+ if (active) return theme.palette.white;
255
+ return theme.palette['grey-800'];
256
+ }, CardTabLabel, function (_ref41) {
228
257
  var theme = _ref41.theme,
229
258
  active = _ref41.active;
230
- return getColor(active, theme.palette.white, theme.palette['grey-400']);
259
+ if (active) return theme.palette.white;
260
+ return theme.palette['grey-600'];
231
261
  }, function (_ref42) {
232
- var theme = _ref42.theme,
233
- active = _ref42.active;
234
- return getColor(active, theme.palette.white, theme.palette['grey-600']);
262
+ var disabled = _ref42.disabled;
263
+ return disabled ? 0.4 : 1;
235
264
  }, function (_ref43) {
236
265
  var theme = _ref43.theme,
237
266
  active = _ref43.active;
238
267
  return getColor(active, theme.palette.white, theme.palette['grey-600']);
239
- }, CardTabSuffix, function (_ref44) {
240
- var disabled = _ref44.disabled;
268
+ }, function (_ref44) {
269
+ var theme = _ref44.theme,
270
+ active = _ref44.active;
271
+ return getColor(active, theme.palette.white, theme.palette['grey-600']);
272
+ }, function (_ref45) {
273
+ var disabled = _ref45.disabled;
274
+ return disabled ? 0.4 : 1;
275
+ }, CardTabPrefix, function (_ref46) {
276
+ var disabled = _ref46.disabled;
277
+ return disabled ? 0.4 : 1;
278
+ }, function (_ref47) {
279
+ var theme = _ref47.theme,
280
+ active = _ref47.active;
281
+ return getColor(active, theme.palette.white, theme.palette['grey-400']);
282
+ }, function (_ref48) {
283
+ var theme = _ref48.theme,
284
+ active = _ref48.active;
285
+ return getColor(active, theme.palette.white, theme.palette['grey-400']);
286
+ }, function (_ref49) {
287
+ var theme = _ref49.theme,
288
+ active = _ref49.active;
289
+ return getColor(active, theme.palette.white, theme.palette['grey-600']);
290
+ }, function (_ref50) {
291
+ var theme = _ref50.theme,
292
+ active = _ref50.active;
293
+ return getColor(active, theme.palette.white, theme.palette['grey-600']);
294
+ }, CardTabSuffix, function (_ref51) {
295
+ var disabled = _ref51.disabled;
241
296
  return disabled ? 0.4 : 1;
242
297
  });
package/dist/CardTab/CardTab.types.d.ts CHANGED
@@ -1,16 +1,20 @@
1
- import * as React from 'react';
1
+ import { ReactNode, MouseEvent } from 'react';
2
2
  import { IntlShape } from 'react-intl';
3
3
  import { DefaultColor } from '@synerise/ds-core/dist/js/DSProvider/ThemeProvider/theme';
4
4
  export declare enum prefixType {
5
5
  TAG = 0,
6
6
  ICON = 1,
7
- DOT = 2
7
+ DOT = 2,
8
+ HANDLE = 3
8
9
  }
9
10
  export declare type Color = 'red' | 'green' | 'grey' | 'yellow' | 'blue' | 'pink' | 'mars' | 'orange' | 'fern' | 'cyan' | 'purple' | 'violet';
10
11
  export declare type CardTabTexts = {
11
- changeNameTooltip?: string | React.ReactNode;
12
- removeTooltip?: string | React.ReactNode;
13
- duplicateTooltip?: string | React.ReactNode;
12
+ changeNameTooltip?: string | ReactNode;
13
+ removeTooltip?: string | ReactNode;
14
+ duplicateTooltip?: string | ReactNode;
15
+ changeNameMenuItem?: string | ReactNode;
16
+ removeMenuItem?: string | ReactNode;
17
+ duplicateMenuItem?: string | ReactNode;
14
18
  };
15
19
  export interface CardTabProps {
16
20
  intl: IntlShape;
@@ -18,12 +22,12 @@ export interface CardTabProps {
18
22
  name: string;
19
23
  tag: string;
20
24
  prefix: prefixType;
21
- colorDot: React.ReactNode;
25
+ colorDot: ReactNode;
22
26
  color?: Color | DefaultColor | string;
23
27
  active?: boolean;
24
28
  draggable?: boolean;
25
- prefixIcon?: React.ReactNode;
26
- suffixIcon?: React.ReactNode;
29
+ prefixIcon?: ReactNode;
30
+ suffixIcon?: ReactNode;
27
31
  disabled?: boolean;
28
32
  invalid?: boolean;
29
33
  invalidName?: boolean;
@@ -34,4 +38,10 @@ export interface CardTabProps {
34
38
  onRemoveTab?: (id: number) => void;
35
39
  texts?: CardTabTexts;
36
40
  itemData?: unknown;
41
+ renderSuffix?: (props: CardTabSuffixProps) => ReactNode;
37
42
  }
43
+ export declare type CardTabSuffixProps = Omit<CardTabProps & {
44
+ handleRemove?: (event?: MouseEvent<HTMLElement>) => void;
45
+ handleDuplicate?: (event?: MouseEvent<HTMLElement>) => void;
46
+ handleEditName?: (event?: MouseEvent<HTMLElement>) => void;
47
+ }, 'onChangeName' | 'onDuplicateTab' | 'onRemoveTab' | 'onSelectTab'>;
package/dist/CardTab/CardTab.types.js CHANGED
@@ -4,4 +4,5 @@ export var prefixType;
4
4
  prefixType[prefixType["TAG"] = 0] = "TAG";
5
5
  prefixType[prefixType["ICON"] = 1] = "ICON";
6
6
  prefixType[prefixType["DOT"] = 2] = "DOT";
7
+ prefixType[prefixType["HANDLE"] = 3] = "HANDLE";
7
8
  })(prefixType || (prefixType = {}));
package/dist/CardTab/CardTabActions/CardTabActions.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import * as React from 'react';
1
+ import { FC } from 'react';
2
2
  import { Props } from './CardTabActions.types';
3
- declare const CardTabActions: React.FC<Props>;
3
+ declare const CardTabActions: FC<Props>;
4
4
  export default CardTabActions;
package/dist/CardTab/CardTabActions/CardTabActions.js CHANGED
@@ -9,7 +9,8 @@ var CardTabActions = function CardTabActions(_ref) {
9
9
  onRemoveTab = _ref.onRemoveTab,
10
10
  texts = _ref.texts;
11
11
  return /*#__PURE__*/React.createElement(S.CardTabSuffix, {
12
- "data-testid": "card-tab-suffix"
12
+ "data-testid": "card-tab-suffix",
13
+ className: "ds-card-tabs__suffix-nodrag"
13
14
  }, /*#__PURE__*/React.createElement(Cruds, {
14
15
  onEdit: onChangeName != null ? onChangeName : enterEditNameMode,
15
16
  editTooltip: texts == null ? void 0 : texts.changeNameTooltip,
package/dist/CardTab/CardTabActions/CardTabActions.types.d.ts CHANGED
@@ -1,10 +1,10 @@
1
- import * as React from 'react';
1
+ import { MouseEvent } from 'react';
2
2
  import { CardTabTexts } from '../CardTab.types';
3
3
  export interface Props {
4
- onChangeName?: (event?: React.MouseEvent<HTMLElement>) => void;
4
+ onChangeName?: (event?: MouseEvent<HTMLElement>) => void;
5
5
  /** @deprecated */
6
- enterEditNameMode?: (event?: React.MouseEvent<HTMLElement>) => void;
7
- onDuplicateTab?: (event?: React.MouseEvent<HTMLElement>) => void;
8
- onRemoveTab?: (event?: React.MouseEvent<HTMLElement>) => void;
6
+ enterEditNameMode?: (event?: MouseEvent<HTMLElement>) => void;
7
+ onDuplicateTab?: (event?: MouseEvent<HTMLElement>) => void;
8
+ onRemoveTab?: (event?: MouseEvent<HTMLElement>) => void;
9
9
  texts?: CardTabTexts;
10
10
  }
package/dist/CardTab/CardTabPrefix/CardTabPrefix.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import * as React from 'react';
1
+ import { FC } from 'react';
2
2
  import { Props } from './CardTabPrefix.types';
3
- declare const CardTabPrefix: React.FC<Props>;
3
+ declare const CardTabPrefix: FC<Props>;
4
4
  export default CardTabPrefix;
package/dist/CardTab/CardTabPrefix/CardTabPrefix.js CHANGED
@@ -10,6 +10,7 @@ var CardTabPrefix = function CardTabPrefix(_ref) {
10
10
  tag = _ref.tag,
11
11
  prefixIcon = _ref.prefixIcon,
12
12
  colorDot = _ref.colorDot;
13
+ var className = prefix === prefixType.HANDLE ? 'persistent' : '';
13
14
  return /*#__PURE__*/React.createElement(S.CardTabPrefix, {
14
15
  "data-testid": "card-tab-prefix"
15
16
  }, prefix === prefixType.TAG && tag && /*#__PURE__*/React.createElement(S.CardTabTag, {
@@ -20,8 +21,10 @@ var CardTabPrefix = function CardTabPrefix(_ref) {
20
21
  color: theme.palette['grey-600']
21
22
  })), prefix === prefixType.DOT && colorDot && /*#__PURE__*/React.createElement(S.CardDotPrefix, {
22
23
  "data-testid": "card-dot-tag"
23
- }, colorDot), draggable && /*#__PURE__*/React.createElement(S.CardDragPrefix, null, /*#__PURE__*/React.createElement(Icon, {
24
- className: "ds-card-tabs__handle-icon",
24
+ }, colorDot), (prefix === prefixType.HANDLE || draggable) && /*#__PURE__*/React.createElement(S.CardDragPrefix, {
25
+ className: className
26
+ }, /*#__PURE__*/React.createElement(Icon, {
27
+ className: "ds-card-tabs__handle-icon sortable-drag",
25
28
  component: /*#__PURE__*/React.createElement(DragHandleM, null)
26
29
  }), ' '));
27
30
  };
package/dist/CardTab/CardTabPrefix/CardTabPrefix.types.d.ts CHANGED
@@ -1,9 +1,9 @@
1
- import * as React from 'react';
1
+ import { ReactNode } from 'react';
2
2
  import { prefixType } from 'CardTab/CardTab.types';
3
3
  export interface Props {
4
4
  prefix: prefixType;
5
5
  draggable?: boolean;
6
6
  tag?: string;
7
- prefixIcon?: React.ReactNode;
8
- colorDot?: React.ReactNode;
7
+ prefixIcon?: ReactNode;
8
+ colorDot?: ReactNode;
9
9
  }
package/dist/CardTabs.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import * as React from 'react';
1
+ import { FC } from 'react';
2
2
  import { CardTabsProps } from './CardTabs.types';
3
- declare const CardTabs: React.FC<CardTabsProps>;
3
+ declare const CardTabs: FC<CardTabsProps>;
4
4
  export default CardTabs;
package/dist/CardTabs.js CHANGED
@@ -7,15 +7,17 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
7
7
  function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
8
8
 
9
9
  import * as React from 'react';
10
+ import { Children, cloneElement } from 'react';
10
11
  import { ReactSortable } from 'react-sortablejs-typescript';
11
12
  import Button from '@synerise/ds-button';
12
13
  import { defaultColorsOrder } from '@synerise/ds-core/dist/js/DSProvider/ThemeProvider/theme';
13
14
  import * as S from './CardTabs.styles';
14
15
  var SORTABLE_CONFIG = {
15
16
  ghostClass: 'sortable-card-ghost-element',
16
- className: 'sortable-card',
17
+ className: 'ds-card-tags-sortable',
17
18
  animation: 150,
18
- group: 'column-manager'
19
+ filter: '.ds-card-tabs__suffix-nodrag',
20
+ preventOnFilter: false
19
21
  };
20
22
 
21
23
  var CardTabs = function CardTabs(_ref) {
@@ -34,8 +36,8 @@ var CardTabs = function CardTabs(_ref) {
34
36
  };
35
37
 
36
38
  var renderChildren = function renderChildren() {
37
- return React.Children.map(children, function (child, i) {
38
- return React.cloneElement(child, _objectSpread({}, child.props.color ? {} : {
39
+ return Children.map(children, function (child, i) {
40
+ return cloneElement(child, _objectSpread({}, child.props.color ? {} : {
39
41
  color: defaultColorsOrder[i % defaultColorsOrder.length]
40
42
  }, {
41
43
  draggable: Boolean(onChangeOrder) || child.props.draggable
@@ -49,7 +51,6 @@ var CardTabs = function CardTabs(_ref) {
49
51
  }, onChangeOrder ? /*#__PURE__*/React.createElement("div", {
50
52
  "data-testid": "card-tabs-sortable"
51
53
  }, /*#__PURE__*/React.createElement(ReactSortable, _extends({}, SORTABLE_CONFIG, {
52
- className: "ds-card-tags-sortable",
53
54
  list: children,
54
55
  setList: handleChangeOrder
55
56
  }), renderChildren())) : /*#__PURE__*/React.createElement("div", {
@@ -59,7 +60,7 @@ var CardTabs = function CardTabs(_ref) {
59
60
  "data-testid": "card-tabs-add-button"
60
61
  }, /*#__PURE__*/React.createElement(Button.Creator, {
61
62
  block: true,
62
- disabled: !!maxTabsCount && React.Children.toArray(children).length >= maxTabsCount,
63
+ disabled: !!maxTabsCount && Children.toArray(children).length >= maxTabsCount,
63
64
  label: addTabLabel != null ? addTabLabel : '',
64
65
  onClick: onAddTab
65
66
  })));
package/dist/CardTabs.styles.js CHANGED
@@ -5,10 +5,8 @@ import { CardTabContainer } from './CardTab/CardTab.styles'; // eslint-disable-n
5
5
  export var CardTabsContainer = styled.div.withConfig({
6
6
  displayName: "CardTabsstyles__CardTabsContainer",
7
7
  componentId: "sc-1uu9dja-0"
8
- })(["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;}}@media (max-width:588px){.ds-button-creator{", "{display:none;}}}"], CardTabContainer, function (props) {
9
- return props.theme.palette.white;
10
- }, function (props) {
11
- return props.theme.palette['blue-300'];
8
+ })(["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;box-shadow:0 16px 32px 0 rgba(35,41,54,0.1);opacity:1;}.sortable-drag{opacity:1 !important;}.sortable-card-ghost-element{border:dashed 1px ", ";background-color:", ";opacity:1;cursor:grabbing;*{visibility:hidden;}}@media (max-width:588px){.ds-button-creator{width:48px !important;", "{display:none;}}}"], CardTabContainer, function (props) {
9
+ return props.theme.palette['blue-600'];
12
10
  }, function (props) {
13
11
  return props.theme.palette['blue-050'];
14
12
  }, CreatorStyles.CreatorLabel);
package/dist/index.d.ts CHANGED
@@ -1,2 +1,7 @@
1
1
  export { default } from './CardTabs';
2
2
  export { default as CardTab } from './CardTab/CardTab';
3
+ export type { CardTabsItem } from './CardTabs.types';
4
+ export { prefixType } from './CardTab/CardTab.types';
5
+ export type { CardTabProps } from './CardTab/CardTab.types';
6
+ export { COLORS_TABS } from './CardTab/ColorsTabs';
7
+ export { CardTabContainer, CardTabLabel, CardIconPrefix, CardDot } from './CardTab/CardTab.styles';
package/dist/index.js CHANGED
@@ -1,2 +1,5 @@
1
1
  export { default } from './CardTabs';
2
- export { default as CardTab } from './CardTab/CardTab';
2
+ export { default as CardTab } from './CardTab/CardTab';
3
+ export { prefixType } from './CardTab/CardTab.types';
4
+ export { COLORS_TABS } from './CardTab/ColorsTabs';
5
+ export { CardTabContainer, CardTabLabel, CardIconPrefix, CardDot } from './CardTab/CardTab.styles';
package/dist/utils.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export declare const getColor: (isActive: boolean, activeColor: string, defaultColor: string) => string;
2
+ export declare const getLighterColor: (color: string) => string;
package/dist/utils.js ADDED
@@ -0,0 +1,17 @@
1
+ export var getColor = function getColor(isActive, activeColor, defaultColor) {
2
+ if (isActive) return activeColor;
3
+ return defaultColor;
4
+ };
5
+ export var getLighterColor = function getLighterColor(color) {
6
+ if (color) {
7
+ var levelRegex = /(\d){3}$/g;
8
+ var matches = color.match(levelRegex);
9
+
10
+ if (matches != null && matches.length) {
11
+ var level = parseInt(matches[0], 10);
12
+ return color.replace(levelRegex, (level - 100).toString());
13
+ }
14
+ }
15
+
16
+ return color;
17
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-card-tabs",
3
- "version": "0.13.50",
3
+ "version": "0.13.51",
4
4
  "description": "CardTabs UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -32,10 +32,10 @@
32
32
  ],
33
33
  "types": "dist/index.d.ts",
34
34
  "dependencies": {
35
- "@synerise/ds-button": "^0.17.15",
36
- "@synerise/ds-cruds": "^0.3.25",
35
+ "@synerise/ds-button": "^0.17.16",
36
+ "@synerise/ds-cruds": "^0.3.26",
37
37
  "@synerise/ds-icon": "^0.56.0",
38
- "@synerise/ds-inline-edit": "^0.6.62",
38
+ "@synerise/ds-inline-edit": "^0.6.63",
39
39
  "@synerise/ds-typography": "^0.12.7",
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": "5808615a55859820c255189f77977725ec79cd7d"
51
+ "gitHead": "9a0fe37374409f1830fa642965975a26a72116c8"
52
52
  }