@synerise/ds-tags 1.4.10 → 1.5.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.5.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tags@1.5.0...@synerise/ds-tags@1.5.1) (2025-11-13)
+
+**Note:** Version bump only for package @synerise/ds-tags
+
+
+
+
+
+# [1.5.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tags@1.4.10...@synerise/ds-tags@1.5.0) (2025-11-06)
+
+
+### Features
+
+* **dropdown:** dropdownMenu component ([f0ec827](https://github.com/Synerise/synerise-design/commit/f0ec82792cdcb021fa9a454912f6e7a892e53895))
+
+
+
+
+
 ## [1.4.10](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tags@1.4.9...@synerise/ds-tags@1.4.10) (2025-10-31)
 
 **Note:** Version bump only for package @synerise/ds-tags

package/dist/Tags.styles.d.ts

@@ -1,7 +1,25 @@
 import { type TagShape } from '@synerise/ds-tag';
 export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TagOverflow: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const LimitedTag: import("styled-components").StyledComponent<({ id, name, className, disabled, removable, image, shape, color, textColor, onRemove, onClick, prefixel, suffixel, texts, asPill, dashed, tooltipProps, ...htmlAttributes }: import("@synerise/ds-tag").TagProps) => React.JSX.Element, any, {}, never>;
+export declare const LimitedTag: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
+    id?: string | number;
+    name?: string;
+    textColor?: string;
+    color?: string;
+    image?: string;
+    shape?: TagShape;
+    removable?: boolean;
+    className?: string;
+    disabled?: boolean;
+    onClick?: () => void;
+    onRemove?: (tag: string | number) => void;
+    prefixel?: React.ReactNode;
+    suffixel?: React.ReactNode;
+    texts?: import("@synerise/ds-tag").TagTexts;
+    asPill?: boolean;
+    dashed?: boolean;
+    tooltipProps?: import("@synerise/ds-tooltip").TooltipProps;
+} & Omit<import("react").HTMLAttributes<HTMLDivElement>, "image" | "id" | "className" | "color" | "onClick" | "name" | "textColor" | "shape" | "removable" | "disabled" | "onRemove" | "prefixel" | "suffixel" | "texts" | "asPill" | "dashed" | "tooltipProps"> & import("@synerise/ds-utils").DataAttributes & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
 export declare const TagsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Title: import("styled-components").StyledComponent<"div", any, {
     shape?: TagShape;

package/dist/components/AddTags/AddTags.js

@@ -76,6 +76,7 @@ export var AddTags = function AddTags(_ref) {
     tagShape: tagShape,
     onTagClick: onPoolTagSelect,
     dropdownFooter: dropdownFooter,
+    componentId: "tags-add",
     aboveTagsContent: isCreatable && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.CreateTagDropdownButton, {
       "data-testid": "ds-tags-create-button",
       type: "ghost",

package/dist/components/AddTags/AddTags.styles.d.ts

@@ -1,8 +1,61 @@
-import Button from '@synerise/ds-button';
-export declare const CreateTagDropdownButton: import("styled-components").StyledComponent<typeof Button, any, {
+export declare const CreateTagDropdownButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<Partial<{
+    href: string;
+    target?: string;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+} & import("antd/lib/button/button").BaseButtonProps & Omit<import("react").AnchorHTMLAttributes<any>, "type" | "onClick"> & {
+    htmlType?: import("antd/lib/button/button").ButtonHTMLType;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+} & Omit<import("react").ButtonHTMLAttributes<any>, "type" | "onClick">>, "type" | "ghost"> & {
+    type?: import("@synerise/ds-utils").LiteralStringUnion<import("@synerise/ds-button/dist/Button.types").ButtonType>;
+    mode?: import("@synerise/ds-utils").LiteralStringUnion<"single-icon" | "split" | "two-icons" | "label-icon" | "icon-label">;
+    color?: import("@synerise/ds-utils").LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
+    groupVariant?: import("@synerise/ds-utils").LiteralStringUnion<"left-rounded" | "squared" | "right-rounded">;
+    justifyContent?: string;
+    loading?: boolean | {
+        delay?: number;
+    };
+    onClick?: (event: import("react").MouseEvent<HTMLElement>) => void;
+    iconColor?: import("@synerise/ds-utils").LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
+    error?: boolean;
+    readOnly?: boolean;
+    tagProps?: import("@synerise/ds-tag").TagProps;
+    tooltipProps?: import("@synerise/ds-tooltip").TooltipProps;
+} & import("react").RefAttributes<HTMLButtonElement>> & {
+    Creator: import("react").ForwardRefExoticComponent<Omit<import("@synerise/ds-button").CreatorProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Expander: ({ size, expanded, disabled, onClick, className, }: import("@synerise/ds-button").ExpanderProps) => import("react").JSX.Element;
+    Star: (props: import("@synerise/ds-button").StarButtonProps) => React.ReactElement;
+    Checkbox: (props: import("@synerise/ds-button").CheckboxButtonProps) => React.ReactElement;
+}, any, {
     marginless: boolean;
 }, never>;
 export declare const Separator: import("styled-components").StyledComponent<"hr", any, {}, never>;
-export declare const AddTagButton: import("styled-components").StyledComponent<typeof Button, any, {
+export declare const AddTagButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<Partial<{
+    href: string;
+    target?: string;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+} & import("antd/lib/button/button").BaseButtonProps & Omit<import("react").AnchorHTMLAttributes<any>, "type" | "onClick"> & {
+    htmlType?: import("antd/lib/button/button").ButtonHTMLType;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+} & Omit<import("react").ButtonHTMLAttributes<any>, "type" | "onClick">>, "type" | "ghost"> & {
+    type?: import("@synerise/ds-utils").LiteralStringUnion<import("@synerise/ds-button/dist/Button.types").ButtonType>;
+    mode?: import("@synerise/ds-utils").LiteralStringUnion<"single-icon" | "split" | "two-icons" | "label-icon" | "icon-label">;
+    color?: import("@synerise/ds-utils").LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
+    groupVariant?: import("@synerise/ds-utils").LiteralStringUnion<"left-rounded" | "squared" | "right-rounded">;
+    justifyContent?: string;
+    loading?: boolean | {
+        delay?: number;
+    };
+    onClick?: (event: import("react").MouseEvent<HTMLElement>) => void;
+    iconColor?: import("@synerise/ds-utils").LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
+    error?: boolean;
+    readOnly?: boolean;
+    tagProps?: import("@synerise/ds-tag").TagProps;
+    tooltipProps?: import("@synerise/ds-tooltip").TooltipProps;
+} & import("react").RefAttributes<HTMLButtonElement>> & {
+    Creator: import("react").ForwardRefExoticComponent<Omit<import("@synerise/ds-button").CreatorProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Expander: ({ size, expanded, disabled, onClick, className, }: import("@synerise/ds-button").ExpanderProps) => import("react").JSX.Element;
+    Star: (props: import("@synerise/ds-button").StarButtonProps) => React.ReactElement;
+    Checkbox: (props: import("@synerise/ds-button").CheckboxButtonProps) => React.ReactElement;
+}, any, {
     isOpen?: boolean;
 }, never>;

package/dist/components/LimitedTags/LimitedTags.js

@@ -18,6 +18,7 @@ export var LimitedTags = function LimitedTags(_ref) {
     removable: removable,
     onRemove: removable ? onRemove : undefined,
     disabled: disabled,
+    componentId: 'tags-limited',
     asPill: true,
     overlayStyle: {
       zIndex: parseInt(theme.variables['zindex-dropdown'], 10) + 1

package/dist/components/TagsDropdown/TagsDropdown.d.ts

@@ -1,5 +1,5 @@
 import React, { type ReactNode } from 'react';
-import { type DropdownProps } from '@synerise/ds-dropdown';
+import { type DropdownSharedProps } from '@synerise/ds-dropdown';
 import { type TagProps, type TagShape, type TagTexts } from '@synerise/ds-tag';
 import { type ExtendedTagProps } from '../../Tags.types';
 type TagDropdownProps = {
@@ -16,6 +16,7 @@ type TagDropdownProps = {
     maxHeight?: number;
     onRemove?: (tagKey: string | number) => void;
     onTagClick?: (tag: TagProps) => void;
-} & DropdownProps;
-export declare const TagsDropdown: ({ tags, tagShape, texts, removable, disabled, onRemove, asPill, dropdownFooter, noTagsContent, dropdownHeader, aboveTagsContent, maxHeight, onTagClick, ...dropdownProps }: TagDropdownProps) => React.JSX.Element;
+    componentId: string;
+} & Omit<DropdownSharedProps, 'overlay'>;
+export declare const TagsDropdown: ({ tags, tagShape, texts, removable, disabled, onRemove, asPill, dropdownFooter, noTagsContent, dropdownHeader, aboveTagsContent, maxHeight, onTagClick, componentId, ...dropdownProps }: TagDropdownProps) => React.JSX.Element;
 export {};

package/dist/components/TagsDropdown/TagsDropdown.js

@@ -1,4 +1,4 @@
-var _excluded = ["tags", "tagShape", "texts", "removable", "disabled", "onRemove", "asPill", "dropdownFooter", "noTagsContent", "dropdownHeader", "aboveTagsContent", "maxHeight", "onTagClick"];
+var _excluded = ["tags", "tagShape", "texts", "removable", "disabled", "onRemove", "asPill", "dropdownFooter", "noTagsContent", "dropdownHeader", "aboveTagsContent", "maxHeight", "onTagClick", "componentId"];
 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 from 'react';
@@ -21,9 +21,16 @@ export var TagsDropdown = function TagsDropdown(_ref) {
     aboveTagsContent = _ref.aboveTagsContent,
     maxHeight = _ref.maxHeight,
     onTagClick = _ref.onTagClick,
+    componentId = _ref.componentId,
     dropdownProps = _objectWithoutPropertiesLoose(_ref, _excluded);
   var areTags = !!(tags != null && tags.length);
-  return /*#__PURE__*/React.createElement(Dropdown, _extends({}, dropdownProps, {
+  return /*#__PURE__*/React.createElement(Dropdown, _extends({
+    popoverProps: _extends({
+      componentId: componentId,
+      testId: "" + componentId
+    }, dropdownProps == null ? void 0 : dropdownProps.popoverProps)
+  }, dropdownProps, {
+    size: "small",
     overlay: /*#__PURE__*/React.createElement(S.Overlay, {
       "data-testid": "ds-tags-dropdown-overlay"
     }, dropdownHeader, /*#__PURE__*/React.createElement(S.DropdownContainer, {

package/dist/components/TagsDropdown/TagsDropdown.styles.d.ts

@@ -2,4 +2,4 @@ import { type ScrollbarProps } from '@synerise/ds-scrollbar';
 export declare const Overlay: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const DropdownContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<(ScrollbarProps | import("@synerise/ds-scrollbar").VirtualScrollbarProps) & import("react").RefAttributes<HTMLElement>>, any, ScrollbarProps, never>;
 export declare const DropdownTagsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const BottomAction: import("styled-components").StyledComponent<({ onClickAction, children, icon, ...rest }: import("@synerise/ds-dropdown/dist/elements/BottomAction/BottomAction.types").BottomActionProps) => React.JSX.Element, any, {}, never>;
+export declare const BottomAction: import("styled-components").StyledComponent<({ onClickAction, children, icon, ...rest }: import("@synerise/ds-dropdown/dist/components/BottomAction/BottomAction.types").BottomActionProps) => React.JSX.Element, any, {}, never>;

package/dist/components/TagsDropdown/TagsDropdown.styles.js

@@ -4,9 +4,7 @@ import Scrollbar from '@synerise/ds-scrollbar';
 export var Overlay = styled.div.withConfig({
   displayName: "TagsDropdownstyles__Overlay",
   componentId: "sc-15cr02t-0"
-})(["width:216px;background-color:", ";"], function (props) {
-  return props.theme.palette.white;
-});
+})([""]);
 export var DropdownContainer = styled(Scrollbar).withConfig({
   displayName: "TagsDropdownstyles__DropdownContainer",
   componentId: "sc-15cr02t-1"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-tags",
-  "version": "1.4.10",
+  "version": "1.5.1",
   "description": "Tags UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -35,20 +35,23 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^1.4.16",
-    "@synerise/ds-dropdown": "^1.0.34",
-    "@synerise/ds-icon": "^1.7.3",
-    "@synerise/ds-information-card": "^1.2.3",
-    "@synerise/ds-result": "^1.0.29",
-    "@synerise/ds-scrollbar": "^1.1.9",
-    "@synerise/ds-search-bar": "^1.3.19",
-    "@synerise/ds-tag": "^1.3.3",
-    "@synerise/ds-tooltip": "^1.2.1"
+    "@synerise/ds-button": "^1.5.0",
+    "@synerise/ds-dropdown": "^1.1.1",
+    "@synerise/ds-icon": "^1.8.0",
+    "@synerise/ds-information-card": "^1.3.1",
+    "@synerise/ds-result": "^1.0.30",
+    "@synerise/ds-scrollbar": "^1.2.0",
+    "@synerise/ds-search-bar": "^1.4.0",
+    "@synerise/ds-tag": "^1.4.0",
+    "@synerise/ds-tooltip": "^1.3.0"
+  },
+  "devDependencies": {
+    "@testing-library/user-event": "^14"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "73989f3707121812fcd54f3e89e80f6228298689"
+  "gitHead": "085189e79075b23a8fb86ce9b7d930f6ac7b3d23"
 }