@synerise/ds-card-tabs 1.5.22 → 1.5.24

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.5.24](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@1.5.23...@synerise/ds-card-tabs@1.5.24) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-card-tabs
+
+## [1.5.23](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@1.5.22...@synerise/ds-card-tabs@1.5.23) (2026-03-20)
+
+**Note:** Version bump only for package @synerise/ds-card-tabs
+
 ## [1.5.22](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@1.5.21...@synerise/ds-card-tabs@1.5.22) (2026-03-09)
 
 **Note:** Version bump only for package @synerise/ds-card-tabs

package/README.md

@@ -25,37 +25,33 @@ import CardTabs from '@synerise/ds-card-tabs'
 >
     <CardTab
         id={0}
-        index={0}
         name="Variant A"
         tag="A"
         active={true}
         greyBackground={false}
-        prefixIcon={<FileIcon />}
         suffixIcon={<FileIcon />}
         disabled={false}
         prefix={prefixType.TAG}
-        onSelectTab={() => {})}
-        onChangeName={() => {})}
+        onSelectTab={() => {}}
+        onChangeName={() => {}}
         onRemoveTab={() => {}}
-        onDuplicateTab={() => {})}
+        onDuplicateTab={() => {}}
         invalid={false}
         draggable={false}
     />
     <CardTab
         id={1}
-        index={1}
         name="Variant B"
         tag="B"
         active={false}
         greyBackground={false}
-        prefixIcon={<FileIcon />}
         suffixIcon={<FileIcon />}
         disabled={false}
         prefix={prefixType.TAG}
-        onSelectTab={() => {})}
-        onChangeName={() => {})}
+        onSelectTab={() => {}}
+        onChangeName={() => {}}
         onRemoveTab={() => {}}
-        onDuplicateTab={() => {})}
+        onDuplicateTab={() => {}}
         invalid={false}
         draggable={false}
     />
@@ -71,37 +67,38 @@ import CardTabs from '@synerise/ds-card-tabs'
 
 ### CardTabs Component
 
-| Property      | Description                                    | Type               | Default |
-| ------------- | ---------------------------------------------- | ------------------ | ------- |
-| maxTabsCount  | Max number of child components                 | number             | -       |
-| onAddTab      | Callback fired when user clicks on add button  | function           | -       |
-| onChangeOrder | Callback fired when user changes order of tabs | function(newOrder) | -       |
+| Property      | Description                                    | Type                               | Default |
+| ------------- | ---------------------------------------------- | ---------------------------------- | ------- |
+| children      | Array of CardTab elements                      | Array<ReactElement<CardTabProps>>  | -       |
+| addTabLabel   | Label text for the add-tab button              | string                             | -       |
+| maxTabsCount  | Max number of child components                 | number                             | -       |
+| onAddTab      | Callback fired when user clicks on add button  | () => void                         | -       |
+| onChangeOrder | Callback fired when user changes order of tabs | (newOrder: CardTabProps[]) => void | -       |
 
 ### CardTab Component
 
 | Property          | Description                                                                     | Type                                                                                                   | Default  |
 | ----------------- | ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | -------- |
-| id                | Id of tab                                                                       | number                                                                                                 | -        |
-| index             | Position of tab                                                                 | number                                                                                                 | -        |
+| id                | Id of tab                                                                       | string \| number                                                                                       | -        |
 | name              | Name of tab                                                                     | string                                                                                                 | -        |
-| tag               | Single letter (tag) of tab                                                      | string                                                                                                 | -        |
-| addTabLabel       | set text into add tab button                                                    | string                                                                                                 | -        |
+| prefix            | Prefix variant selector                                                         | `prefixType.TAG` / `prefixType.DOT` / `prefixType.ICON` / `prefixType.HANDLE`                         | -        |
+| tag               | Single letter (tag) shown when `prefix={prefixType.TAG}`                        | string                                                                                                 | -        |
 | active            | Flag of active tab                                                              | boolean                                                                                                | `false`  |
 | greyBackground    | Change default color of tabs, use when background will be different then white  | boolean                                                                                                | `false`  |
