@synerise/ds-card-tabs 1.5.23 → 1.5.24

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 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

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;