@synerise/ds-card-tabs 0.8.77 → 0.9.3

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 CHANGED
@@ -3,6 +3,38 @@
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.9.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@0.9.2...@synerise/ds-card-tabs@0.9.3) (2021-11-22)
7
+
8
+ **Note:** Version bump only for package @synerise/ds-card-tabs
9
+
10
+
11
+
12
+
13
+
14
+ ## [0.9.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@0.9.1...@synerise/ds-card-tabs@0.9.2) (2021-11-16)
15
+
16
+ **Note:** Version bump only for package @synerise/ds-card-tabs
17
+
18
+
19
+
20
+
21
+
22
+ ## [0.9.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@0.8.77...@synerise/ds-card-tabs@0.9.1) (2021-11-09)
23
+
24
+ **Note:** Version bump only for package @synerise/ds-card-tabs
25
+
26
+
27
+
28
+
29
+
30
+ # [0.9.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@0.8.77...@synerise/ds-card-tabs@0.9.0) (2021-11-09)
31
+
32
+ **Note:** Version bump only for package @synerise/ds-card-tabs
33
+
34
+
35
+
36
+
37
+
6
38
  ## [0.8.77](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@0.8.76...@synerise/ds-card-tabs@0.8.77) (2021-11-05)
7
39
 
8
40
  **Note:** Version bump only for package @synerise/ds-card-tabs
@@ -4,18 +4,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
4
4
 
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
- function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
8
-
9
- function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
10
-
11
- function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(n); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
12
-
13
- function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
14
-
15
- function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
16
-
17
- function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
18
-
19
7
  import * as React from 'react';
20
8
  import Icon from '@synerise/ds-icon';
21
9
  import InlineEdit from '@synerise/ds-inline-edit/dist/InlineEdit';