-| prefixIcon        | Icon visible on the left side of the tab                                        | SVG Icon                                                                                               | null     |
+| prefixIcon        | Icon shown when `prefix={prefixType.ICON}`                                      | ReactNode                                                                                              | -        |
 | suffixIcon        | Icon visible on the right side of the tab, when set action icons will be hidden | SVG Icon                                                                                               | null     |
 | disabled          | Flag of disabled tabs                                                           | boolean                                                                                                | `false`  |
 | invalid           | Flag of tabs with some errors                                                   | boolean                                                                                                | `false`  |
 | invalidName       | Flag of tabs with invalid name                                                  | boolean                                                                                                | `false`  |
 | draggable         | Shows drag handler on the left side of tab                                      | boolean                                                                                                | `false`  |
-| onSelectTab       | Callback fired when user clicks on the tab                                      | (id: number) => void                                                                                   | -        |
-| onPreviewTab      | Callback fired when user clicks on the preview tab icon                         | (id: number) => void                                                                                   | -        |
-| onRemoveTab       | Callback fired when user clicks on the remove tab icon                          | (id: number) => void                                                                                   | -        |
-| onDuplicateTab    | Callback fired when user clicks on the duplicate tab icon                       | (id: number) => void                                                                                   | -        |
-| onChangeName      | Callback fired when the edit name input blur                                    | (id: number, newName: string)                                                                          | -        |
+| onSelectTab       | Callback fired when user clicks on the tab                                      | (id: string \| number) => void                                                                         | -        |
+| onPreviewTab      | Callback fired when user clicks on the preview tab icon                         | (id: string \| number) => void                                                                         | -        |
+| onRemoveTab       | Callback fired when user clicks on the remove tab icon                          | (id: string \| number) => void                                                                         | -        |
+| onDuplicateTab    | Callback fired when user clicks on the duplicate tab icon                       | (id: string \| number) => void                                                                         | -        |
+| onChangeName      | Callback fired when the edit name input blur                                    | (id: string \| number, newName: string) => void                                                        | -        |
 | texts             | Translations of CrudButtons tooltips                                            | CardTabTexts                                                                                           | -        |
 | color             | Color of CardTab                                                                | `red`/ `green`/ `grey`/ `yellow`/ `blue`/ `pink`/ `mars`/ `orange`/ `fern`/ `cyan`/ `purple`/ `violet` | `yellow` |
