@synerise/ds-card-tabs 1.2.5 → 1.3.1

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.3.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@1.3.0...@synerise/ds-card-tabs@1.3.1) (2025-05-19)
+
+**Note:** Version bump only for package @synerise/ds-card-tabs
+
+
+
+
+
+# [1.3.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@1.2.5...@synerise/ds-card-tabs@1.3.0) (2025-05-07)
+
+
+### Features
+
+* **card-tabs:** fix types for id and prefix ([c0efb33](https://github.com/Synerise/synerise-design/commit/c0efb3371f31919923f42d111ad946b346b6ad29))
+
+
+
+
+
 ## [1.2.5](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@1.2.4...@synerise/ds-card-tabs@1.2.5) (2025-04-24)
 
 **Note:** Version bump only for package @synerise/ds-card-tabs

package/dist/CardTab/CardTab.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { CardTabProps } from './CardTab.types';
-declare const CardTab: (props: CardTabProps) => React.JSX.Element;
+declare const CardTab: <IdType extends string | number>(props: CardTabProps<IdType>) => React.JSX.Element;
 export default CardTab;

package/dist/CardTab/CardTab.js

@@ -1,7 +1,9 @@
+var _excluded = ["id", "name", "suffixIcon", "renderSuffix", "active", "draggable", "disabled", "invalid", "invalidName", "greyBackground", "onChangeName", "onSelectTab", "onDuplicateTab", "onRemoveTab", "onPreviewTab", "texts", "color", "itemData", "dragHandleProps", "actionsAsDropdown", "intl"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { useState, useMemo, useCallback } from 'react';
 import Icon from '@synerise/ds-icon';
-import InlineEdit from '@synerise/ds-inline-edit/dist/InlineEdit';
+import InlineEdit from '@synerise/ds-inline-edit';
 import { useIntl } from 'react-intl';
 import Tooltip from '@synerise/ds-tooltip';
 import * as S from './CardTab.styles';
@@ -11,9 +13,6 @@ import CardTabDropdown from './CardTabDropdown/CardTabDropdown';
 var CardTab = function CardTab(props) {
   var id = props.id,
     name = props.name,
-    tag = props.tag,
-    prefix = props.prefix,
-    prefixIcon = props.prefixIcon,
     suffixIcon = props.suffixIcon,
     renderSuffix = props.renderSuffix,
     active = props.active,
@@ -30,10 +29,11 @@ var CardTab = function CardTab(props) {
     texts = props.texts,
     _props$color = props.color,
     color = _props$color === void 0 ? 'yellow' : _props$color,
-    colorDot = props.colorDot,
     itemData = props.itemData,
     dragHandleProps = props.dragHandleProps,
-    actionsAsDropdown = props.actionsAsDropdown;
+    actionsAsDropdown = props.actionsAsDropdown,
+    _intl = props.intl,
+    prefixProps = _objectWithoutPropertiesLoose(props, _excluded);
   var intl = useIntl();
   var _useState = useState(false),
     edited = _useState[0],
@@ -170,14 +170,10 @@ var CardTab = function CardTab(props) {
     "data-id": id,
     "data-testid": "card-tab-container",
     itemData: itemData
-  }, !edited && /*#__PURE__*/React.createElement(CardTabPrefix, {
+  }, !edited && /*#__PURE__*/React.createElement(CardTabPrefix, _extends({
     dragHandleProps: dragHandleProps,
-    colorDot: colorDot,
-    draggable: draggable,
-    prefixIcon: prefixIcon,
-    prefix: prefix,
-    tag: tag
-  }), /*#__PURE__*/React.createElement(S.CardTabLabel, {
+    draggable: draggable
+  }, prefixProps)), /*#__PURE__*/React.createElement(S.CardTabLabel, {
     onDoubleClick: handleEditName,
     "data-testid": "card-tab-label"
   }, edited ? /*#__PURE__*/React.createElement(InlineEdit, {

package/dist/CardTab/CardTab.styles.d.ts

@@ -6,7 +6,9 @@ export declare const CardTabTag: import("styled-components").StyledComponent<"di
 export declare const CardDotPrefix: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CardDot: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CardTabPrefix: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardDragPrefix: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardDragPrefix: import("styled-components").StyledComponent<"div", any, {
+    persistent: boolean;
+}, never>;
 export declare const CardIconPrefix: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CardTabContainer: import("styled-components").StyledComponent<"div", any, {
     active: boolean;

package/dist/CardTab/CardTab.styles.js

@@ -51,7 +51,9 @@ export var CardTabPrefix = styled.div.withConfig({
 export var CardDragPrefix = styled.div.withConfig({
   displayName: "CardTabstyles__CardDragPrefix",
   componentId: "sc-1n86s98-8"
-})(["display:none;&.persistent{display:block;}"]);
+})(["display:", ";"], function (props) {
+  return props.persistent ? 'block' : 'none';
+});
 export var CardIconPrefix = styled.div.withConfig({
   displayName: "CardTabstyles__CardIconPrefix",
   componentId: "sc-1n86s98-9"

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

@@ -19,42 +19,57 @@ export type CardTabTexts = {
     removeMenuItem?: ReactNode;
     duplicateMenuItem?: ReactNode;
 };
-export type CardTabProps<IdType extends string | number = number> = {
-    /**
-     * @deprecated
-     */
-    intl?: IntlShape;
-    id: IdType;
-    name: string;
+export type TagPrefixProps = {
+    prefix: prefixType.TAG;
     tag: string;
-    prefix: prefixType;
-    dragHandleProps?: DragHandlePropType;
+};
+export type DotPrefixProps = {
+    prefix: prefixType.DOT;
     colorDot?: ReactNode;
+};
+export type IconPrefixProps = {
+    prefix: prefixType.ICON;
+    prefixIcon: ReactNode;
+};
+export type HandlePrefixProps = {
+    prefix: prefixType.HANDLE;
+};
+export type PrefixProps = DotPrefixProps | HandlePrefixProps | IconPrefixProps | TagPrefixProps;
+type CardTabCommonProps = {
+    name: string;
+    dragHandleProps?: DragHandlePropType;
     color?: Color | DefaultColor | string;
     active?: boolean;
     draggable?: boolean;
-    prefixIcon?: ReactNode;
     suffixIcon?: ReactNode;
     disabled?: boolean;
     invalid?: boolean;
     invalidName?: boolean;
     greyBackground?: boolean;
-    onSelectTab?: (id: IdType) => void;
-    onChangeName?: (id: IdType, name: string) => void;
-    onDuplicateTab?: (id: IdType) => void;
-    onRemoveTab?: (id: IdType) => void;
-    onPreviewTab?: (id: IdType) => void;
     texts?: CardTabTexts;
     itemData?: unknown;
     actionsAsDropdown?: boolean;
-    renderSuffix?: (props: CardTabSuffixProps) => ReactNode;
+    /**
+   * @deprecated
+   */
+    keyId?: string;
+} & PrefixProps;
+export type CardTabProps<IdType extends string | number = number> = {
     /**
      * @deprecated
      */
-    keyId?: string;
-};
-export type CardTabSuffixProps = Omit<CardTabProps & {
+    intl?: IntlShape;
+    id: IdType;
+    onSelectTab?: (id: IdType) => void;
+    onChangeName?: (id: IdType, name: string) => void;
+    onDuplicateTab?: (id: IdType) => void;
+    onRemoveTab?: (id: IdType) => void;
+    onPreviewTab?: (id: IdType) => void;
+    renderSuffix?: (props: CardTabSuffixProps) => ReactNode;
+} & CardTabCommonProps;
+export type CardTabSuffixProps = CardTabCommonProps & {
     handleRemove?: (event?: MouseEvent<HTMLElement>) => void;
     handleDuplicate?: (event?: MouseEvent<HTMLElement>) => void;
     handleEditName?: (event?: MouseEvent<HTMLElement>) => void;
-}, 'onChangeName' | 'onDuplicateTab' | 'onRemoveTab' | 'onSelectTab'>;
+};
+export {};

package/dist/CardTab/CardTabPrefix/CardTabPrefix.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { Props } from './CardTabPrefix.types';
-declare const CardTabPrefix: ({ prefix, draggable, tag, prefixIcon, colorDot, dragHandleProps }: Props) => React.JSX.Element;
+import { CardTabPrefixProps } from './CardTabPrefix.types';
+declare const CardTabPrefix: ({ draggable, dragHandleProps, ...rest }: CardTabPrefixProps) => React.JSX.Element;
 export default CardTabPrefix;

package/dist/CardTab/CardTabPrefix/CardTabPrefix.js

@@ -1,30 +1,52 @@
+var _excluded = ["draggable", "dragHandleProps"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React from 'react';
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { useMemo } from 'react';
 import Icon, { DragHandleM } from '@synerise/ds-icon';
 import * as S from '../CardTab.styles';
 import { prefixType } from '../CardTab.types';
+import { isTagPrefix, isDotPrefix, isIconPrefix, isHandlePrefix } from './CardTabPrefix.utils';
 var CardTabPrefix = function CardTabPrefix(_ref) {
-  var prefix = _ref.prefix,
-    draggable = _ref.draggable,
-    tag = _ref.tag,
-    prefixIcon = _ref.prefixIcon,
-    colorDot = _ref.colorDot,
-    dragHandleProps = _ref.dragHandleProps;
-  var className = prefix === prefixType.HANDLE ? 'persistent' : '';
+  var draggable = _ref.draggable,
+    dragHandleProps = _ref.dragHandleProps,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var prefixElement = useMemo(function () {
+    if (isTagPrefix(rest)) {
+      var tag = rest.tag;
+      return /*#__PURE__*/React.createElement(S.CardTabTag, {
+        "data-testid": "card-tab-tag"
+      }, tag);
+    }
+    if (isDotPrefix(rest)) {
+      var colorDot = rest.colorDot;
+      return /*#__PURE__*/React.createElement(S.CardDotPrefix, {
+        "data-testid": "card-tab-dot"
+      }, colorDot || /*#__PURE__*/React.createElement(S.CardDot, null));
+    }
+    if (isIconPrefix(rest)) {
+      var prefixIcon = rest.prefixIcon;
+      return /*#__PURE__*/React.createElement(S.CardIconPrefix, {
+        "data-testid": "card-tab-icon"
+      }, /*#__PURE__*/React.createElement(Icon, {
+        component: prefixIcon
+      }));
+    }
+    return /*#__PURE__*/React.createElement(React.Fragment, null);
+  }, [rest]);
+  var handleElement = useMemo(function () {
+    if (isHandlePrefix(rest) || draggable) {
+      return /*#__PURE__*/React.createElement(S.CardDragPrefix, _extends({
+        "data-testid": "card-tab-handle",
+        persistent: rest.prefix === prefixType.HANDLE
+      }, dragHandleProps), /*#__PURE__*/React.createElement(Icon, {
+        className: "ds-card-tabs__handle-icon sortable-drag",
+        component: /*#__PURE__*/React.createElement(DragHandleM, null)
+      }), ' ');
+    }
+    return /*#__PURE__*/React.createElement(React.Fragment, null);
+  }, [dragHandleProps, draggable, rest]);
   return /*#__PURE__*/React.createElement(S.CardTabPrefix, {
     "data-testid": "card-tab-prefix"
-  }, prefix === prefixType.TAG && tag && /*#__PURE__*/React.createElement(S.CardTabTag, {
-    draggable: draggable,
-    "data-testid": "card-tab-tag"
-  }, tag), prefix === prefixType.ICON && prefixIcon && /*#__PURE__*/React.createElement(S.CardIconPrefix, null, /*#__PURE__*/React.createElement(Icon, {
-    component: prefixIcon
-  })), prefix === prefixType.DOT && colorDot && /*#__PURE__*/React.createElement(S.CardDotPrefix, {
-    "data-testid": "card-dot-tag"
-  }, colorDot), (prefix === prefixType.HANDLE || draggable) && /*#__PURE__*/React.createElement(S.CardDragPrefix, _extends({
-    className: className
-  }, dragHandleProps), /*#__PURE__*/React.createElement(Icon, {
-    className: "ds-card-tabs__handle-icon sortable-drag",
-    component: /*#__PURE__*/React.createElement(DragHandleM, null)
-  }), ' '));
+  }, prefixElement, handleElement);
 };
 export default CardTabPrefix;

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

@@ -1,10 +1,5 @@
-import { ReactNode } from 'react';
-import { prefixType, CardTabProps } from '../CardTab.types';
-export interface Props {
-    prefix: prefixType;
+import { CardTabProps, PrefixProps } from '../CardTab.types';
+export type CardTabPrefixProps = PrefixProps & {
     draggable?: boolean;
-    tag?: string;
-    prefixIcon?: ReactNode;
-    colorDot?: ReactNode;
     dragHandleProps?: CardTabProps['dragHandleProps'];
-}
+};

package/dist/CardTab/CardTabPrefix/CardTabPrefix.utils.d.ts

@@ -0,0 +1,5 @@
+import type { PrefixProps, TagPrefixProps, DotPrefixProps, IconPrefixProps, HandlePrefixProps } from '../CardTab.types';
+export declare const isTagPrefix: (props: PrefixProps) => props is TagPrefixProps;
+export declare const isDotPrefix: (props: PrefixProps) => props is DotPrefixProps;
+export declare const isIconPrefix: (props: PrefixProps) => props is IconPrefixProps;
+export declare const isHandlePrefix: (props: PrefixProps) => props is HandlePrefixProps;

package/dist/CardTab/CardTabPrefix/CardTabPrefix.utils.js

@@ -0,0 +1,13 @@
+import { prefixType } from '../CardTab.types';
+export var isTagPrefix = function isTagPrefix(props) {
+  return props.prefix === prefixType.TAG;
+};
+export var isDotPrefix = function isDotPrefix(props) {
+  return props.prefix === prefixType.DOT;
+};
+export var isIconPrefix = function isIconPrefix(props) {
+  return props.prefix === prefixType.ICON;
+};
+export var isHandlePrefix = function isHandlePrefix(props) {
+  return props.prefix === prefixType.HANDLE;
+};

package/dist/CardTabs.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { CardTabsProps } from './CardTabs.types';
-declare const CardTabs: ({ className, onChangeOrder, onAddTab, maxTabsCount, children, addTabLabel, ...htmlAttributes }: CardTabsProps) => React.JSX.Element;
+declare const CardTabs: <IdType extends string | number>({ className, onChangeOrder, onAddTab, maxTabsCount, children, addTabLabel, ...htmlAttributes }: CardTabsProps<IdType>) => React.JSX.Element;
 export default CardTabs;

package/dist/CardTabs.types.d.ts

@@ -1,11 +1,12 @@
 import { WithHTMLAttributes } from '@synerise/ds-utils';
 import { ReactElement } from 'react';
 import type { CardTabProps } from './CardTab/CardTab.types';
-export type CardTabsProps = WithHTMLAttributes<HTMLDivElement, {
-    onChangeOrder?: (newOrder: CardTabsItem[]) => void;
+export type CardTabsPropsBase<IdType extends string | number> = {
+    onChangeOrder?: (newOrder: CardTabProps<IdType>[]) => void;
     onAddTab?: () => void;
     addTabLabel?: string;
     maxTabsCount?: number;
-    children?: Array<ReactElement<CardTabProps>>;
-}>;
+    children?: Array<ReactElement<CardTabProps<IdType>>>;
+};
+export type CardTabsProps<IdType extends string | number> = WithHTMLAttributes<HTMLDivElement, CardTabsPropsBase<IdType>>;
 export type CardTabsItem = Partial<CardTabProps>;

package/dist/index.d.ts

@@ -3,9 +3,10 @@ import * as MainCardTabsStyles from './CardTabs.styles';
 export { default } from './CardTabs';
 export { default as CardTab } from './CardTab/CardTab';
 export { prefixType } from './CardTab/CardTab.types';
+export { CardDot } from './CardTab/CardTab.styles';
 export declare const CardTabsStyles: {
     CardTabs: typeof MainCardTabsStyles;
     CardTab: typeof CardTabStyles;
 };
-export type { CardTabsItem, CardTabsProps } from './CardTabs.types';
+export type { CardTabsItem, CardTabsProps, CardTabsPropsBase } from './CardTabs.types';
 export type { CardTabProps } from './CardTab/CardTab.types';

package/dist/index.js

@@ -3,6 +3,7 @@ import * as MainCardTabsStyles from './CardTabs.styles';
 export { default } from './CardTabs';
 export { default as CardTab } from './CardTab/CardTab';
 export { prefixType } from './CardTab/CardTab.types';
+export { 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": "1.2.5",
+  "version": "1.3.1",
   "description": "CardTabs UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,16 +34,16 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^1.1.5",
-    "@synerise/ds-cruds": "^1.0.6",
-    "@synerise/ds-dropdown": "^1.0.6",
-    "@synerise/ds-icon": "^1.4.1",
-    "@synerise/ds-inline-edit": "^1.0.7",
-    "@synerise/ds-menu": "^1.0.6",
-    "@synerise/ds-sortable": "^1.1.1",
-    "@synerise/ds-tooltip": "^1.1.5",
-    "@synerise/ds-typography": "^1.0.6",
-    "@synerise/ds-utils": "^1.0.1"
+    "@synerise/ds-button": "^1.3.0",
+    "@synerise/ds-cruds": "^1.0.8",
+    "@synerise/ds-dropdown": "^1.0.8",
+    "@synerise/ds-icon": "^1.5.0",
+    "@synerise/ds-inline-edit": "^1.0.9",
+    "@synerise/ds-menu": "^1.0.8",
+    "@synerise/ds-sortable": "^1.1.2",
+    "@synerise/ds-tooltip": "^1.1.7",
+    "@synerise/ds-typography": "^1.0.8",
+    "@synerise/ds-utils": "^1.1.0"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
@@ -52,5 +52,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "fc601270d3c84a5a52b62473a01f1b3c1c7014a7"
+  "gitHead": "8aa16b27c86c97e3ac774d92561ab0a03176c439"
 }