@synerise/ds-card-tabs 0.11.6 → 0.12.2

package/CHANGELOG.md

@@ -3,6 +3,45 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.12.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@0.12.1...@synerise/ds-card-tabs@0.12.2) (2022-04-12)
+
+
+### Bug Fixes
+
+* **condition:** rules-of-hooks dependencies ([10e573e](https://github.com/Synerise/synerise-design/commit/10e573e018ca7e2f69f3f317f35d51eace89ded8))
+
+
+
+
+
+## [0.12.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@0.12.0...@synerise/ds-card-tabs@0.12.1) (2022-04-12)
+
+
+### Bug Fixes
+
+* fix filter dropdowns ([eaab107](https://github.com/Synerise/synerise-design/commit/eaab107b6dca7401a17c2e36806febd11edc677b))
+
+
+
+
+
+# [0.12.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@0.11.6...@synerise/ds-card-tabs@0.12.0) (2022-04-08)
+
+
+### Bug Fixes
+
+* **step-card:** hide top duplicate and delete action buttons ([9c7bd51](https://github.com/Synerise/synerise-design/commit/9c7bd51c687ebad7c0474b25cb07e6a5ea478783))
+
+
+### Features
+
+* **card-tabs:** disable duplication when limit exceeded (cardTab) ([e83cedb](https://github.com/Synerise/synerise-design/commit/e83cedb0f8a975fce5dd7c181d3811715ac66a9f))
+* **card-tabs:** onDuplicate, onRemove accept undefined; stories, tests ([6cfd41d](https://github.com/Synerise/synerise-design/commit/6cfd41dd6db00a81428d92d024a060cc37c32239))
+
+
+
+
+
 ## [0.11.6](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@0.11.5...@synerise/ds-card-tabs@0.11.6) (2022-04-05)
 
 **Note:** Version bump only for package @synerise/ds-card-tabs

package/dist/CardTab/CardTab.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { CardTabProps } from './CardTab.types';
-declare const _default: React.ForwardRefExoticComponent<Pick<CardTabProps, "color" | "id" | "name" | "draggable" | "prefix" | "disabled" | "invalidName" | "active" | "invalid" | "greyBackground" | "tag" | "prefixIcon" | "colorDot" | "onDuplicateTab" | "onRemoveTab" | "texts" | "suffixIcon" | "onChangeName" | "onSelectTab"> & {
+declare const _default: React.ForwardRefExoticComponent<Pick<CardTabProps, "color" | "id" | "name" | "draggable" | "prefix" | "disabled" | "invalidName" | "active" | "invalid" | "greyBackground" | "tag" | "prefixIcon" | "colorDot" | "onChangeName" | "onDuplicateTab" | "onRemoveTab" | "texts" | "suffixIcon" | "onSelectTab"> & {
     forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
 } & React.RefAttributes<any>> & {
     WrappedComponent: React.ComponentType<CardTabProps>;

package/dist/CardTab/CardTab.js

@@ -65,23 +65,42 @@ var CardTab = function CardTab(_ref) {
     !!event && event.stopPropagation();
     setEdited(true);
   }, [setEdited]);
-  var handleChangeName = React.useCallback(function (event) {
-    if (event) {
-      var value = event.target.value;
-      setEditedName(value);
+  var handleChangeName = React.useMemo(function () {
+    if (onChangeName === undefined) {
+      return undefined;
     }
-  }, [setEditedName]);
+
+    return function (event) {
+      if (event) {
+        var nameValue = event.target.value;
+        setEditedName(nameValue);
+        onChangeName && onChangeName(id, nameValue);
+      }
+    };
+  }, [setEditedName, onChangeName, id]);
   var handleEditNameBlur = React.useCallback(function () {
     setEdited(false);
     onChangeName && onChangeName(id, editedName);
   }, [onChangeName, id, editedName]);
-  var handleDuplicate = React.useCallback(function (event) {
-    !!event && event.stopPropagation();
-    onDuplicateTab && onDuplicateTab(id);
+  var handleDuplicate = React.useMemo(function () {
+    if (onDuplicateTab === undefined) {
+      return undefined;
+    }
+
+    return function (event) {
+      event && event.stopPropagation();
+      onDuplicateTab && onDuplicateTab(id);
+    };
   }, [id, onDuplicateTab]);
-  var handleRemove = React.useCallback(function (event) {
-    !!event && event.stopPropagation();
-    onRemoveTab && onRemoveTab(id);
+  var handleRemove = React.useMemo(function () {
+    if (onRemoveTab === undefined) {
+      return undefined;
+    }
+
+    return function (event) {
+      event && event.stopPropagation();
+      onRemoveTab && onRemoveTab(id);
+    };
   }, [id, onRemoveTab]);
   var handleSelect = React.useCallback(function (event) {
     !!event && event.stopPropagation();
@@ -130,7 +149,9 @@ var CardTab = function CardTab(_ref) {
       value: editedName,
       name: "ds-card-tab-input-" + id,
       onBlur: handleEditNameBlur,
-      onChange: handleChangeName
+      onChange: handleChangeName || function () {
+        return undefined;
+      }
     },
     "data-testid": "card-tab-edit-input"
   }) : /*#__PURE__*/React.createElement(Tooltip, {
@@ -138,8 +159,7 @@ var CardTab = function CardTab(_ref) {
   }, /*#__PURE__*/React.createElement(S.CardTabName, {
     "data-testid": "card-tab-name"
   }, name))), showCardActions() && /*#__PURE__*/React.createElement(CardTabActions, {
-    enterEditNameMode: handleEditName,
-    changeNameAvailable: Boolean(onChangeName),
+    onChangeName: handleEditName,
     onDuplicateTab: handleDuplicate,
     onRemoveTab: handleRemove,
     texts: getTexts

package/dist/CardTab/CardTab.styles.js

@@ -66,7 +66,7 @@ export var CardDot = styled.div.withConfig({
 export var CardTabPrefix = styled.div.withConfig({
   displayName: "CardTabstyles__CardTabPrefix",
   componentId: "sc-1n86s98-7"
-})(["display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:12px;"]);
+})(["display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:16px;"]);
 export var CardDragPrefix = styled.div.withConfig({
   displayName: "CardTabstyles__CardDragPrefix",
   componentId: "sc-1n86s98-8"

package/dist/CardTab/CardTabActions/CardTabActions.js

@@ -3,7 +3,7 @@ import Cruds from '@synerise/ds-cruds';
 import * as S from '../CardTab.styles';
 
 var CardTabActions = function CardTabActions(_ref) {
-  var changeNameAvailable = _ref.changeNameAvailable,
+  var onChangeName = _ref.onChangeName,
       enterEditNameMode = _ref.enterEditNameMode,
       onDuplicateTab = _ref.onDuplicateTab,
       onRemoveTab = _ref.onRemoveTab,
@@ -11,7 +11,7 @@ var CardTabActions = function CardTabActions(_ref) {
   return /*#__PURE__*/React.createElement(S.CardTabSuffix, {
     "data-testid": "card-tab-suffix"
   }, /*#__PURE__*/React.createElement(Cruds, {
-    onEdit: changeNameAvailable ? enterEditNameMode : undefined,
+    onEdit: onChangeName != null ? onChangeName : enterEditNameMode,
     editTooltip: texts == null ? void 0 : texts.changeNameTooltip,
     onDuplicate: onDuplicateTab,
     duplicateTooltip: texts == null ? void 0 : texts.duplicateTooltip,

package/dist/CardTab/CardTabActions/CardTabActions.types.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { CardTabTexts } from '../CardTab.types';
 export interface Props {
-    changeNameAvailable: boolean;
-    enterEditNameMode: (event?: React.MouseEvent<HTMLElement>) => void;
+    onChangeName?: (event?: React.MouseEvent<HTMLElement>) => void;
+    /** @deprecated */
+    enterEditNameMode?: (event?: React.MouseEvent<HTMLElement>) => void;
     onDuplicateTab?: (event?: React.MouseEvent<HTMLElement>) => void;
     onRemoveTab?: (event?: React.MouseEvent<HTMLElement>) => void;
     texts?: CardTabTexts;

package/dist/CardTabs.styles.js

@@ -4,7 +4,7 @@ import { CardTabContainer } from './CardTab/CardTab.styles'; // eslint-disable-n
 export var CardTabsContainer = styled.div.withConfig({
   displayName: "CardTabsstyles__CardTabsContainer",
   componentId: "sc-1uu9dja-0"
-})(["display:flex;flex-direction:row;algin-items:flex-start;justify-content:flex-start;width:100%;", "{margin-right:12px;}.ds-card-tags-sortable{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:wrap;}.sortable-chosen{cursor:grabbing;background-color:", ";opacity:1;}.sortable-drag{opacity:1 !important;box-shadow:0 16px 32px 0 rgba(35,41,54,0.1);}.sortable-card-ghost-element{background-color:", ";&:hover{background-color:", ";}opacity:1;cursor:grabbing;*{visibility:hidden;}}"], CardTabContainer, function (props) {
+})(["display:flex;flex-direction:row;algin-items:flex-start;justify-content:flex-start;width:100%;", "{margin-right:12px;margin-bottom:16px;}.ds-card-tags-sortable{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:wrap;}.sortable-chosen{cursor:grabbing;background-color:", ";opacity:1;}.sortable-drag{opacity:1 !important;box-shadow:0 16px 32px 0 rgba(35,41,54,0.1);}.sortable-card-ghost-element{background-color:", ";&:hover{background-color:", ";}opacity:1;cursor:grabbing;*{visibility:hidden;}}"], CardTabContainer, function (props) {
   return props.theme.palette.white;
 }, function (props) {
   return props.theme.palette['blue-300'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-card-tabs",
-  "version": "0.11.6",
+  "version": "0.12.2",
   "description": "CardTabs UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -35,7 +35,7 @@
     "@synerise/ds-button": "^0.17.2",
     "@synerise/ds-cruds": "^0.3.9",
     "@synerise/ds-icon": "^0.49.0",
-    "@synerise/ds-inline-edit": "^0.6.10",
+    "@synerise/ds-inline-edit": "^0.6.11",
     "@synerise/ds-typography": "^0.12.2",
     "react-sortablejs-typescript": "2.0.3",
     "sortablejs": "^1.10.1"
@@ -48,5 +48,5 @@
   "devDependencies": {
     "@types/lodash": "4.14.149"
   },
-  "gitHead": "5793ce09feb88b36cc8ca1923ddfcb272b889cb0"
+  "gitHead": "78a3de75d8ec9c917d96c1b54c70d24f50dc8c7a"
 }