@synerise/ds-tabs 0.12.2 → 0.12.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.
Files changed (5) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/Tab/Tab.js +2 -15
  3. package/dist/Tab/Tab.styles.js +1 -1
  4. package/dist/Tabs.js +23 -40
  5. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [0.12.3](https://github.com/synerise/synerise-design/compare/@synerise/ds-tabs@0.12.2...@synerise/ds-tabs@0.12.3) (2021-11-22)
7
+
8
+ **Note:** Version bump only for package @synerise/ds-tabs
9
+
10
+
11
+
12
+
13
+
6
14
  ## [0.12.2](https://github.com/synerise/synerise-design/compare/@synerise/ds-tabs@0.12.1...@synerise/ds-tabs@0.12.2) (2021-11-16)
7
15
 
8
16
  **Note:** Version bump only for package @synerise/ds-tabs
package/dist/Tab/Tab.js CHANGED
@@ -1,15 +1,3 @@
1
- function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
2
-
3
- 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."); }
4
-
5
- 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(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
6
-
7
- 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; }
8
-
9
- function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_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; }
10
-
11
- function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
12
-
13
1
  import * as React from 'react';
14
2
  import Icon from '@synerise/ds-icon';
15
3
  import classNames from 'classnames';
@@ -29,9 +17,8 @@ var Tab = function Tab(_ref) {
29
17
  suffixel = _ref.suffixel;
30
18
 
31
19
  var _React$useState = React.useState(false),
32
- _React$useState2 = _slicedToArray(_React$useState, 2),
33
- isPressed = _React$useState2[0],
34
- setPressed = _React$useState2[1];
20
+ isPressed = _React$useState[0],
21
+ setPressed = _React$useState[1];
35
22
 
36
23
  var handleClick = function handleClick() {
37
24
  onClick(index);
package/dist/Tab/Tab.styles.js CHANGED
@@ -20,7 +20,7 @@ export var TabContent = styled.div.withConfig({
20
20
  })(["display:flex;flex-direction:row;align-self:center;align-items:center;justify-content:flex-start;height:24px;overflow:hidden;text-overflow:ellipsis;"]);
21
21
 
22
22
  var applyBlockStyles = function applyBlockStyles(props) {
23
- return "\n margin-right: 0;\n flex: 1;\n ".concat(TabContent, " {\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n }\n &: after {\n background-color:").concat(props.theme.palette['grey-200'], ";\n height:1px;\n }\n &: hover {\n &::after {\n background-color:").concat(props.theme.palette['grey-300'], ";\n height: 1px;\n }\n }\n &:focus:active:not(:hover) {\n &::after {\n background-color:").concat(props.theme.palette['blue-600'], ";\n background-image:none;\n height: 1px;\n }\n }\n &.pressed {\n && {\n &::after {\n height: 1px;\n }\n }\n }\n");
23
+ return "\n margin-right: 0;\n flex: 1;\n " + TabContent + " {\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n }\n &: after {\n background-color:" + props.theme.palette['grey-200'] + ";\n height:1px;\n }\n &: hover {\n &::after {\n background-color:" + props.theme.palette['grey-300'] + ";\n height: 1px;\n }\n }\n &:focus:active:not(:hover) {\n &::after {\n background-color:" + props.theme.palette['blue-600'] + ";\n background-image:none;\n height: 1px;\n }\n }\n &.pressed {\n && {\n &::after {\n height: 1px;\n }\n }\n }\n";
24
24
  };
25
25
 
26
26
  export var TabContainer = styled.button.withConfig({
package/dist/Tabs.js CHANGED
@@ -1,21 +1,9 @@
1
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
1
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
2
2
 
3
3
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
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(o); 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) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_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 Dropdown from '@synerise/ds-dropdown';
21
9
  import Icon, { OptionHorizontalM } from '@synerise/ds-icon';
@@ -44,34 +32,29 @@ var Tabs = function Tabs(_ref) {
44
32
  width = _useResize.width;
45
33
 
46
34
  var _React$useState = React.useState(true),
47
- _React$useState2 = _slicedToArray(_React$useState, 2),
48
- renderHelperTabs = _React$useState2[0],
49
- setRenderHelperTabs = _React$useState2[1];
35
+ renderHelperTabs = _React$useState[0],
36
+ setRenderHelperTabs = _React$useState[1];
50
37
 
51
- var _React$useState3 = React.useState([]),
52
- _React$useState4 = _slicedToArray(_React$useState3, 2),
53
- items = _React$useState4[0],
54
- setItems = _React$useState4[1];
38
+ var _React$useState2 = React.useState([]),
39
+ items = _React$useState2[0],
40
+ setItems = _React$useState2[1];
55
41
 
56
- var _React$useState5 = React.useState([]),
57
- _React$useState6 = _slicedToArray(_React$useState5, 2),
58
- itemsWidths = _React$useState6[0],
59
- setItemsWidths = _React$useState6[1];
42
+ var _React$useState3 = React.useState([]),
43
+ itemsWidths = _React$useState3[0],
44
+ setItemsWidths = _React$useState3[1];
60
45
 
61
- var _React$useState7 = React.useState([]),
62
- _React$useState8 = _slicedToArray(_React$useState7, 2),
63
- visibleTabs = _React$useState8[0],
64
- setVisibleTabs = _React$useState8[1];
46
+ var _React$useState4 = React.useState([]),
47
+ visibleTabs = _React$useState4[0],
48
+ setVisibleTabs = _React$useState4[1];
65
49
 
66
- var _React$useState9 = React.useState([]),
67
- _React$useState10 = _slicedToArray(_React$useState9, 2),
68
- hiddenTabs = _React$useState10[0],
69
- setHiddenTabs = _React$useState10[1];
50
+ var _React$useState5 = React.useState([]),
51
+ hiddenTabs = _React$useState5[0],
52
+ setHiddenTabs = _React$useState5[1];
70
53
 
71
54
  React.useEffect(function () {
72
55
  var newTabs = tabs.map(function (tab) {
73
- return _objectSpread(_objectSpread({}, tab), {}, {
74
- ref: /*#__PURE__*/React.createRef()
56
+ return _objectSpread({}, tab, {
57
+ ref: React.createRef()
75
58
  });
76
59
  });
77
60
  setRenderHelperTabs(true);
@@ -117,7 +100,7 @@ var Tabs = function Tabs(_ref) {
117
100
  }, hiddenTabs.length > 0 && /*#__PURE__*/React.createElement(S.DropdownMenu, null, hiddenTabs.map(function (item, index) {
118
101
  return /*#__PURE__*/React.createElement(S.DropdownMenuItem, {
119
102
  // eslint-disable-next-line react/no-array-index-key
120
- key: "".concat(item.label, "-dropdown-").concat(index),
103
+ key: item.label + "-dropdown-" + index,
121
104
  onClick: function onClick() {
122
105
  return handleTabClick(visibleTabs.length + index);
123
106
  },
@@ -126,7 +109,7 @@ var Tabs = function Tabs(_ref) {
126
109
  })), hiddenTabs.length > 0 && configuration && /*#__PURE__*/React.createElement(S.TabsDropdownDivider, null), configuration && /*#__PURE__*/React.createElement(S.DropdownMenu, null, /*#__PURE__*/React.createElement(S.DropdownMenuItem, {
127
110
  key: "configuration-btn",
128
111
  onClick: handleConfigurationAction,
129
- disabled: !!(configuration !== null && configuration !== void 0 && configuration.disabled)
112
+ disabled: !!(configuration != null && configuration.disabled)
130
113
  }, configuration.label)));
131
114
  }, [hiddenTabs, configuration, handleConfigurationAction, handleTabClick, visibleTabs.length]);
132
115
 
@@ -135,14 +118,14 @@ var Tabs = function Tabs(_ref) {
135
118
  trigger: ['click'],
136
119
  "data-testid": "tabs-dropdown",
137
120
  overlay: renderHiddenTabs,
138
- disabled: !!(configuration !== null && configuration !== void 0 && configuration.disabled),
121
+ disabled: !!(configuration != null && configuration.disabled),
139
122
  overlayStyle: {
140
123
  boxShadow: '0 4px 12px 0 rgba(35, 41, 54, 0.07)'
141
124
  }
142
125
  }, /*#__PURE__*/React.createElement(S.ShowHiddenTabsTrigger, {
143
126
  type: "ghost",
144
127
  mode: "single-icon",
145
- disabled: !!(configuration !== null && configuration !== void 0 && configuration.disabled)
128
+ disabled: !!(configuration != null && configuration.disabled)
146
129
  }, /*#__PURE__*/React.createElement(Icon, {
147
130
  component: /*#__PURE__*/React.createElement(OptionHorizontalM, null)
148
131
  }))));
@@ -152,7 +135,7 @@ var Tabs = function Tabs(_ref) {
152
135
  return /*#__PURE__*/React.createElement(React.Fragment, null, visibleTabs.filter(function (tab) {
153
136
  return Boolean(tab);
154
137
  }).map(function (tab, index) {
155
- var key = "tabs-tab-".concat(index);
138
+ var key = "tabs-tab-" + index;
156
139
  return /*#__PURE__*/React.createElement(Tab, {
157
140
  underscore: underscore,
158
141
  forwardedRef: tab.ref,
@@ -172,7 +155,7 @@ var Tabs = function Tabs(_ref) {
172
155
  return /*#__PURE__*/React.createElement(S.HiddenTabs, {
173
156
  className: "ds-hidden-helper"
174
157
  }, items.map(function (tab, index) {
175
- var key = "tabs-tab-helper-".concat(index);
158
+ var key = "tabs-tab-helper-" + index;
176
159
  return /*#__PURE__*/React.createElement(Tab, {
177
160
  className: "hidden",
178
161
  underscore: underscore,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-tabs",
3
- "version": "0.12.2",
3
+ "version": "0.12.3",
4
4
  "description": "Tabs UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "synerise/synerise-design",
@@ -32,8 +32,8 @@
32
32
  ],
33
33
  "types": "dist/index.d.ts",
34
34
  "dependencies": {
35
- "@synerise/ds-dropdown": "^0.17.2",
36
- "@synerise/ds-menu": "^0.11.1",
35
+ "@synerise/ds-dropdown": "^0.17.3",
36
+ "@synerise/ds-menu": "^0.11.2",
37
37
  "@synerise/ds-utils": "^0.19.0",
38
38
  "classnames": "2.2.6"
39
39
  },
@@ -45,5 +45,5 @@
45
45
  "devDependencies": {
46
46
  "@types/classnames": "2.2.10"
47
47
  },
48
- "gitHead": "8e667a88a48d774c550ff4766de71c4aab01f5a9"
48
+ "gitHead": "2468359677783819939fb9f1ef5acc36667ecd1a"
49
49
  }