@synerise/ds-tags 1.4.4 → 1.4.6

package/CHANGELOG.md

@@ -3,6 +3,27 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.4.6](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tags@1.4.5...@synerise/ds-tags@1.4.6) (2025-10-10)
+
+**Note:** Version bump only for package @synerise/ds-tags
+
+
+
+
+
+## [1.4.5](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tags@1.4.4...@synerise/ds-tags@1.4.5) (2025-10-08)
+
+
+### Bug Fixes
+
+* **table:** popup conatiner attr and tags wrapper styles ([5153e44](https://github.com/Synerise/synerise-design/commit/5153e440469e7d81808ef102c70f0a38f2e6596f))
+* **tags:** dropdowns zindex ([2a751e1](https://github.com/Synerise/synerise-design/commit/2a751e15c5ba940b6ad1065a2b8f18682137ccca))
+* **tags:** fixed dropdown bottom padding ([1bf9236](https://github.com/Synerise/synerise-design/commit/1bf92361cb032a7b142866727cdac43cfe6db8ad))
+
+
+
+
+
 ## [1.4.4](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tags@1.4.3...@synerise/ds-tags@1.4.4) (2025-10-03)
 
 

package/dist/components/LimitedTags/LimitedTags.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTheme } from '@synerise/ds-core';
 import * as S from '../../Tags.styles';
 import { TagsDropdown } from '../TagsDropdown/TagsDropdown';
 export var LimitedTags = function LimitedTags(_ref) {
@@ -10,6 +11,7 @@ export var LimitedTags = function LimitedTags(_ref) {
     disabled = _ref.disabled,
     onRemove = _ref.onRemove;
   var limitedSelectedTags = selected.slice(maxVisibleTags);
+  var theme = useTheme();
   return /*#__PURE__*/React.createElement(TagsDropdown, {
     tags: limitedSelectedTags,
     trigger: ['hover'],
@@ -17,10 +19,15 @@ export var LimitedTags = function LimitedTags(_ref) {
     removable: removable,
     onRemove: removable ? onRemove : undefined,
     disabled: disabled,
-    asPill: asPill
+    asPill: asPill,
+    overlayStyle: {
+      zIndex: parseInt(theme.variables['zindex-dropdown'], 10) + 1
+    }
   }, /*#__PURE__*/React.createElement(S.LimitedTag, {
     id: "limited-tags",
     shape: tagShape,
+    color: theme.palette['grey-100'],
+    textColor: theme.palette['grey-700'],
     name: "+" + limitedSelectedTags.length,
     asPill: true
   }));

package/dist/components/TagsDropdown/TagsDropdown.js

@@ -7,13 +7,6 @@ import InformationCard from '@synerise/ds-information-card';
 import Tag from '@synerise/ds-tag';
 import { NOOP } from '@synerise/ds-utils';
 import * as S from './TagsDropdown.styles';
-var DROPDOWN_BOTTOM_ACTION_STYLES = {
-  padding: '0 8px',
-  cursor: 'auto'
-};
-var DROPDOWN_CONTAINER_STYLES = {
-  padding: '8px'
-};
 export var TagsDropdown = function TagsDropdown(_ref) {
   var tags = _ref.tags,
     tagShape = _ref.tagShape,
@@ -35,8 +28,7 @@ export var TagsDropdown = function TagsDropdown(_ref) {
       "data-testid": "ds-tags-dropdown-overlay"
     }, dropdownHeader, /*#__PURE__*/React.createElement(S.DropdownContainer, {
       absolute: true,
-      maxHeight: maxHeight,
-      style: DROPDOWN_CONTAINER_STYLES
+      maxHeight: maxHeight
     }, aboveTagsContent, areTags ? /*#__PURE__*/React.createElement(S.DropdownTagsContainer, {
       "data-testid": "ds-tags-available-tags"
     }, tags.map(function (tag) {
@@ -62,9 +54,8 @@ export var TagsDropdown = function TagsDropdown(_ref) {
           placement: 'right'
         }, tag.tooltipProps) : undefined
       }));
-    })) : noTagsContent), dropdownFooter && /*#__PURE__*/React.createElement(Dropdown.BottomAction, {
-      onClickAction: NOOP,
-      style: DROPDOWN_BOTTOM_ACTION_STYLES
+    })) : noTagsContent), dropdownFooter && /*#__PURE__*/React.createElement(S.BottomAction, {
+      onClickAction: NOOP
     }, dropdownFooter))
   }));
 };

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

@@ -2,3 +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>;

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

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import Dropdown from '@synerise/ds-dropdown';
 import Scrollbar from '@synerise/ds-scrollbar';
 export var Overlay = styled.div.withConfig({
   displayName: "TagsDropdownstyles__Overlay",
@@ -9,8 +10,12 @@ export var Overlay = styled.div.withConfig({
 export var DropdownContainer = styled(Scrollbar).withConfig({
   displayName: "TagsDropdownstyles__DropdownContainer",
   componentId: "sc-15cr02t-1"
-})(["display:flex;flex-direction:column;"]);
+})(["display:flex;flex-direction:column;padding:8px 0 0 8px;"]);
 export var DropdownTagsContainer = styled.div.withConfig({
   displayName: "TagsDropdownstyles__DropdownTagsContainer",
   componentId: "sc-15cr02t-2"
-})(["display:flex;flex-direction:column;max-height:320px;> *{width:fit-content;max-width:fit-content;display:block;width:inherit;cursor:pointer;flex-shrink:0;}"]);
+})(["display:flex;flex-direction:column;max-height:320px;> *{width:fit-content;max-width:fit-content;display:block;width:inherit;cursor:pointer;flex-shrink:0;}&:after{content:'\\00a0';flex:0 0 8px;overflow:hidden;visibility:hidden;width:10px;}"]);
+export var BottomAction = styled(Dropdown.BottomAction).withConfig({
+  displayName: "TagsDropdownstyles__BottomAction",
+  componentId: "sc-15cr02t-3"
+})(["margin-top:0;padding:0 8px;cursor:auto;"]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-tags",
-  "version": "1.4.4",
+  "version": "1.4.6",
   "description": "Tags UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -35,20 +35,20 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^1.4.12",
-    "@synerise/ds-dropdown": "^1.0.29",
-    "@synerise/ds-icon": "^1.7.2",
-    "@synerise/ds-information-card": "^1.1.7",
-    "@synerise/ds-result": "^1.0.25",
-    "@synerise/ds-scrollbar": "^1.1.8",
-    "@synerise/ds-search-bar": "^1.3.15",
-    "@synerise/ds-tag": "^1.3.0",
-    "@synerise/ds-tooltip": "^1.2.0"
+    "@synerise/ds-button": "^1.4.14",
+    "@synerise/ds-dropdown": "^1.0.31",
+    "@synerise/ds-icon": "^1.7.3",
+    "@synerise/ds-information-card": "^1.2.0",
+    "@synerise/ds-result": "^1.0.27",
+    "@synerise/ds-scrollbar": "^1.1.9",
+    "@synerise/ds-search-bar": "^1.3.16",
+    "@synerise/ds-tag": "^1.3.2",
+    "@synerise/ds-tooltip": "^1.2.1"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "1f909e1fc4174f1c05c148338e64652a893ef926"
+  "gitHead": "4e09fc37fa21ff2e27655e7bb305b136db0ca199"
 }