-| colorDot          | single color dot                                                                | React.ReactNode                                                                                        | -        |
+| colorDot          | Custom dot node shown when `prefix={prefixType.DOT}`; defaults to `CardDot`    | 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`  |
@@ -112,7 +109,7 @@ import CardTabs from '@synerise/ds-card-tabs'
 | ------------------ | -------------------- | ------------------------ | ----------- |
 | changeNameTooltip  | Rename tooltip       | string / React.ReactNode | 'Rename'    |
 | duplicateTooltip   | Duplicate tooltip    | string / React.ReactNode | 'Duplicate' |
-| previewTooltip     | Remove tooltip       | string / React.ReactNode | 'Remove'    |
+| previewTooltip     | Preview tooltip      | string / React.ReactNode | 'Preview'   |
 | removeTooltip      | Remove tooltip       | string / React.ReactNode | 'Remove'    |
 | changeNameMenuItem | Rename menu label    | string / React.ReactNode | 'Rename'    |
 | duplicateMenuItem  | Duplicate menu label | string / React.ReactNode | 'Duplicate' |

package/dist/CardTab/CardTab.d.ts

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

package/dist/CardTab/CardTab.js

@@ -1,199 +1,157 @@
-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, { useCallback, useMemo, useState } from 'react';
-import { useIntl } from 'react-intl';
-import Icon from '@synerise/ds-icon';
-import InlineEdit from '@synerise/ds-inline-edit';
-import Tooltip from '@synerise/ds-tooltip';
-import * as S from './CardTab.styles';
-import CardTabActions from './CardTabActions/CardTabActions';
-import CardTabDropdown from './CardTabDropdown/CardTabDropdown';
-import CardTabPrefix from './CardTabPrefix/CardTabPrefix';
-var CardTab = function CardTab(props) {
-  var id = props.id,
-    name = props.name,
-    suffixIcon = props.suffixIcon,
-    renderSuffix = props.renderSuffix,
-    active = props.active,
-    draggable = props.draggable,
-    disabled = props.disabled,
-    invalid = props.invalid,
-    invalidName = props.invalidName,
-    greyBackground = props.greyBackground,
-    onChangeName = props.onChangeName,
-    onSelectTab = props.onSelectTab,
-    onDuplicateTab = props.onDuplicateTab,
-    onRemoveTab = props.onRemoveTab,
-    onPreviewTab = props.onPreviewTab,
-    texts = props.texts,
-    _props$color = props.color,
-    color = _props$color === void 0 ? 'yellow' : _props$color,
-    itemData = props.itemData,
-    dragHandleProps = props.dragHandleProps,
-    actionsAsDropdown = props.actionsAsDropdown,
-    _intl = props.intl,
-    prefixProps = _objectWithoutPropertiesLoose(props, _excluded);
-  var intl = useIntl();
-  var _useState = useState(false),
-    edited = _useState[0],
-    setEdited = _useState[1];
-  var _useState2 = useState(name),
-    editedName = _useState2[0],
-    setEditedName = _useState2[1];
-  var getTexts = useMemo(function () {
-    return _extends({
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { useState, useMemo, useCallback } from "react";
+import { useIntl } from "react-intl";
+import Icon from "@synerise/ds-icon";
+import InlineEdit from "@synerise/ds-inline-edit";
+import Tooltip from "@synerise/ds-tooltip";
+import { CardSuffixWrapper, CardTabContainer, CardTabLabel, CardTabName } from "./CardTab.styles.js";
+import CardTabActions from "./CardTabActions/CardTabActions.js";
+import CardTabDropdown from "./CardTabDropdown/CardTabDropdown.js";
+import CardTabPrefix from "./CardTabPrefix/CardTabPrefix.js";
+const CardTab = (props) => {
+  const {
+    id,
+    name,
+    suffixIcon,
+    renderSuffix,
+    active,
+    draggable,
+    disabled,
+    invalid,
+    invalidName,
+    greyBackground,
+    onChangeName,
+    onSelectTab,
+    onDuplicateTab,
+    onRemoveTab,
+    onPreviewTab,
+    texts,
+    color = "yellow",
+    itemData,
+    dragHandleProps,
+    actionsAsDropdown,
+    intl: _intl,
+    ...prefixProps
+  } = props;
+  const intl = useIntl();
+  const [edited, setEdited] = useState(false);
+  const [editedName, setEditedName] = useState(name);
+  const getTexts = useMemo(() => {
+    return {
       changeNameTooltip: intl.formatMessage({
-        id: 'DS.CARD-TAB.RENAME',
-        defaultMessage: 'Rename'
+        id: "DS.CARD-TAB.RENAME",
+        defaultMessage: "Rename"
       }),
       removeTooltip: intl.formatMessage({
-        id: 'DS.CARD-TAB.REMOVE',
-        defaultMessage: 'Delete'
+        id: "DS.CARD-TAB.REMOVE",
+        defaultMessage: "Delete"
       }),
       duplicateTooltip: intl.formatMessage({
-        id: 'DS.CARD-TAB.DUPLICATE',
-        defaultMessage: 'Duplicate'
+        id: "DS.CARD-TAB.DUPLICATE",
+        defaultMessage: "Duplicate"
       }),
       changeNameMenuItem: intl.formatMessage({
-        id: 'DS.CARD-TAB.RENAME',
-        defaultMessage: 'Rename'
+        id: "DS.CARD-TAB.RENAME",
+        defaultMessage: "Rename"
       }),
       removeMenuItem: intl.formatMessage({
-        id: 'DS.CARD-TAB.REMOVE',
-        defaultMessage: 'Delete'
+        id: "DS.CARD-TAB.REMOVE",
+        defaultMessage: "Delete"
       }),
       duplicateMenuItem: intl.formatMessage({
-        id: 'DS.CARD-TAB.DUPLICATE',
-        defaultMessage: 'Duplicate'
-      })
-    }, texts);
+        id: "DS.CARD-TAB.DUPLICATE",
+        defaultMessage: "Duplicate"
+      }),
+      ...texts
+    };
   }, [texts, intl]);
-  var handleEditName = useMemo(function () {
-    if (onChangeName === undefined) {
-      return undefined;
+  const handleEditName = useMemo(() => {
+    if (onChangeName === void 0) {
+      return void 0;
     }
-    return function (event) {
+    return (event) => {
       !!event && event.stopPropagation();
       setEdited(true);
     };
   }, [onChangeName, setEdited]);
-  var handleChangeName = useMemo(function () {
-    if (onChangeName === undefined) {
-      return undefined;
+  const handleChangeName = useMemo(() => {
+    if (onChangeName === void 0) {
+      return void 0;
     }
-    return function (event) {
+    return (event) => {
       if (event) {
-        var nameValue = event.target.value;
+        const {
+          value: nameValue
+        } = event.target;
         setEditedName(nameValue);
         onChangeName && onChangeName(id, nameValue);
       }
     };
   }, [setEditedName, onChangeName, id]);
-  var handleEditNameBlur = useCallback(function () {
+  const handleEditNameBlur = useCallback(() => {
     setEdited(false);
     onChangeName && onChangeName(id, editedName);
   }, [onChangeName, id, editedName]);
-  var handleDuplicate = useMemo(function () {
-    if (onDuplicateTab === undefined) {
-      return undefined;
+  const handleDuplicate = useMemo(() => {
+    if (onDuplicateTab === void 0) {
+      return void 0;
     }
-    return function (event) {
+    return (event) => {
       event && event.stopPropagation();
       onDuplicateTab && onDuplicateTab(id);
     };
   }, [id, onDuplicateTab]);
-  var handleRemove = useMemo(function () {
-    if (onRemoveTab === undefined) {
-      return undefined;
+  const handleRemove = useMemo(() => {
+    if (onRemoveTab === void 0) {
+      return void 0;
     }
-    return function (event) {
+    return (event) => {
       event && event.stopPropagation();
       onRemoveTab && onRemoveTab(id);
     };
   }, [id, onRemoveTab]);
-  var handlePreview = onPreviewTab && function () {
-    return onPreviewTab(id);
-  };
-  var handleSelect = useCallback(function (event) {
+  const handlePreview = onPreviewTab && (() => onPreviewTab(id));
+  const handleSelect = useCallback((event) => {
     !!event && event.stopPropagation();
     !edited && onSelectTab && onSelectTab(id);
   }, [edited, id, onSelectTab]);
-  var showCardActions = useCallback(function () {
+  const showCardActions = useCallback(() => {
     return (!!onChangeName || !!onDuplicateTab || !!onRemoveTab || !!onPreviewTab) && !suffixIcon && !renderSuffix;
   }, [onChangeName, onDuplicateTab, onRemoveTab, onPreviewTab, suffixIcon, renderSuffix]);
-  var suffixProps = _extends({}, props, {
-    handleRemove: handleRemove,
-    handleDuplicate: handleDuplicate,
-    handleEditName: handleEditName,
+  const suffixProps = {
+    ...props,
+    handleRemove,
+    handleDuplicate,
+    handleEditName,
     texts: getTexts
-  });
-  var cardSuffix = function () {
-    var showActionsDropdownMenu = actionsAsDropdown && (onChangeName || handleDuplicate || handleRemove);
+  };
+  const cardSuffix = (() => {
+    const showActionsDropdownMenu = actionsAsDropdown && (onChangeName || handleDuplicate || handleRemove);
     if (showActionsDropdownMenu) {
-      return /*#__PURE__*/React.createElement(CardTabDropdown, {
-        editNameHandler: onChangeName ? handleEditName : undefined,
-        duplicateHandler: handleDuplicate,
-        removeHandler: handleRemove,
-        texts: getTexts
-      });
+      return /* @__PURE__ */ jsx(CardTabDropdown, { editNameHandler: onChangeName ? handleEditName : void 0, 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
-      }));
+      return /* @__PURE__ */ jsx(CardSuffixWrapper, { children: /* @__PURE__ */ jsx(Icon, { className: "ds-card-tabs__suffix-icon", component: suffixIcon }) });
     }
     if (showCardActions()) {
-      return /*#__PURE__*/React.createElement(CardTabActions, {
-        onChangeName: onChangeName ? handleEditName : undefined,
-        onDuplicateTab: handleDuplicate,
-        onRemoveTab: handleRemove,
-        onPreviewTab: handlePreview,
-        texts: getTexts
-      });
+      return /* @__PURE__ */ jsx(CardTabActions, { onChangeName: onChangeName ? handleEditName : void 0, onDuplicateTab: handleDuplicate, onRemoveTab: handleRemove, onPreviewTab: handlePreview, texts: getTexts });
     }
-    return /*#__PURE__*/React.createElement(React.Fragment, null);
-  }();
-  return /*#__PURE__*/React.createElement(S.CardTabContainer, {
-    edited: edited,
-    active: Boolean(active),
-    invalid: Boolean(invalid || invalidName),
-    disabled: !active && Boolean(disabled),
-    isDraggable: draggable,
-    color: color,
-    onClick: handleSelect,
-    greyBackground: !!greyBackground,
-    "data-id": id,
-    "data-testid": "card-tab-container",
-    itemData: itemData
-  }, !edited && /*#__PURE__*/React.createElement(CardTabPrefix, _extends({
-    dragHandleProps: dragHandleProps,
-    draggable: draggable
-  }, prefixProps)), /*#__PURE__*/React.createElement(S.CardTabLabel, {
-    onDoubleClick: handleEditName,
-    "data-testid": "card-tab-label"
-  }, edited ? /*#__PURE__*/React.createElement(InlineEdit, {
-    className: "ds-card-tabs__edit-name",
-    size: "small",
-    hideIcon: true,
-    autoFocus: true,
-    input: {
+    return /* @__PURE__ */ jsx(Fragment, {});
+  })();
+  return /* @__PURE__ */ jsxs(CardTabContainer, { edited, active: Boolean(active), invalid: Boolean(invalid || invalidName), disabled: !active && Boolean(disabled), isDraggable: draggable, color, onClick: handleSelect, greyBackground: !!greyBackground, "data-id": id, "data-testid": "card-tab-container", itemData, children: [
+    !edited && /* @__PURE__ */ jsx(CardTabPrefix, { dragHandleProps, draggable, ...prefixProps }),
+    /* @__PURE__ */ jsx(CardTabLabel, { onDoubleClick: handleEditName, "data-testid": "card-tab-label", children: edited ? /* @__PURE__ */ jsx(InlineEdit, { className: "ds-card-tabs__edit-name", size: "small", hideIcon: true, autoFocus: true, input: {
       value: editedName,
-      name: "ds-card-tab-input-" + id,
+      name: `ds-card-tab-input-${id}`,
       onBlur: handleEditNameBlur,
-      onChange: handleChangeName || function () {
-        return undefined;
-      }
-    },
-    "data-testid": "card-tab-edit-input"
-  }) : /*#__PURE__*/React.createElement(Tooltip, {
-    title: name
-  }, /*#__PURE__*/React.createElement(S.CardTabName, {
-    "data-testid": "card-tab-name"
-  }, name))), cardSuffix);
+      onChange: handleChangeName || (() => void 0)
+    }, "data-testid": "card-tab-edit-input" }) : /* @__PURE__ */ jsx(Tooltip, { title: name, children: /* @__PURE__ */ jsx(CardTabName, { "data-testid": "card-tab-name", children: name }) }) }),
+    cardSuffix
+  ] });
+};
+export {
+  CardTab as default
 };
-export default CardTab;

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

@@ -1,16 +1,16 @@
-export declare const CardTabSuffix: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardTabName: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const CardSuffixWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const CardTabLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const CardTabTag: import("styled-components").StyledComponent<"div", any, {}, never>;
-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, {
+export declare const CardTabSuffix: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const CardTabName: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const CardSuffixWrapper: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const CardTabLabel: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const CardTabTag: import('styled-components').StyledComponent<"div", any, {}, never>;
+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, {
     persistent: boolean;
 }, never>;
-export declare const CardIconPrefix: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardTabContainer: import("styled-components").StyledComponent<"div", any, {
+export declare const CardIconPrefix: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const CardTabContainer: import('styled-components').StyledComponent<"div", any, {
     active: boolean;
     invalid: boolean;
     greyBackground: boolean;