@synerise/ds-card-tabs 0.13.52 → 0.13.53

package/CHANGELOG.md

@@ -3,6 +3,21 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.13.53](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@0.13.52...@synerise/ds-card-tabs@0.13.53) (2023-06-12)
+
+
+### Bug Fixes
+
+* **card-tabs:** adds prop to render cruds as dropdown ([a721030](https://github.com/Synerise/synerise-design/commit/a721030c508a490f99ad84595d3242870bac2b95))
+* **card-tabs:** applies code review feedback ([044862e](https://github.com/Synerise/synerise-design/commit/044862e18c467bb70332f2f875ec97e484952095))
+* **card-tabs:** makes dbl click to edit name conditional ([63307fa](https://github.com/Synerise/synerise-design/commit/63307fa40bd0831fe2c63c61c1e40ebc4bc28e7c))
+* **card-tabs:** moved fallback texts to defaultMessage in intl ([d739d7a](https://github.com/Synerise/synerise-design/commit/d739d7ac158ec297fd5a1b7908fbe5981fbf63a2))
+* **card-tabs:** removed unnecessary inline css ([14cbd5c](https://github.com/Synerise/synerise-design/commit/14cbd5cb95c61ba3a594248892ba2598d9793ad8))
+
+
+
+
+
 ## [0.13.52](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@0.13.51...@synerise/ds-card-tabs@0.13.52) (2023-05-26)
 
 **Note:** Version bump only for package @synerise/ds-card-tabs

package/README.md

@@ -102,6 +102,8 @@ import CardTabs from '@synerise/ds-card-tabs'
 | color          | Color of CardTab                                                                | `red`/ `green`/ `grey`/ `yellow`/ `blue`/ `pink`/ `mars`/ `orange`/ `fern`/ `cyan`/ `purple`/ `violet` | `yellow` |
 | colorDot       | single color dot                                                                | React.ReactNode                                                                                        | -        |
 | itemData       | Additional item data                                                            | any                                                                                                    | -        |
+| renderSuffix   | render custom suffix instead of cruds, dropdown menu or icon                                  | (props: CardTabSuffixProps) => ReactNode                                                                                              | -        |
+| actionsAsDropdown | render crud actions in dropdown instead of icons                                  | boolean                                                                                              | `false`        |
 
 #### CardTabTexts
 
@@ -110,3 +112,6 @@ import CardTabs from '@synerise/ds-card-tabs'
 | changeNameTooltip | Rename tooltip    | string / React.ReactNode | 'Rename'    |
 | duplicateTooltip  | Duplicate tooltip | string / React.ReactNode | 'Duplicate' |
 | removeTooltip     | Remove tooltip    | string / React.ReactNode | 'Remove'    |
+| changeNameMenuItem | Rename menu label    | string / React.ReactNode | 'Rename'    |
+| duplicateMenuItem  | Duplicate menu label | string / React.ReactNode | 'Duplicate' |
+| removeMenuItem     | Remove menu label    | string / React.ReactNode | 'Remove'    |

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, "name" | "color" | "id" | "draggable" | "prefix" | "disabled" | "active" | "invalid" | "greyBackground" | "itemData" | "tag" | "onChangeName" | "onDuplicateTab" | "onRemoveTab" | "onSelectTab" | "colorDot" | "prefixIcon" | "suffixIcon" | "invalidName" | "texts" | "renderSuffix"> & {
+declare const _default: React.ForwardRefExoticComponent<Pick<CardTabProps, "name" | "color" | "id" | "draggable" | "prefix" | "disabled" | "active" | "invalid" | "greyBackground" | "itemData" | "onChangeName" | "onDuplicateTab" | "onRemoveTab" | "onSelectTab" | "tag" | "colorDot" | "prefixIcon" | "suffixIcon" | "invalidName" | "texts" | "actionsAsDropdown" | "renderSuffix"> & {
     forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
 } & React.RefAttributes<any>> & {
     WrappedComponent: React.ComponentType<CardTabProps>;

package/dist/CardTab/CardTab.js

@@ -13,6 +13,7 @@ import Tooltip from '@synerise/ds-tooltip';
 import * as S from './CardTab.styles';
 import CardTabPrefix from './CardTabPrefix/CardTabPrefix';
 import CardTabActions from './CardTabActions/CardTabActions';
+import CardTabDropdown from './CardTabDropdown/CardTabDropdown';
 
 var CardTab = function CardTab(props) {
   var intl = props.intl,
@@ -37,7 +38,8 @@ var CardTab = function CardTab(props) {
       _props$color = props.color,
       color = _props$color === void 0 ? 'yellow' : _props$color,
       colorDot = props.colorDot,
-      itemData = props.itemData;
+      itemData = props.itemData,
+      actionsAsDropdown = props.actionsAsDropdown;
 
   var _useState = useState(false),
       edited = _useState[0],
@@ -54,29 +56,41 @@ var CardTab = function CardTab(props) {
   var getTexts = useMemo(function () {
     return _objectSpread({
       changeNameTooltip: intl.formatMessage({
-        id: 'DS.CARD-TAB.RENAME'
+        id: 'DS.CARD-TAB.RENAME',
+        defaultMessage: 'Rename'
       }),
       removeTooltip: intl.formatMessage({
-        id: 'DS.CARD-TAB.REMOVE'
+        id: 'DS.CARD-TAB.REMOVE',
+        defaultMessage: 'Delete'
       }),
       duplicateTooltip: intl.formatMessage({
-        id: 'DS.CARD-TAB.DUPLICATE'
+        id: 'DS.CARD-TAB.DUPLICATE',
+        defaultMessage: 'Duplicate'
       }),
       changeNameMenuItem: intl.formatMessage({
-        id: 'DS.CARD-TAB.RENAME'
+        id: 'DS.CARD-TAB.RENAME',
+        defaultMessage: 'Rename'
       }),
       removeMenuItem: intl.formatMessage({
-        id: 'DS.CARD-TAB.REMOVE'
+        id: 'DS.CARD-TAB.REMOVE',
+        defaultMessage: 'Delete'
       }),
       duplicateMenuItem: intl.formatMessage({
-        id: 'DS.CARD-TAB.DUPLICATE'
+        id: 'DS.CARD-TAB.DUPLICATE',
+        defaultMessage: 'Duplicate'
       })
     }, texts);
   }, [texts, intl]);
-  var handleEditName = useCallback(function (event) {
-    !!event && event.stopPropagation();
-    setEdited(true);
-  }, [setEdited]);
+  var handleEditName = useMemo(function () {
+    if (onChangeName === undefined) {
+      return undefined;
+    }
+
+    return function (event) {
+      !!event && event.stopPropagation();
+      setEdited(true);
+    };
+  }, [onChangeName, setEdited]);
   var handleChangeName = useMemo(function () {
     if (onChangeName === undefined) {
       return undefined;
@@ -121,9 +135,6 @@ var CardTab = function CardTab(props) {
   var showCardActions = useCallback(function () {
     return (!!onChangeName || !!onDuplicateTab || !!onRemoveTab) && !suffixIcon && !renderSuffix;
   }, [onChangeName, onDuplicateTab, onRemoveTab, suffixIcon, renderSuffix]);
-  var handleSuffixClick = useCallback(function (event) {
-    !!event && event.stopPropagation();
-  }, []);
 
   var suffixProps = _objectSpread({}, props, {
     handleRemove: handleRemove,
@@ -132,7 +143,40 @@ var CardTab = function CardTab(props) {
     texts: getTexts
   });
 
-  var renderedSuffix = !!renderSuffix && renderSuffix(suffixProps);
+  var cardSuffix = useMemo(function () {
+    var showActionsDropdownMenu = actionsAsDropdown && (onChangeName || handleDuplicate || handleRemove);
+
+    if (showActionsDropdownMenu) {
+      return /*#__PURE__*/React.createElement(CardTabDropdown, {
+        editNameHandler: onChangeName ? handleEditName : undefined,
+        duplicateHandler: handleDuplicate,
+        removeHandler: handleRemove,
+        texts: getTexts
+      });
+    }
+
+    if (renderSuffix) {
+      return renderSuffix(suffixProps);
+    }
+
+    if (suffixIcon) {
+      return /*#__PURE__*/React.createElement(S.CardSuffixWrapper, null, /*#__PURE__*/React.createElement(Icon, {
+        className: "ds-card-tabs__suffix-icon",
+        component: suffixIcon
+      }));
+    }
+
+    if (showCardActions()) {
+      return /*#__PURE__*/React.createElement(CardTabActions, {
+        onChangeName: onChangeName ? handleEditName : undefined,
+        onDuplicateTab: handleDuplicate,
+        onRemoveTab: handleRemove,
+        texts: getTexts
+      });
+    }
+
+    return /*#__PURE__*/React.createElement(React.Fragment, null);
+  }, [renderSuffix, suffixProps, actionsAsDropdown, suffixIcon, showCardActions, onChangeName, handleEditName, handleDuplicate, handleRemove, getTexts]);
   return /*#__PURE__*/React.createElement(S.CardTabContainer, {
     className: "" + (pressed ? 'pressed' : ''),
     edited: edited,
@@ -185,20 +229,7 @@ var CardTab = function CardTab(props) {
     title: name
   }, /*#__PURE__*/React.createElement(S.CardTabName, {
     "data-testid": "card-tab-name"
-  }, name))), suffixIcon && /*#__PURE__*/React.createElement(S.CardSuffixWrapper, null, /*#__PURE__*/React.createElement(Icon, {
-    className: "ds-card-tabs__suffix-icon",
-    component: suffixIcon
-  })), !suffixIcon && !!renderSuffix && /*#__PURE__*/React.createElement(S.CardSuffixWrapper, {
-    className: "ds-card-tabs__suffix-nodrag",
-    onClick: handleSuffixClick,
-    onPointerDown: handleSuffixClick,
-    "data-testid": "card-tab-suffix"
-  }, renderedSuffix), showCardActions() && /*#__PURE__*/React.createElement(CardTabActions, {
-    onChangeName: onChangeName ? handleEditName : undefined,
-    onDuplicateTab: handleDuplicate,
-    onRemoveTab: handleRemove,
-    texts: getTexts
-  }));
+  }, name))), cardSuffix);
 };
 
 export default injectIntl(CardTab);

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

@@ -22,7 +22,7 @@ export interface CardTabProps {
     name: string;
     tag: string;
     prefix: prefixType;
-    colorDot: ReactNode;
+    colorDot?: ReactNode;
     color?: Color | DefaultColor | string;
     active?: boolean;
     draggable?: boolean;
@@ -38,6 +38,7 @@ export interface CardTabProps {
     onRemoveTab?: (id: number) => void;
     texts?: CardTabTexts;
     itemData?: unknown;
+    actionsAsDropdown?: boolean;
     renderSuffix?: (props: CardTabSuffixProps) => ReactNode;
 }
 export declare type CardTabSuffixProps = Omit<CardTabProps & {

package/dist/CardTab/CardTabDropdown/CardTabDropdown.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { CardTabDropdownProps } from './CardTabDropdown.types';
+declare const CardTabDropdown: FC<CardTabDropdownProps>;
+export default CardTabDropdown;

package/dist/CardTab/CardTabDropdown/CardTabDropdown.js

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { useState, useRef } from 'react';
+import Dropdown from '@synerise/ds-dropdown';
+import { useOnClickOutside } from '@synerise/ds-utils';
+import Icon, { OptionVerticalM, EditM, DuplicateM, TrashM } from '@synerise/ds-icon';
+import Menu from '@synerise/ds-menu';
+import MenuItem from '@synerise/ds-menu/dist/Elements/Item/MenuItem';
+import theme from '@synerise/ds-core/dist/js/DSProvider/ThemeProvider/theme';
+import * as S from '../CardTab.styles';
+
+var CardTabDropdown = function CardTabDropdown(_ref) {
+  var editNameHandler = _ref.editNameHandler,
+      duplicateHandler = _ref.duplicateHandler,
+      removeHandler = _ref.removeHandler,
+      texts = _ref.texts;
+
+  var _useState = useState(false),
+      open = _useState[0],
+      setOpen = _useState[1];
+
+  var ref = useRef(null);
+  var menuItems = [];
+  useOnClickOutside(ref, function () {
+    setOpen(false);
+  });
+
+  if (editNameHandler) {
+    menuItems.push( /*#__PURE__*/React.createElement(MenuItem, {
+      onClick: function onClick(event) {
+        editNameHandler(event.domEvent);
+        setOpen(false);
+      },
+      key: "card-tabs-menu-item-rename",
+      prefixel: /*#__PURE__*/React.createElement(Icon, {
+        component: /*#__PURE__*/React.createElement(EditM, null)
+      })
+    }, texts.changeNameMenuItem));
+  }
+
+  if (duplicateHandler) {
+    menuItems.push( /*#__PURE__*/React.createElement(MenuItem, {
+      onClick: function onClick(event) {
+        duplicateHandler(event.domEvent);
+        setOpen(false);
+      },
+      key: "card-tabs-menu-item-duplicate",
+      prefixel: /*#__PURE__*/React.createElement(Icon, {
+        component: /*#__PURE__*/React.createElement(DuplicateM, null)
+      })
+    }, texts.duplicateMenuItem));
+  }
+
+  if (removeHandler) {
+    menuItems.push( /*#__PURE__*/React.createElement(MenuItem, {
+      prefixel: /*#__PURE__*/React.createElement(Icon, {
+        component: /*#__PURE__*/React.createElement(TrashM, null)
+      }),
+      onClick: function onClick(event) {
+        removeHandler(event.domEvent);
+        setOpen(false);
+      },
+      key: "card-tabs-menu-item-delete",
+      type: "danger"
+    }, texts.removeMenuItem));
+  }
+
+  return /*#__PURE__*/React.createElement(S.CardTabSuffix, {
+    "data-testid": "card-tab-suffix",
+    className: "ds-card-tabs__suffix-nodrag"
+  }, /*#__PURE__*/React.createElement(Dropdown, {
+    visible: open,
+    placement: "bottomLeft",
+    trigger: ['click'],
+    overlay: /*#__PURE__*/React.createElement("div", {
+      ref: ref
+    }, /*#__PURE__*/React.createElement(Menu, {
+      asDropdownMenu: true
+    }, menuItems))
+  }, /*#__PURE__*/React.createElement(Icon, {
+    onClick: function onClick(event) {
+      event.stopPropagation();
+      setOpen(!open);
+    },
+    component: /*#__PURE__*/React.createElement(OptionVerticalM, null),
+    color: theme.palette['grey-600']
+  })));
+};
+
+export default CardTabDropdown;

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

@@ -0,0 +1,8 @@
+import { MouseEvent } from 'react';
+import { CardTabTexts } from '../CardTab.types';
+export interface CardTabDropdownProps {
+    editNameHandler?: (event?: MouseEvent<HTMLElement>) => void;
+    duplicateHandler?: (event?: MouseEvent<HTMLElement>) => void;
+    removeHandler?: (event?: MouseEvent<HTMLElement>) => void;
+    texts: CardTabTexts;
+}

package/dist/CardTab/CardTabDropdown/CardTabDropdown.types.js

@@ -0,0 +1 @@
+export {};

package/dist/CardTabs.types.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import type { CardTabProps } from './CardTab/CardTab.types';
 export declare type CardTabsProps = {
     className?: string;
     onChangeOrder?: (newOrder: CardTabsItem[]) => void;
@@ -7,8 +8,4 @@ export declare type CardTabsProps = {
     maxTabsCount?: number;
     children?: JSX.Element[];
 };
-export declare type CardTabsItem = {
-    id: number;
-    name: string;
-    tag: string;
-};
+export declare type CardTabsItem = Partial<CardTabProps>;

package/dist/index.d.ts

@@ -1,7 +1,12 @@
+import * as CardTabStyles from './CardTab/CardTab.styles';
+import * as MainCardTabsStyles from './CardTabs.styles';
 export { default } from './CardTabs';
 export { default as CardTab } from './CardTab/CardTab';
 export type { CardTabsItem } from './CardTabs.types';
 export { prefixType } from './CardTab/CardTab.types';
 export type { CardTabProps } from './CardTab/CardTab.types';
 export { COLORS_TABS } from './CardTab/ColorsTabs';
-export { CardTabContainer, CardTabLabel, CardIconPrefix, CardDot } from './CardTab/CardTab.styles';
+export declare const CardTabsStyles: {
+    CardTabs: typeof MainCardTabsStyles;
+    CardTab: typeof CardTabStyles;
+};

package/dist/index.js

@@ -1,5 +1,10 @@
+import * as CardTabStyles from './CardTab/CardTab.styles';
+import * as MainCardTabsStyles from './CardTabs.styles';
 export { default } from './CardTabs';
 export { default as CardTab } from './CardTab/CardTab';
 export { prefixType } from './CardTab/CardTab.types';
 export { COLORS_TABS } from './CardTab/ColorsTabs';
-export { CardTabContainer, CardTabLabel, CardIconPrefix, CardDot } from './CardTab/CardTab.styles';
+export var CardTabsStyles = {
+  CardTabs: MainCardTabsStyles,
+  CardTab: CardTabStyles
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-card-tabs",
-  "version": "0.13.52",
+  "version": "0.13.53",
   "description": "CardTabs UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -48,5 +48,5 @@
   "devDependencies": {
     "@types/lodash": "4.14.149"
   },
-  "gitHead": "2b2a3ea268c4cf9790e9b1b98365d08f3c8526ef"
+  "gitHead": "40c6c94298a2fb729fbc244a414d220d3fdef02d"
 }