@@ -49,19 +37,16 @@ var CardTab = function CardTab(_ref) {
49
37
  colorDot = _ref.colorDot;
50
38
 
51
39
  var _React$useState = React.useState(false),
52
- _React$useState2 = _slicedToArray(_React$useState, 2),
53
- edited = _React$useState2[0],
54
- setEdited = _React$useState2[1];
40
+ edited = _React$useState[0],
41
+ setEdited = _React$useState[1];
55
42
 
56
- var _React$useState3 = React.useState(name),
57
- _React$useState4 = _slicedToArray(_React$useState3, 2),
58
- editedName = _React$useState4[0],
59
- setEditedName = _React$useState4[1];
43
+ var _React$useState2 = React.useState(name),
44
+ editedName = _React$useState2[0],
45
+ setEditedName = _React$useState2[1];
60
46
 
61
- var _React$useState5 = React.useState(false),
62
- _React$useState6 = _slicedToArray(_React$useState5, 2),
63
- pressed = _React$useState6[0],
64
- setPressed = _React$useState6[1];
47
+ var _React$useState3 = React.useState(false),
48
+ pressed = _React$useState3[0],
49
+ setPressed = _React$useState3[1];
65
50
 
66
51
  var getTexts = React.useMemo(function () {
67
52
  return _objectSpread({
@@ -105,8 +90,8 @@ var CardTab = function CardTab(_ref) {
105
90
  var showCardActions = React.useCallback(function () {
106
91
  return (!!onChangeName || !!onDuplicateTab || !!onRemoveTab) && !suffixIcon;
107
92
  }, [onChangeName, onDuplicateTab, onRemoveTab, suffixIcon]);
108
- return React.createElement(S.CardTabContainer, {
109
- className: "".concat(pressed ? 'pressed' : ''),
93
+ return /*#__PURE__*/React.createElement(S.CardTabContainer, {
94
+ className: "" + (pressed ? 'pressed' : ''),
110
95
  edited: edited,
111
96
  active: Boolean(active),
112
97
  invalid: Boolean(invalid),
@@ -126,38 +111,38 @@ var CardTab = function CardTab(_ref) {
126
111
  greyBackground: !!greyBackground,
127
112
  "data-id": id,
128
113
  "data-testid": "card-tab-container"
129
- }, React.createElement(CardTabPrefix, {
114
+ }, /*#__PURE__*/React.createElement(CardTabPrefix, {
130
115
  colorDot: colorDot,
131
116
  draggable: draggable,
132
117
  prefixIcon: prefixIcon,
133
118
  prefix: prefix,
134
119
  tag: tag
135
- }), React.createElement(S.CardTabLabel, {
120
+ }), /*#__PURE__*/React.createElement(S.CardTabLabel, {
136
121
  "data-testid": "card-tab-label",
137
122
  invalidName: Boolean(invalidName) && !invalid
138
- }, edited ? React.createElement(InlineEdit, {
123
+ }, edited ? /*#__PURE__*/React.createElement(InlineEdit, {
139
124
  className: "ds-card-tabs__edit-name",
140
125
  size: "small",
141
126
  hideIcon: true,
142
127
  autoFocus: true,
143
128
  input: {
144
129
  value: editedName,
145
- name: "ds-card-tab-input-".concat(id),
130
+ name: "ds-card-tab-input-" + id,
146
131
  onBlur: handleEditNameBlur,
147
132
  onChange: handleChangeName
148
133
  },
149
134
  "data-testid": "card-tab-edit-input"
150
- }) : React.createElement(Tooltip, {
135
+ }) : /*#__PURE__*/React.createElement(Tooltip, {
151
136
  title: name
152
- }, React.createElement(S.CardTabName, {
137
+ }, /*#__PURE__*/React.createElement(S.CardTabName, {
153
138
  "data-testid": "card-tab-name"
154
- }, name))), showCardActions() && React.createElement(CardTabActions, {
139
+ }, name))), showCardActions() && /*#__PURE__*/React.createElement(CardTabActions, {
155
140
  enterEditNameMode: handleEditName,
156
141
  changeNameAvailable: Boolean(onChangeName),
157
142
  onDuplicateTab: handleDuplicate,
158
143
  onRemoveTab: handleRemove,
159
144
  texts: getTexts
160
- }), suffixIcon && React.createElement(S.CardSuffixWrapper, null, React.createElement(Icon, {
145
+ }), suffixIcon && /*#__PURE__*/React.createElement(S.CardSuffixWrapper, null, /*#__PURE__*/React.createElement(Icon, {
161
146
  className: "ds-card-tabs__suffix-icon",
162
147
  component: suffixIcon
163
148
  })));
@@ -37,7 +37,7 @@ export var CardTabLabel = styled.span.withConfig({
37
37
  })(["", ";color:", ";line-height:20px;position:relative;font-size:14px;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) {
38
38
  return props.theme.palette['grey-600'];
39
39
  }, CardTabName, function (props) {
40
- return props.invalidName ? "linear-gradient(\n to right,\n ".concat(props.invalidName ? props.theme.palette['red-600'] : props.theme.palette['blue-600'], " 0%,\n ").concat(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';
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
41
  }, InPlaceEditableInputContainer, function (props) {
42
42
  return props.invalidName ? props.theme.palette['red-600'] : props.theme.palette['grey-800'];
43
43
  }, function (props) {
@@ -86,7 +86,7 @@ export var CardTabContainer = styled.div.withConfig({
86
86
  greyBackground = _ref7.greyBackground,
87
87
  edited = _ref7.edited;
88
88
  if (invalid && active) return theme.palette['red-600'];
89
- if (active && !edited) return theme.palette["".concat(color)];
89
+ if (active && !edited) return theme.palette["" + color];
90
90
  if (greyBackground) return theme.palette.white;
91
91
  return theme.palette['grey-050'];
92
92
  }, function (_ref8) {
@@ -100,7 +100,7 @@ export var CardTabContainer = styled.div.withConfig({
100
100
  edited = _ref9.edited;
101
101
  if (invalid) return theme.palette['red-600'];
102
102
  if (edited) return theme.palette['blue-600'];
103
- return getColor(active && !edited, theme.palette["".concat(color)], theme.palette['grey-300']);
103
+ return getColor(active && !edited, theme.palette["" + color], theme.palette['grey-300']);
104
104
  }, function (_ref10) {
105
105
  var disabled = _ref10.disabled;
106
106
  return disabled ? 'none' : 'all';
@@ -109,21 +109,21 @@ export var CardTabContainer = styled.div.withConfig({
109
109
  active = _ref11.active,
110
110
  color = _ref11.color,
111
111
  edited = _ref11.edited;
112
- return getColor(active && !edited, theme.palette.white, theme.palette["".concat(color)]);
112
+ return getColor(active && !edited, theme.palette.white, theme.palette["" + color]);
113
113
  }, function (_ref12) {
114
114
  var theme = _ref12.theme,
115
115
  active = _ref12.active,
116
116
  color = _ref12.color,
117
117
  edited = _ref12.edited;
118
- return getColor(active && !edited, theme.palette["".concat(color)], theme.palette.white);
118
+ return getColor(active && !edited, theme.palette["" + color], theme.palette.white);
119
119
  }, CardDot, function (_ref13) {
120
120
  var theme = _ref13.theme,
121
121
  active = _ref13.active,
122
122
  color = _ref13.color,
123
123
  edited = _ref13.edited,
124
124
  invalid = _ref13.invalid;
125
- if (active && invalid) return theme.palette["".concat(color)];
126
- return getColor(active && !edited, 'transparent', theme.palette["".concat(color)]);
125
+ if (active && invalid) return theme.palette["" + color];
126
+ return getColor(active && !edited, 'transparent', theme.palette["" + color]);
127
127
  }, CardDotPrefix, function (_ref14) {
128
128
  var active = _ref14.active,
129
129
  edited = _ref14.edited;
@@ -144,7 +144,7 @@ export var CardTabContainer = styled.div.withConfig({
144
144
  }, function (_ref18) {
145
145
  var greyBackground = _ref18.greyBackground,
146
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 ".concat(theme.palette["grey-050"]);
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"];
148
148
  }, function (_ref19) {
149
149
  var theme = _ref19.theme,
150
150
  greyBackground = _ref19.greyBackground;
@@ -162,7 +162,7 @@ export var CardTabContainer = styled.div.withConfig({
162
162
  }, CardTabTag, function (_ref23) {
163
163
  var theme = _ref23.theme,
164
164
  color = _ref23.color;
165
- return theme.palette["".concat(color)];
165
+ return theme.palette["" + color];
166
166
  }, function (_ref24) {
167
167
  var theme = _ref24.theme;
168
168
  return theme.palette.white;
@@ -8,15 +8,15 @@ var CardTabActions = function CardTabActions(_ref) {
8
8
  onDuplicateTab = _ref.onDuplicateTab,
9
9
  onRemoveTab = _ref.onRemoveTab,
10
10
  texts = _ref.texts;
11
- return React.createElement(S.CardTabSuffix, {
11
+ return /*#__PURE__*/React.createElement(S.CardTabSuffix, {
12
12
  "data-testid": "card-tab-suffix"
13
- }, React.createElement(Cruds, {
13
+ }, /*#__PURE__*/React.createElement(Cruds, {
14
14
  onEdit: changeNameAvailable ? enterEditNameMode : undefined,
15
- editTooltip: texts === null || texts === void 0 ? void 0 : texts.changeNameTooltip,
15
+ editTooltip: texts == null ? void 0 : texts.changeNameTooltip,
16
16
  onDuplicate: onDuplicateTab,
17
- duplicateTooltip: texts === null || texts === void 0 ? void 0 : texts.duplicateTooltip,
17
+ duplicateTooltip: texts == null ? void 0 : texts.duplicateTooltip,
18
18
  onRemove: onRemoveTab,
19
- removeTooltip: texts === null || texts === void 0 ? void 0 : texts.removeTooltip
19
+ removeTooltip: texts == null ? void 0 : texts.removeTooltip
20
20
  }));
21
21
  };
22
22
 
@@ -0,0 +1 @@
1
+ export {};
@@ -1,6 +1,5 @@
1
1
  import * as React from 'react';
2
- import Icon from '@synerise/ds-icon';
3
- import DragHandleM from '@synerise/ds-icon/dist/icons/DragHandleM';
2
+ import Icon, { DragHandleM } from '@synerise/ds-icon';
4
3
  import theme from '@synerise/ds-core/dist/js/DSProvider/ThemeProvider/theme';
5
4
  import * as S from '../CardTab.styles';
6
5
  import { prefixType } from '../CardTab.types';
@@ -11,19 +10,19 @@ var CardTabPrefix = function CardTabPrefix(_ref) {
11
10
  tag = _ref.tag,
12
11
  prefixIcon = _ref.prefixIcon,
13
12
  colorDot = _ref.colorDot;
14
- return React.createElement(S.CardTabPrefix, {
13
+ return /*#__PURE__*/React.createElement(S.CardTabPrefix, {
15
14
  "data-testid": "card-tab-prefix"
16
- }, prefix === prefixType.TAG && tag && React.createElement(S.CardTabTag, {
15
+ }, prefix === prefixType.TAG && tag && /*#__PURE__*/React.createElement(S.CardTabTag, {
17
16
  draggable: draggable,
18
17
  "data-testid": "card-tab-tag"
19
- }, tag), prefix === prefixType.ICON && prefixIcon && React.createElement(S.CardIconPrefix, null, React.createElement(Icon, {
18
+ }, tag), prefix === prefixType.ICON && prefixIcon && /*#__PURE__*/React.createElement(S.CardIconPrefix, null, /*#__PURE__*/React.createElement(Icon, {
20
19
  component: prefixIcon,
21
20
  color: theme.palette['grey-600']
22
- })), prefix === prefixType.DOT && colorDot && React.createElement(S.CardDotPrefix, {
21
+ })), prefix === prefixType.DOT && colorDot && /*#__PURE__*/React.createElement(S.CardDotPrefix, {
23
22
  "data-testid": "card-dot-tag"
24
- }, colorDot), draggable && React.createElement(S.CardDragPrefix, null, React.createElement(Icon, {
23
+ }, colorDot), draggable && /*#__PURE__*/React.createElement(S.CardDragPrefix, null, /*#__PURE__*/React.createElement(Icon, {
25
24
  className: "ds-card-tabs__handle-icon",
26
- component: React.createElement(DragHandleM, null)
25
+ component: /*#__PURE__*/React.createElement(DragHandleM, null)
27
26
  }), ' '));
28
27
  };
29
28
 
@@ -0,0 +1 @@
1
+ export {};
package/dist/CardTabs.js CHANGED
@@ -41,21 +41,21 @@ var CardTabs = function CardTabs(_ref) {
41
41
  });
42
42
  };
43
43
 
44
- return React.createElement(S.CardTabsContainer, {
45
- className: "ds-card-tabs ".concat(className || ''),
44
+ return /*#__PURE__*/React.createElement(S.CardTabsContainer, {
45
+ className: "ds-card-tabs " + (className || ''),
46
46
  "data-testid": "card-tabs-container"
47
- }, onChangeOrder ? React.createElement("div", {
47
+ }, onChangeOrder ? /*#__PURE__*/React.createElement("div", {
48
48
  "data-testid": "card-tabs-sortable"
49
- }, React.createElement(ReactSortable, _extends({}, SORTABLE_CONFIG, {
49
+ }, /*#__PURE__*/React.createElement(ReactSortable, _extends({}, SORTABLE_CONFIG, {
50
50
  className: "ds-card-tags-sortable",
51
51
  list: children,
52
52
  setList: handleChangeOrder
53
- }), renderChildren())) : React.createElement("div", {
53
+ }), renderChildren())) : /*#__PURE__*/React.createElement("div", {
54
54
  className: "ds-card-tags-sortable",
55
55
  "data-testid": "card-tabs-static"
56
- }, renderChildren()), onAddTab && React.createElement("span", {
56
+ }, renderChildren()), onAddTab && /*#__PURE__*/React.createElement("span", {
57
57
  "data-testid": "card-tabs-add-button"
58
- }, React.createElement(Button.Creator, {
58
+ }, /*#__PURE__*/React.createElement(Button.Creator, {
59
59
  disabled: !!maxTabsCount && React.Children.toArray(children).length >= maxTabsCount,
60
60
  onClick: onAddTab
61
61
  })));
@@ -0,0 +1 @@
1
+ export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-card-tabs",
3
- "version": "0.8.77",
3
+ "version": "0.9.3",
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.15.0",
36
- "@synerise/ds-cruds": "^0.2.50",
37
- "@synerise/ds-inline-edit": "^0.4.39",
38
- "@synerise/ds-typography": "^0.11.9",
35
+ "@synerise/ds-button": "^0.16.2",
36
+ "@synerise/ds-cruds": "^0.3.2",
37
+ "@synerise/ds-inline-edit": "^0.5.3",
38
+ "@synerise/ds-typography": "^0.12.2",
39
39
  "react-sortablejs-typescript": "2.0.3",
40
40
  "sortablejs": "^1.10.1"
41
41
  },
@@ -47,5 +47,5 @@
47
47
  "devDependencies": {
48
48
  "@types/lodash": "4.14.149"
49
49
  },
50
- "gitHead": "bf865b6d1967c42effb68dc794f34dd18ddebe27"
50
+ "gitHead": "2468359677783819939fb9f1ef5acc36667ecd1a"
51
51
  }