@synerise/ds-card-tabs 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.2.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@1.1.0...@synerise/ds-card-tabs@1.2.0) (2025-03-31)
+
+
+### Features
+
+* **sortable:** new component ([181e09f](https://github.com/Synerise/synerise-design/commit/181e09fab834c9964995d1abb81349a564e2c956))
+
+
+
+
+
 # [1.1.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-tabs@1.0.1...@synerise/ds-card-tabs@1.1.0) (2025-03-26)
 
 

package/dist/CardTab/CardTab.d.ts

@@ -1,6 +1,4 @@
 import React from 'react';
 import { CardTabProps } from './CardTab.types';
-declare const _default: React.FC<import("react-intl").WithIntlProps<CardTabProps>> & {
-    WrappedComponent: React.ComponentType<CardTabProps>;
-};
-export default _default;
+declare const CardTab: (props: CardTabProps) => React.JSX.Element;
+export default CardTab;

package/dist/CardTab/CardTab.js

@@ -2,15 +2,14 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React, { useState, useMemo, useCallback } from 'react';
 import Icon from '@synerise/ds-icon';
 import InlineEdit from '@synerise/ds-inline-edit/dist/InlineEdit';
-import { injectIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 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,
-    id = props.id,
+  var id = props.id,
     name = props.name,
     tag = props.tag,
     prefix = props.prefix,
@@ -33,7 +32,9 @@ var CardTab = function CardTab(props) {
     color = _props$color === void 0 ? 'yellow' : _props$color,
     colorDot = props.colorDot,
     itemData = props.itemData,
+    dragHandleProps = props.dragHandleProps,
     actionsAsDropdown = props.actionsAsDropdown;
+  var intl = useIntl();
   var _useState = useState(false),
     edited = _useState[0],
     setEdited = _useState[1];
@@ -162,7 +163,7 @@ var CardTab = function CardTab(props) {
     active: Boolean(active),
     invalid: Boolean(invalid || invalidName),
     disabled: !active && Boolean(disabled),
-    draggable: draggable,
+    isDraggable: draggable,
     color: color,
     onClick: handleSelect,
     greyBackground: !!greyBackground,
@@ -170,6 +171,7 @@ var CardTab = function CardTab(props) {
     "data-testid": "card-tab-container",
     itemData: itemData
   }, !edited && /*#__PURE__*/React.createElement(CardTabPrefix, {
+    dragHandleProps: dragHandleProps,
     colorDot: colorDot,
     draggable: draggable,
     prefixIcon: prefixIcon,
@@ -198,4 +200,4 @@ var CardTab = function CardTab(props) {
     "data-testid": "card-tab-name"
   }, name))), cardSuffix);
 };
-export default injectIntl(CardTab);
+export default CardTab;

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

@@ -1,13 +1,3 @@
-type CardTabContainerProps = {
-    active: boolean;
-    invalid: boolean;
-    greyBackground: boolean;
-    color: string;
-    disabled: boolean;
-    edited: boolean;
-    draggable?: boolean;
-    itemData?: unknown;
-};
 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>;
@@ -18,5 +8,13 @@ export declare const CardDot: import("styled-components").StyledComponent<"div",
 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 CardIconPrefix: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardTabContainer: import("styled-components").StyledComponent<"div", any, CardTabContainerProps, never>;
-export {};
+export declare const CardTabContainer: import("styled-components").StyledComponent<"div", any, {
+    active: boolean;
+    invalid: boolean;
+    greyBackground: boolean;
+    color: string;
+    disabled: boolean;
+    edited: boolean;
+    isDraggable?: boolean | undefined;
+    itemData?: unknown;
+}, never>;

package/dist/CardTab/CardTab.styles.js

@@ -182,7 +182,7 @@ export var CardTabContainer = styled.div.withConfig({
   if (active) return theme.palette["" + color];
   return theme.palette.white;
 }, function (props) {
-  return props.draggable ? 'none' : 'flex';
+  return props.isDraggable ? 'none' : 'flex';
 }, CardTabPrefix, function (_ref28) {
   var theme = _ref28.theme,
     active = _ref28.active;
@@ -207,9 +207,9 @@ export var CardTabContainer = styled.div.withConfig({
   if (active) return theme.palette.white;
   return theme.palette['grey-600'];
 }, CardDotPrefix, function (props) {
-  return props.draggable ? 'none' : 'flex';
+  return props.isDraggable ? 'none' : 'flex';
 }, CardIconPrefix, function (props) {
-  return props.draggable ? 'none' : 'flex';
+  return props.isDraggable ? 'none' : 'flex';
 }, function (_ref33) {
   var theme = _ref33.theme,
     active = _ref33.active;

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

@@ -1,6 +1,7 @@
 import type { ReactNode, MouseEvent, KeyboardEvent } from 'react';
 import type { IntlShape } from 'react-intl';
 import type { DefaultColor } from '@synerise/ds-core';
+import type { DragHandlePropType } from '@synerise/ds-sortable';
 export declare enum prefixType {
     TAG = 0,
     ICON = 1,
@@ -18,12 +19,16 @@ export type CardTabTexts = {
     removeMenuItem?: ReactNode;
     duplicateMenuItem?: ReactNode;
 };
-export type CardTabProps = {
-    intl: IntlShape;
-    id: number;
+export type CardTabProps<IdType extends string | number = number> = {
+    /**
+     * @deprecated
+     */
+    intl?: IntlShape;
+    id: IdType;
     name: string;
     tag: string;
     prefix: prefixType;
+    dragHandleProps?: DragHandlePropType;
     colorDot?: ReactNode;
     color?: Color | DefaultColor | string;
     active?: boolean;
@@ -34,11 +39,11 @@ export type CardTabProps = {
     invalid?: boolean;
     invalidName?: boolean;
     greyBackground?: boolean;
-    onSelectTab?: (id: number) => void;
-    onChangeName?: (id: number, name: string) => void;
-    onDuplicateTab?: (id: number) => void;
-    onRemoveTab?: (id: number) => void;
-    onPreviewTab?: (id: number) => void;
+    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;

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 }: Props) => React.JSX.Element;
+declare const CardTabPrefix: ({ prefix, draggable, tag, prefixIcon, colorDot, dragHandleProps }: Props) => React.JSX.Element;
 export default CardTabPrefix;

package/dist/CardTab/CardTabPrefix/CardTabPrefix.js

@@ -1,3 +1,4 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React from 'react';
 import Icon, { DragHandleM } from '@synerise/ds-icon';
 import * as S from '../CardTab.styles';
@@ -7,7 +8,8 @@ var CardTabPrefix = function CardTabPrefix(_ref) {
     draggable = _ref.draggable,
     tag = _ref.tag,
     prefixIcon = _ref.prefixIcon,
-    colorDot = _ref.colorDot;
+    colorDot = _ref.colorDot,
+    dragHandleProps = _ref.dragHandleProps;
   var className = prefix === prefixType.HANDLE ? 'persistent' : '';
   return /*#__PURE__*/React.createElement(S.CardTabPrefix, {
     "data-testid": "card-tab-prefix"
@@ -18,9 +20,9 @@ var CardTabPrefix = function CardTabPrefix(_ref) {
     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, {
+  }, colorDot), (prefix === prefixType.HANDLE || draggable) && /*#__PURE__*/React.createElement(S.CardDragPrefix, _extends({
     className: className
-  }, /*#__PURE__*/React.createElement(Icon, {
+  }, dragHandleProps), /*#__PURE__*/React.createElement(Icon, {
     className: "ds-card-tabs__handle-icon sortable-drag",
     component: /*#__PURE__*/React.createElement(DragHandleM, null)
   }), ' '));

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

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

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 }: CardTabsProps) => React.JSX.Element;
+declare const CardTabs: ({ className, onChangeOrder, onAddTab, maxTabsCount, children, addTabLabel, ...htmlAttributes }: CardTabsProps) => React.JSX.Element;
 export default CardTabs;

package/dist/CardTabs.js

@@ -1,22 +1,14 @@
+var _excluded = ["className", "onChangeOrder", "onAddTab", "maxTabsCount", "children", "addTabLabel"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { Children, cloneElement, isValidElement } from 'react';
-import { ReactSortable } from 'react-sortablejs';
+// import { ReactSortable, MoveEvent } from 'react-sortablejs';
+
 import Button from '@synerise/ds-button';
 import { defaultColorsOrder } from '@synerise/ds-core';
+import Sortable from '@synerise/ds-sortable';
 import * as S from './CardTabs.styles';
-var SORTABLE_CONFIG = {
-  ghostClass: 'sortable-card-ghost-element',
-  className: 'ds-card-tags-sortable',
-  animation: 150,
-  filter: '.ds-card-tabs__suffix-nodrag, .ds-card-tabs-nodrag',
-  preventOnFilter: false,
-  onMove: function onMove(ev1) {
-    if (ev1.related && ev1.related.classList.contains('ds-card-tabs-nodrag')) {
-      return -1;
-    }
-    return true;
-  }
-};
+import CardTab from './CardTab/CardTab';
 var CardTabs = function CardTabs(_ref) {
   var className = _ref.className,
     onChangeOrder = _ref.onChangeOrder,
@@ -24,21 +16,25 @@ var CardTabs = function CardTabs(_ref) {
     maxTabsCount = _ref.maxTabsCount,
     _ref$children = _ref.children,
     children = _ref$children === void 0 ? [] : _ref$children,
-    addTabLabel = _ref.addTabLabel;
+    addTabLabel = _ref.addTabLabel,
+    htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
   var handleChangeOrder = function handleChangeOrder(newOrder) {
     onChangeOrder && onChangeOrder(newOrder);
   };
-  var addTab = onAddTab ? /*#__PURE__*/React.createElement(S.CardTabsAddButton, {
+  var addTab = onAddTab && /*#__PURE__*/React.createElement(S.CardTabsAddButton, {
     className: "ds-card-tabs-nodrag",
     "data-testid": "card-tabs-add-button"
   }, /*#__PURE__*/React.createElement(Button.Creator, {
     disabled: !!maxTabsCount && Children.toArray(children).length >= maxTabsCount,
     label: addTabLabel != null ? addTabLabel : '',
     onClick: onAddTab
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null);
+  }));
   var childrenCount = Children.count(children);
-  var childrenData = Children.map(children, function (child) {
-    return child.props;
+  var childrenData = Children.map(children, function (child, i) {
+    return _extends({}, child.props, {
+      color: defaultColorsOrder[i % defaultColorsOrder.length],
+      draggable: childrenCount > 1 && (Boolean(onChangeOrder) || child.props.draggable)
+    });
   });
   var renderChildren = function renderChildren() {
     return /*#__PURE__*/React.createElement(React.Fragment, null, Children.map(children, function (child, i) {
@@ -50,17 +46,14 @@ var CardTabs = function CardTabs(_ref) {
       }));
     }));
   };
-  return /*#__PURE__*/React.createElement(S.CardTabsContainer, {
-    className: "ds-card-tabs " + (className || ''),
+  return /*#__PURE__*/React.createElement(S.CardTabsContainer, _extends({
     "data-testid": "card-tabs-container"
-  }, onChangeOrder && childrenCount > 1 ? /*#__PURE__*/React.createElement("div", {
-    "data-testid": "card-tabs-sortable"
-  }, /*#__PURE__*/React.createElement(ReactSortable, _extends({}, SORTABLE_CONFIG, {
-    list: childrenData,
-    setList: handleChangeOrder
-  }), renderChildren(), addTab)) : /*#__PURE__*/React.createElement("div", {
-    className: "ds-card-tags-sortable",
-    "data-testid": "card-tabs-static"
-  }, renderChildren(), addTab));
+  }, htmlAttributes, {
+    className: "ds-card-tabs " + (className || '')
+  }), onChangeOrder && childrenCount > 1 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Sortable, {
+    items: childrenData,
+    ItemComponent: CardTab,
+    onOrderChange: handleChangeOrder
+  }), addTab) : /*#__PURE__*/React.createElement(React.Fragment, null, renderChildren(), addTab));
 };
 export default CardTabs;

package/dist/CardTabs.styles.js

@@ -3,11 +3,7 @@ import { ButtonStyles } from '@synerise/ds-button';
 export var CardTabsContainer = styled.div.withConfig({
   displayName: "CardTabsstyles__CardTabsContainer",
   componentId: "sc-1uu9dja-0"
-})(["display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;width:100%;min-width:588px;.ds-card-tags-sortable{gap:16px 12px;margin-bottom:16px;display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:wrap;}.sortable-chosen{cursor:grabbing;box-shadow:0 16px 32px 0 rgba(35,41,54,0.1);opacity:1;}.sortable-drag{opacity:1 !important;}.sortable-card-ghost-element{border:dashed 1px ", ";background-color:", ";opacity:1;cursor:grabbing;*{visibility:hidden;}}@media (max-width:588px){.ds-button-creator{width:48px !important;", "{display:none;}}}"], function (props) {
-  return props.theme.palette['blue-300'];
-}, function (props) {
-  return props.theme.palette['blue-050'];
-}, ButtonStyles.Creator.CreatorLabel);
+})(["display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;width:100%;min-width:588px;gap:16px 12px;flex-wrap:wrap;padding-bottom:16px;@media (max-width:588px){.ds-button-creator{width:48px !important;", "{display:none;}}}"], ButtonStyles.Creator.CreatorLabel);
 export var CardTabsAddButton = styled.span.withConfig({
   displayName: "CardTabsstyles__CardTabsAddButton",
   componentId: "sc-1uu9dja-1"

package/dist/CardTabs.types.d.ts

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

package/dist/index.d.ts

@@ -3,7 +3,6 @@ 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 declare const CardTabsStyles: {
     CardTabs: typeof MainCardTabsStyles;
     CardTab: typeof CardTabStyles;

package/dist/index.js

@@ -3,7 +3,6 @@ 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 var CardTabsStyles = {
   CardTabs: MainCardTabsStyles,
   CardTab: CardTabStyles

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-card-tabs",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "CardTabs UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,17 +34,16 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^1.1.1",
-    "@synerise/ds-cruds": "^1.0.2",
-    "@synerise/ds-dropdown": "^1.0.2",
-    "@synerise/ds-icon": "^1.1.0",
-    "@synerise/ds-inline-edit": "^1.0.2",
-    "@synerise/ds-menu": "^1.0.2",
-    "@synerise/ds-tooltip": "^1.1.1",
-    "@synerise/ds-typography": "^1.0.2",
-    "@synerise/ds-utils": "^1.0.1",
-    "react-sortablejs": "^6.0.0",
-    "sortablejs": "1.15.1"
+    "@synerise/ds-button": "^1.1.2",
+    "@synerise/ds-cruds": "^1.0.3",
+    "@synerise/ds-dropdown": "^1.0.3",
+    "@synerise/ds-icon": "^1.2.0",
+    "@synerise/ds-inline-edit": "^1.0.3",
+    "@synerise/ds-menu": "^1.0.3",
+    "@synerise/ds-sortable": "^1.1.0",
+    "@synerise/ds-tooltip": "^1.1.2",
+    "@synerise/ds-typography": "^1.0.3",
+    "@synerise/ds-utils": "^1.0.1"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
@@ -53,5 +52,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "47960dcd849dc47c85bd134bcfeb90a5505656a7"
+  "gitHead": "5438445467b16dbc0c2ca97d969ae0e09b74131b"
 }

package/dist/CardTab/ColorsTabs.d.ts

@@ -1 +0,0 @@
-export declare const COLORS_TABS: string[];

package/dist/CardTab/ColorsTabs.js

@@ -1,2 +0,0 @@
-// eslint-disable-next-line import/prefer-default-export
-export var COLORS_TABS = ['blue-600', 'green-600', 'mars-600', 'purple-600', 'cyan-600', 'yellow-600', 'violet-600', 'blue-700', 'green-700', 'mars-700', 'purple-700', 'cyan-700', 'yellow-700', 'violet-700', 'blue-500', 'green-500', 'mars-500', 'purple-500', 'cyan-500', 'yellow-500', 'violet-500'];