@synerise/ds-card-tabs 0.14.7 → 0.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/CardTab/CardTab.styles.js +1 -1
  3. package/dist/CardTab/CardTab.types.d.ts +2 -2
  4. package/dist/CardTabs.js +34 -23
  5. package/dist/CardTabs.styles.d.ts +1 -0
  6. package/dist/CardTabs.styles.js +6 -4
  7. package/dist/CardTabs.types.d.ts +2 -1
  8. package/package.json +15 -13
package/CHANGELOG.md CHANGED
@@ -3,6 +3,30 @@
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.15.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@0.14.8...@synerise/ds-card-tabs@0.15.0) (2023-12-13)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **card-tabs:** change width for card and cards container ([5ccb79e](https://github.com/Synerise/synerise-design/commit/5ccb79e506b1f7dfdc41cc9ecf46159e0fbd4abc))
12
+
13
+
14
+ ### Features
15
+
16
+ * **card-tabs:** updated card tabs layout ([d97deb3](https://github.com/Synerise/synerise-design/commit/d97deb3491fae7e4e5808590d722ab56211c7428))
17
+
18
+
19
+
20
+
21
+
22
+ ## [0.14.8](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@0.14.7...@synerise/ds-card-tabs@0.14.8) (2023-12-11)
23
+
24
+ **Note:** Version bump only for package @synerise/ds-card-tabs
25
+
26
+
27
+
28
+
29
+
6
30
  ## [0.14.7](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@0.14.6...@synerise/ds-card-tabs@0.14.7) (2023-12-06)
7
31
 
8
32
  **Note:** Version bump only for package @synerise/ds-card-tabs
package/dist/CardTab/CardTab.styles.js CHANGED
@@ -59,7 +59,7 @@ export var CardIconPrefix = styled.div.withConfig({
59
59
  export var CardTabContainer = styled.div.withConfig({
60
60
  displayName: "CardTabstyles__CardTabContainer",
61
61
  componentId: "sc-1n86s98-10"
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;}}}&:active{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) {
62
+ })(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;padding:12px;width:168px;@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;}}}&:active{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
63
  var theme = _ref3.theme,
64
64
  active = _ref3.active,
65
65
  invalid = _ref3.invalid,
package/dist/CardTab/CardTab.types.d.ts CHANGED
@@ -16,7 +16,7 @@ export type CardTabTexts = {
16
16
  removeMenuItem?: string | ReactNode;
17
17
  duplicateMenuItem?: string | ReactNode;
18
18
  };
19
- export interface CardTabProps {
19
+ export type CardTabProps = {
20
20
  intl: IntlShape;
21
21
  id: number;
22
22
  name: string;
@@ -40,7 +40,7 @@ export interface CardTabProps {
40
40
  itemData?: unknown;
41
41
  actionsAsDropdown?: boolean;
42
42
  renderSuffix?: (props: CardTabSuffixProps) => ReactNode;
43
- }
43
+ };
44
44
  export type CardTabSuffixProps = Omit<CardTabProps & {
45
45
  handleRemove?: (event?: MouseEvent<HTMLElement>) => void;
46
46
  handleDuplicate?: (event?: MouseEvent<HTMLElement>) => void;
package/dist/CardTabs.js CHANGED
@@ -6,9 +6,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
6
6
 
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
- import * as React from 'react';
10
- import { Children, cloneElement } from 'react';
11
- import { ReactSortable } from 'react-sortablejs-typescript';
9
+ import React, { Children, cloneElement, isValidElement } from 'react';
10
+ import { ReactSortable } from 'react-sortablejs';
12
11
  import Button from '@synerise/ds-button';
13
12
  import { defaultColorsOrder } from '@synerise/ds-core';
14
13
  import * as S from './CardTabs.styles';
@@ -16,8 +15,15 @@ var SORTABLE_CONFIG = {
16
15
  ghostClass: 'sortable-card-ghost-element',
17
16
  className: 'ds-card-tags-sortable',
18
17
  animation: 150,
19
- filter: '.ds-card-tabs__suffix-nodrag',
20
- preventOnFilter: false
18
+ filter: '.ds-card-tabs__suffix-nodrag, .ds-card-tabs-nodrag',
19
+ preventOnFilter: false,
20
+ onMove: function onMove(ev1) {
21
+ if (ev1.related && ev1.related.classList.contains('ds-card-tabs-nodrag')) {
22
+ return -1;
23
+ }
24
+
25
+ return true;
26
+ }
21
27
  };
22
28
 
23
29
  var CardTabs = function CardTabs(_ref) {
@@ -30,40 +36,45 @@ var CardTabs = function CardTabs(_ref) {
30
36
  addTabLabel = _ref.addTabLabel;
31
37
 
32
38
  var handleChangeOrder = function handleChangeOrder(newOrder) {
33
- onChangeOrder && onChangeOrder(newOrder.map(function (item) {
34
- return _objectSpread({}, item.props);
35
- }));
39
+ onChangeOrder && onChangeOrder(newOrder);
36
40
  };
37
41
 
42
+ var addTab = onAddTab ? /*#__PURE__*/React.createElement(S.CardTabsAddButton, {
43
+ className: "ds-card-tabs-nodrag",
44
+ "data-testid": "card-tabs-add-button"
45
+ }, /*#__PURE__*/React.createElement(Button.Creator, {
46
+ disabled: !!maxTabsCount && Children.toArray(children).length >= maxTabsCount,
47
+ label: addTabLabel != null ? addTabLabel : '',
48
+ onClick: onAddTab
49
+ })) : /*#__PURE__*/React.createElement(React.Fragment, null);
50
+ var childrenCount = Children.count(children);
51
+ var childrenData = Children.map(children, function (child) {
52
+ return child.props;
53
+ });
54
+
38
55
  var renderChildren = function renderChildren() {
39
- return Children.map(children, function (child, i) {
40
- return cloneElement(child, _objectSpread({}, child.props.color ? {} : {
56
+ return /*#__PURE__*/React.createElement(React.Fragment, null, Children.map(children, function (child, i) {
57
+ var props = child.props;
58
+ return isValidElement(child) && cloneElement(child, _objectSpread({}, props.color ? {} : {
41
59
  color: defaultColorsOrder[i % defaultColorsOrder.length]
42
60
  }, {
43
- draggable: Boolean(onChangeOrder) || child.props.draggable
61
+ draggable: childrenCount > 1 && (Boolean(onChangeOrder) || props.draggable)
44
62
  }));
45
- });
63
+ }));
46
64
  };
47
65
 
48
66
  return /*#__PURE__*/React.createElement(S.CardTabsContainer, {
49
67
  className: "ds-card-tabs " + (className || ''),
50
68
  "data-testid": "card-tabs-container"
51
- }, onChangeOrder ? /*#__PURE__*/React.createElement("div", {
69
+ }, onChangeOrder && childrenCount > 1 ? /*#__PURE__*/React.createElement("div", {
52
70
  "data-testid": "card-tabs-sortable"
53
71
  }, /*#__PURE__*/React.createElement(ReactSortable, _extends({}, SORTABLE_CONFIG, {
54
- list: children,
72
+ list: childrenData,
55
73
  setList: handleChangeOrder
56
- }), renderChildren())) : /*#__PURE__*/React.createElement("div", {
74
+ }), renderChildren(), addTab)) : /*#__PURE__*/React.createElement("div", {
57
75
  className: "ds-card-tags-sortable",
58
76
  "data-testid": "card-tabs-static"
59
- }, renderChildren()), onAddTab && /*#__PURE__*/React.createElement("span", {
60
- "data-testid": "card-tabs-add-button"
61
- }, /*#__PURE__*/React.createElement(Button.Creator, {
62
- block: true,
63
- disabled: !!maxTabsCount && Children.toArray(children).length >= maxTabsCount,
64
- label: addTabLabel != null ? addTabLabel : '',
65
- onClick: onAddTab
66
- })));
77
+ }, renderChildren(), addTab));
67
78
  };
68
79
 
69
80
  export default CardTabs;
package/dist/CardTabs.styles.d.ts CHANGED
@@ -1 +1,2 @@
1
1
  export declare const CardTabsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
2
+ export declare const CardTabsAddButton: import("styled-components").StyledComponent<"span", any, {}, never>;
package/dist/CardTabs.styles.js CHANGED
@@ -1,12 +1,14 @@
1
1
  import styled from 'styled-components';
2
2
  import { ButtonStyles } from '@synerise/ds-button';
3
- import { CardTabContainer } from './CardTab/CardTab.styles'; // eslint-disable-next-line import/prefer-default-export
4
-
5
3
  export var CardTabsContainer = styled.div.withConfig({
6
4
  displayName: "CardTabsstyles__CardTabsContainer",
7
5
  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;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) {
6
+ })(["display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;width:100%;min-width:588px;.ds-card-tags-sortable{gap:16px 12px;margin-bottom:16px;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;}}}"], function (props) {
9
7
  return props.theme.palette['blue-600'];
10
8
  }, function (props) {
11
9
  return props.theme.palette['blue-050'];
12
- }, ButtonStyles.Creator.CreatorLabel);
10
+ }, ButtonStyles.Creator.CreatorLabel);
11
+ export var CardTabsAddButton = styled.span.withConfig({
12
+ displayName: "CardTabsstyles__CardTabsAddButton",
13
+ componentId: "sc-1uu9dja-1"
14
+ })(["display:flex;flex-grow:1;flex-shrink:0;"]);
package/dist/CardTabs.types.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { ReactElement } from 'react';
1
2
  import type { CardTabProps } from './CardTab/CardTab.types';
2
3
  export type CardTabsProps = {
3
4
  className?: string;
@@ -5,6 +6,6 @@ export type CardTabsProps = {
5
6
  onAddTab?: () => void;
6
7
  addTabLabel?: string;
7
8
  maxTabsCount?: number;
8
- children?: JSX.Element[];
9
+ children?: Array<ReactElement<CardTabProps>>;
9
10
  };
10
11
  export type CardTabsItem = Partial<CardTabProps>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-card-tabs",
3
- "version": "0.14.7",
3
+ "version": "0.15.0",
4
4
  "description": "CardTabs UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -18,7 +18,7 @@
18
18
  "scripts": {
19
19
  "build": "npm run build:js && npm run build:css && npm run defs",
20
20
  "build:css": "node ../../../scripts/style/less.js",
21
- "build:js": "babel --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
21
+ "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
22
22
  "build:watch": "npm run build:js -- --watch",
23
23
  "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
24
24
  "pack:ci": "npm pack --pack-destination ../../portal/storybook-static/static",
@@ -33,16 +33,18 @@
33
33
  ],
34
34
  "types": "dist/index.d.ts",
35
35
  "dependencies": {
36
- "@synerise/ds-button": "^0.18.7",
37
- "@synerise/ds-cruds": "^0.3.41",
38
- "@synerise/ds-dropdown": "^0.17.89",
39
- "@synerise/ds-icon": "^0.58.7",
40
- "@synerise/ds-inline-edit": "^0.6.89",
41
- "@synerise/ds-menu": "^0.18.6",
42
- "@synerise/ds-tooltip": "^0.14.11",
43
- "@synerise/ds-typography": "^0.14.0",
44
- "@synerise/ds-utils": "^0.24.21",
45
- "react-sortablejs-typescript": "2.0.3"
36
+ "@synerise/ds-button": "^0.18.9",
37
+ "@synerise/ds-cruds": "^0.3.43",
38
+ "@synerise/ds-dropdown": "^0.17.91",
39
+ "@synerise/ds-icon": "^0.58.9",
40
+ "@synerise/ds-inline-edit": "^0.6.91",
41
+ "@synerise/ds-menu": "^0.18.8",
42
+ "@synerise/ds-tooltip": "^0.14.13",
43
+ "@synerise/ds-typography": "^0.14.1",
44
+ "@synerise/ds-utils": "^0.24.23",
45
+ "react-intl": "3.12.0",
46
+ "react-sortablejs": "^6.0.0",
47
+ "sortablejs": "1.15.1"
46
48
  },
47
49
  "peerDependencies": {
48
50
  "@synerise/ds-core": "*",
@@ -55,5 +57,5 @@
55
57
  "@testing-library/react": "10.0.1",
56
58
  "@testing-library/user-event": "^10.3.1"
57
59
  },
58
- "gitHead": "b5c243a1f88351e9bc0185d35fc35ea3673dab89"
60
+ "gitHead": "76edb4723a30c59f1a54f666f66fcd814de0af70"
59
61
  }